ios - 具有复杂布局、可变行高和自动布局的 UITableViewCell

Question

我正在开发一个处理纵向和横向方向的 iPad 应用程序。 我有一个表格 View ，显示具有复杂(？)布局的单元格，并且可以具有不同的高度。

这是它在纵向中应该是什么样子的屏幕截图(= 768 pts witdh，这应该导致 435 pts 高度)

这是它在横向中应该是什么样子的屏幕截图(= 1024 pts 宽度，这应该导致 526 pts 高度)

为了稍微简化布局，我们将只保留第一张图片。

布局

我有 1 张图像，在设备旋转时增加/减少时应保持其比例: 纵向 = 256 宽 * 342 高 横向 = 341,333 宽 * 456 高 我有包含标题(蓝色)和潜在的多行文本内容(粉红色)的黄色 View (每个方向应该有 8 磅的边距和 16 磅的填充)。 笔记: - 粉色标签可能完全是空的。 - 黄色 View 将带有纹理，这就是需要它的原因，它不仅仅是解决问题的额外 View 。

内容 View (UITableViewCell 的子项)约束

V:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView)>",   // Top margin (0 pts) of the image
H:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView)>",   // Left margin (0 pts) of the image
V:[UIImageView]-(8)-[UIView]>",     // Vertical space (8 pts) between the image and the yellow view (i.e. top margin of the yellow view)
H:|-(8)-[UIView]   (Names: '|':UITableViewCellContentView)>",   // Left margin (8 pts) of the yellow view
H:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView)>",   // Right margin (8 pts) of the yellow view
V:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView)>",   // Bottom margin (8 pts) of the yellow view

黄色 View 约束

V:|-(16)-[UILabel:Blue]   (Names: '|':Yellow View )>",   // Top margin (16 pts) of the blue label (i.e. top padding of the yellow view)
H:|-(16)-[UILabel:Blue]   (Names: '|':Yellow View )>",   // Left margin (16 pts) of the blue label
V:[UILabel:Blue]-(>=16)-|   (Names: '|':Yellow View )>",   // Bottom margin (>= 16 pts) of the blue label
H:[UILabel:Blue]-(NSSpace(8))-[UILabel:Pink]>",   // Horizontal space between blue and pink labels
V:[UILabel:Pink]-(16)-|   (Names: '|':Yellow View )>",   // Top margin (16 pts) of the pink label
H:[UILabel:Pink]-(16)-|   (Names: '|':Yellow View )>",   // Right margin (16 pts) of the pink label
V:|-(16)-[UILabel:Pink]   (Names: '|':Yellow View )>",   // Bottom margin (16 pts) of the pink label

约束说明

• 在 Interface Builder 中，我为图像设置了一个 256 宽 * 342 高的占位符固有大小(我们稍后会看到，我根据设备方向在代码中动态设置实际大小限制)
• 蓝色标签的水平内容压缩优先级为 751
• 图像的垂直拥抱优先级为 1
• 黄色 View 和粉色标签的垂直拥抱优先级为 1000

界面生成器测试

如果我增加单元格高度，图像会变形并且它的高度会增加，而黄色 View 会粘在底部而不会变形。所以一切正常(因为我们无法在 IB 中设置比例约束来模拟图像的保持比例增长)。

代码

available on GitHub

结果

如果我以纵向启动应用程序，单元格是完美的。粉色标签显示在 2 行上，每个尺寸和间距都得到充分尊重/计算! 如果然后我旋转到横向，图像不会增长，而是黄色 View 和粉红色标签正在增长......这是一个截图:

现在，如果我横向启动应用程序，单元格也很完美。图像大小合适(351 磅宽度(四舍五入值)* 456 磅高度)，等等... 如果然后我旋转到纵向，它会使应用程序崩溃......输出如下:

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. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0xa3d9dd0 V:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView )>",
    "<NSLayoutConstraint:0xa3d9e00 V:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView )>",
    "<NSLayoutConstraint:0xa3d9e60 V:[UIImageView]-(8)-[UIView]>",
    "<NSLayoutConstraint:0xa3dd9b0 V:[UIImageView(456)]>",
    "<NSAutoresizingMaskLayoutConstraint:0xa3de670 h=--& v=--& V:[UITableViewCellContentView(431)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0xa3dd9b0 V:[UIImageView(456)]>

注:UIView为黄色view

非常感谢您的帮助(或至少阅读 ;-)

PS:我昨天在开发论坛上发布了同样的问题，并将在此处发布任何进展。 DevForum discussion link

Answer 1

我下载了您的示例项目并运行了它。您似乎在代码中遇到了一些问题，但到目前为止最明显的问题是当发生自转时您没有在 TableView 上调用 reloadData - 这是为了让表格 View 重新计算单元格高度(并根据更改重新布局每个可见单元格)。

将以下方法添加到您的 ARJProcedureListViewController.m 文件中:

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];

    [self.tableView reloadData];
}

我看到约束冲突仍然记录到控制台，这意味着至少有一个约束是错误的(您可能过度约束了某些 View )。