UIImageView 适合自调整大小的 tableview 单元格中的最大宽度

Posted 2023-02-27

【中文标题】UIImageView 适合自调整大小的 tableview 单元格中的最大宽度

【英文标题】：UIImageView fit to maximum width in self sizing tableview cells

【发布时间】：2016-11-01 21:15:45

【问题描述】：

需要设置哪些自动布局约束，以便 tableview 单元格内的图像像 Twitter 应用程序一样扩展到单元格的宽度边框？

我无法完成它，想知道哪些约束和设置是必要的。

【参考方案1】：

您应该设置前导、尾随、顶部和底部约束。因此width 将根据屏幕宽度调整大小，height 将根据图像的纵横比设置，因为您的单元格具有动态高度。

【参考方案2】：

我只关注宽度约束（前导和尾随），但您也可以以类似的方式调整顶部和底部的其他约束。

此外，您可能希望更改图像视图以支持此功能，但这取决于您使用的图像。我选择了 Aspect Fill 以确保它使用整个宽度。但是，如果您的图片尺寸不正确，此设置将裁剪图片的顶部和底部。

请注意，在“添加新约束”窗口中，左右框有一条红色实线，表示它们已被选中。

如果需要，您可以根据需要调整 imageView 以提供一些填充，例如在链接图像中也可以看到。设置约束的方法仍然相同，只是框中的值会有所不同。

【参考方案3】：

首先，您应该知道，当您使用“UITableViewAutomaticDimension”设置单元格的高度时，单元格中的 UIImageView 并不像您想象的那样工作。

如果您设置“高度约束”并更改它的值将起作用。

因此，使用您的图像视图设置“前导”、“尾随”、“顶部”、“底部”和“高度”约束

如果您的图片已下载，请获取它的大小并计算并设置“高度约束”。

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat

    return UITableViewAutomaticDimension


func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat

    return UITableViewAutomaticDimension


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

    let cell = tableView.dequeueReusableCell(withIdentifier: "list")

    if let iv = cell?.contentView.viewWithTag(1) as? UIImageView
    
        // this UIImageView.image(url: URL, placeHolder: UIImage, complete: (UIImage)->()) is my custom function.
        // you can use SDWebImage's function
        iv.image(url: URL(string: "http://imageurl")!, placeHolder: nil, complete:  (img) in

            // calculate imageview's height
            let ivHeight = (iv.frame.size.width * img.size.height) / img.size.width

            // get height constraint and set the value.
            for lc in iv.constraints
            
                if lc.firstAttribute == .height
                
                    // this will change cell's height automatically
                    lc.constant = ivHeight
                    break
                
            
        )
    

    return cell!

对不起，我的英语不好。 :(