在 UITableViewCell 中叠加 textLabel 和 UIImageView

Posted 2023-02-27

【中文标题】在 UITableViewCell 中叠加 textLabel 和 UIImageView

【英文标题】：Overlay textLabel and UIImageView in UITableViewCell

【发布时间】：2014-01-09 19:04:34

【问题描述】：

我在将 textLabel 和 detailTextLabel 定位到自定义 UITableViewCell 中时遇到问题，该 UIImageView 出现在 textLabel 和 detailTextLabel 后面。

参考图片 - 它会更有意义 --> 你正在寻找一个 UITableView，其中每个气泡代表一个不同的 UITableViewCell。

本质上，我试图通过扩展气泡尺寸将 textLabel 和 detailTextLabel 放入您看到的气泡中。但是，无论我尝试什么，即使我更改 UIImageView 框架或边界或 contentMode，气泡也不会改变它的宽度和高度。

这是cellForRowAtIndexPath中的相关代码：

//Set font and style        
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.detailTextLabel.backgroundColor = [UIColor clearColor];    

// Assign our own background image for the cell
UIImage *cellBackgroundImage = [UIImage imageNamed:@"Chat.png"];

UIImageView *cellBackgroundImageView = [[UIImageView alloc] initWithImage:cellBackgroundImage];
//[cellBackgroundImageView setBounds:CGRectMake(0, 0, 20, 20)];
//[cellBackgroundImageView setImage:cellBackgroundImage];

//cellBackgroundImageView.frame = CGRectMake(cellBackgroundImageView.frame.origin.x,         cellBackgroundImageView.frame.origin.y, 20, 20);
//cellBackgroundImageView.bounds = CGRectMake(cellBackgroundImageView.frame.origin.x, cellBackgroundImageView.frame.origin.y, 0, 0);
cellBackgroundImageView.contentMode = UIViewContentModeScaleAspectFill;

cellBackgroundImageView.image = cellBackgroundImage;
cell.backgroundView = cellBackgroundImageView;

任何帮助将不胜感激。

【参考方案1】：

这里不用，我是通过在自定义单元格类的LayoutSubviews方法中写图像和标签的框架来实现的。

只是 -(void)layoutSubviews setframe: 两个 UI 组件

【参考方案2】：

不要使用 Aspect FIll，使用 scaleToFill，或使用 imageCapInsets 将图像设置为图像视图。

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

对于您的图像，它必须像

UIImage *cellBackgroundImage = [[UIImage imageNamed:@"Chat.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(20, 70, 40, 20) resizingMode:UIImageResizingModeStretch]

【讨论】：

将 UIImage *cellBackgroundImage = [[UIImage imageNamed:@"Chat.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(20, 70, 40, 20) resizingMode:UIImageResizingModeStretch] 放入 cellForRowAtIndexPath 不会调整气泡的大小以包围文本。

而不是设置 cell.backGroundView，尝试将 cellBackgroundImage 作为 subView 添加到 cell.contentView。并设置 cellBackgroundImage UIImageView 的框架，使其包含 textLabel 和 detailTextLabel。并且 cap insets 确保您的气泡图像看起来拉伸后就好了。