调整 UITableViewCell 的大小以适合标签或图像和圆角

Posted 2023-02-24

【中文标题】调整 UITableViewCell 的大小以适合标签或图像和圆角

【英文标题】：Resize UITableViewCell to fit label or image and rounded corners

【发布时间】：2017-03-15 18:02:26

【问题描述】：

我附上了sample project，让您可以测试并查看我能做些什么来解决这个问题。

我正在尝试动态调整高度图像的大小，同时围绕每个其他单元格的两个角。这样做会导致蒙版被切断。

基本上这是我想要实现的目标：

UITableView 的行高设置为自动。

_nTableView.rowHeight = UITableViewAutomaticDimension;
_nTableView.estimatedRowHeight = 150;

使用 SDWebImage 库使用 CustomTableViewCell 下载图像

[self.nImageView sd_setImageWithURL:[NSURL URLWithString:imageUrl] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL)];

将单元格配置为根据其行圆角

UIBezierPath *maskPath = [UIBezierPath
                      bezierPathWithRoundedRect:self.bubbleView.bounds
                      byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerTopLeft)
                      cornerRadii:CGSizeMake(20, 20)];

CAShapeLayer *maskLayer = [CAShapeLayer layer];

maskLayer.frame = self.bubbleView.bounds;
maskLayer.path = maskPath.CGPath;

self.bubbleView.layer.mask = maskLayer;

执行上述操作会导致蒙版切断，但高度计算正确。见下文：

基于这个stack overflow's question，如果有掩码，我们需要移除掩码。我尝试在 awakeFromNib 方法中将掩码设置为 nil，但这没有任何影响。

self.nImageView.layer.mask = nil;
self.nImageView.layer.masksToBounds = NO;

我也尝试按照question 的答案进行操作，但这会导致应用程序崩溃。

提前谢谢你。

【问题讨论】：

你是保持图像的大小是固定的还是可变的？

抓取了您的示例项目...是的，它会崩溃，直到我删除 cellForRowAtIndexPath 中的“删除层”代码...但是，我不知道您要做什么。你这里的图片是你想要的吗？如果不是，它应该是什么样子？

@DonMag 我已经更新了项目，删除了“层”代码。如果您评论 [cell configureBubbleInRow:indexPath.row]，您将看到我想要看到的内容。看到这个：imgur.com/a/JVtA3

我认为您最好在图像下载后在完成块中设置遮罩（或重新设置遮罩）。稍微快速玩一下，就很接近了 - 至少，假设这是最终目标：d.pr/i/Uz7H

@DonMag 我尝试调用 [self configureBubbleInRow:rowIndex] 并没有给我类似的结果。你能告诉我你做了什么吗？

【参考方案1】：

这是一种可能的解决方案 - 可能不是最好的，可能无法完全满足您的需求，但可能会让您顺利上路...

不要尝试从自定义 UITableViewCell 类中操作图层/蒙版，而是使用 UIView 子类作为图像持有者。该类的代码可以处理圆角和图层/蒙版大小更新。

在此处查看示例：https://github.com/DonMag/dhImage

【参考方案2】：

根据内容设置行高：

  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
  

    if(/*check if content is text label*/)
    
      UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell1"];
      UILabel *lbl = (UILabel*)[ cell.contentView viewWithTag:1000];  
      lbl.text = message;
      [cell layoutIfNeeded];
      CGSize size = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];

      if(size.height < 100) 
            return  100;
      
      else 
           return size.height;
      
    
    else                  // content is image 
        return 200;
      
    

将单元格配置为圆角：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

  .
  .
  .
    [cell.contentView.layer setCornerRadius:10.0f];
  return cell;

使用 SDWebImage 库下载图像：

      SDWebImageDownloader *downloader = [SDWebImageDownloader sharedDownloader];
       [downloader downloadImageWithURL:addr 
                                options:0 
                               progress:
                  ^(NSInteger receivedSize, NSInteger expectedSize) 
                        // progression tracking code 
                              
                              completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) 
                      if (image && finished) 
                          // Pass the imageView to this block
                          // After completion display downloaded image in imageView
                          imageView.image = image;
                      
                  ];

希望对你有帮助！！

【讨论】：

希望对您有所帮助！！回复@AndyM

由于删除 cellForRowAtIndexPath 中的图层而导致崩溃，但您也没有提及无缘无故更改变量名称

哪一部分？ @僵尸

实际上我有工作代码..我已经粘贴了其中的一部分！！ @僵尸。如果您看到任何变化，请通知我.. 会很高兴知道 n 变化:)

在从主线程访问引擎后，此应用程序正在从后台线程修改自动布局引擎。这可能会导致引擎损坏和奇怪的崩溃。