UITableViewCell 如何动态适应保留宽高比的新图像？

Posted 2023-02-24

【中文标题】UITableViewCell 如何动态适应保留宽高比的新图像？

【英文标题】：how can UITableViewCell dynamically adapt to new image with aspect ratio retained?

【发布时间】：2015-05-13 09:51:09

【问题描述】：

我正在设计一个表格视图，可以将新图像动态加载到单元格中。

我的 tableview 层次结构是这样的：tableview -> myCustomCell -> content view -> myCustomImageView.

我想要的是：在 tableViewCells 以给定大小（例如 300 * 50）显示在屏幕上之后，用户可以点击某个单元格以显示特定大小的图像（例如 600 * 600）。为了更新单元格，我使用 tableView.beginUpdates() 和 tableView.endUpdates()。那么 tabelViewCell 的大小应该改为 300 * 300。

经过这么多尝试，我遇到了以下问题：

如果我将imageView的contentmode设置为aspectFit，tableViewCell的大小和imageView的大小都变成了300 * 600（实际图片是300 * 300），有空白区域在单元格的顶部和底部区域，如下所示：

如果我将imageView的contentmode设置为aspectFill，tableViewCell的大小和imageView的大小都变为300 * 600（实际图片为600 * 600），左侧右侧被剪掉，如下所示：

有没有办法让 tableViewCell 在保持纵横比的同时最适合图像？非常感谢。

【问题讨论】：

不要更改原始图片尺寸

@Shanmugasundharamselvadurai 我没有改变。 “实际图像尺寸”是指您在屏幕上看到的尺寸。原图尺寸还是600 * 600

试试这个“newImgThumb.contentMode = .ScaleAspectFit”

@Shanmugasundharamselvadurai 效果和 aspectFit 一样

圣嘎奇你的单元格大小是多少

【参考方案1】：

加载图片时，计算图片的纵横比。

然后给 UIImageView 添加一个约束来固定它的纵横比。纵横比约束一旦创建就无法更改，因此您必须删除任何现有的约束并在每次更改图像时添加一个新约束。比如：

// Declare constraint as a property so you can remove it
@property NSLayoutConstraint *constraint;

// Remove previous constraint as multiplier property is read only.
if (self.constraint)
  [self.imageView removeConstraint:self.constraint];


// Calculate aspect ration
CGFloat aspectRation = <insert calculation...>

// Add a new constraint for the new image setting the aspect ration
self.constraint = [NSLayoutConstraint constraintWithItem:self.imageView  
                                          attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual 
                                             toItem:self.imageView 
                                          attribute:NSLayoutAttributeWidth 
                                         multiplier:aspectRatio constant:0.0f];

// Add the new constraint.
[self.imageView addConstraint:constraint];

// View needs updated.
[self.contentView setNeedsLayout];

这应该强制计算图像和纵横比。

为了让图像视图知道它的宽度或高度（但不能同时知道它会与纵横比发生冲突），您必须为图像视图添加约束以满足您的显示需求。例如您可能希望使其与包含视图具有相等的宽度，因此它始终填充整个宽度，然后高度将根据纵横比等变化......这取决于您希望图像如何填充单元格。

如果使用故事板，您可能会发现给 UIImageView 一个纵横比更容易，这样 IB 就不会抱怨缺少约束。按住 CTRL 键将其拖动到单元格标题中，以便为该约束提供一个 IBOutlet。第一次，从 UIImageView 中删除 IB 版本。

【讨论】：

我将 imageView 的四个边捏到情节提要中单元格的容器边距。所以如果单元格被重用，我需要一一检查约束，看看其中一个是否修复了纵横比？

更新了答案。现在它被固定在边缘，图像视图知道它可以水平和垂直增长。如更新的答案中所述，我将在 stroyboard 中添加一个纵横比约束，但为它制作一个 IBOutlet 以便您可以在加载图像并用新图像替换它时在代码中删除它。这将停止 IB 抱怨，并确保您在运行之前知道您的约束是正确的。

【参考方案2】：

希望这段代码对你有所帮助

cimageView.contentMode = UIViewContentModeCenter;
 if (imageView.bounds.size.width > ((UIImage*)imagesArray[i]).size.width && imageView.bounds.size.height > ((UIImage*)imagesArray[i]).size.height) 
   imageView.contentMode = UIViewContentModeScaleAspectFit;