如何在动态高度的表格视图单元格中显示图像?

时间:2018-02-24 16:20:56

标签: ios uitableview uiimageview autolayout

UITableViewCell包含UIImageView以显示不同宽高比的图片。

表格视图单元格应根据图像大小比例调整其高度。因此,图像视图宽度应等于单元格宽度,图像高度为cell width * (image height / image width),以将图像显示为aspectFit

图像视图添加了自动布局约束:

heightConstraint = imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1)

NSLayoutConstraint.activate([
    imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
    imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
    imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
    imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
    heightConstraint
])

为单元格设置图像时更新高度约束:

func updateCell(withImage image: UIImage) {

    // Update image
    imageView.image = image

    // Deactivate old height constraint
    NSLayoutConstraint.deactivate([heightConstraint])

    // Activate new height constraint
    heightConstraint = imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: image.size.height / image.size.width)
    NSLayoutConstraint.activate([heightConstraint])
    }
}

设备上的单元格高度看起来正确,但它会记录自动布局错误:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x60700016d600 H:|-(15)-[MyApp.MyImageView:0x61600042b180]   (active, names: '|':UITableViewCellContentView:0x615000056e80 )>",
    "<NSLayoutConstraint:0x60700016d590 MyApp.MyImageView:0x61600042b180.trailing == UITableViewCellContentView:0x615000056e80.trailing - 15   (active)>",
    "<NSLayoutConstraint:0x60700016d4b0 V:|-(15)-[MyApp.MyImageView:0x61600042b180]   (active, names: '|':UITableViewCellContentView:0x615000056e80 )>",
    "<NSLayoutConstraint:0x607000071210 MyApp.MyImageView:0x61600042b180.bottom == UITableViewCellContentView:0x615000056e80.bottom - 15   (active)>",
    "<NSLayoutConstraint:0x607000303bb0 MyApp.MyImageView:0x61600042b180.height == 1.499*MyApp.MyImageView:0x61600042b180.width   (active)>",
    "<NSLayoutConstraint:0x607000073430 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x615000056e80.height == 547   (active)>",
    "<NSLayoutConstraint:0x6070000734a0 'UIView-Encapsulated-Layout-Width' UITableViewCellContentView:0x615000056e80.width == 375   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x607000303bb0 MyApp.MyImageView:0x61600042b180.height == 1.499*MyApp.MyImageView:0x61600042b180.width   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

似乎添加的高度限制与UITableViewCellContentView高度冲突。例如,UILabel我不会遇到此问题,因为它具有固有的内容大小,但UIImageView的内在内容大小是其图像大小。那么这里的解决方案是什么,没有像单独计算每个单元格高度那样的解决方法?

1 个答案:

答案 0 :(得分:2)

您可以通过将imageView的底部约束优先级设置为999来阻止此日志,因为当单元格加载时,它会建议与动态tableViews中始终发生的约束冲突的静态高度