使用自动布局和情节提要自动调整大小的单元格
介绍
作为iOS开发人员，我习惯于使用layoutSubviews手动编写UI布局。 但是，我花了很多时间在代码中调整自定义表格视图单元的大小，并且不得不手动计算每个标签，图像视图，文本字段以及单元中其他所有元素的高度。 因此，我想找到一个更优雅，更简洁的解决方案。 进行调查后，我将注意力转向了两个老朋友-自动版式和情节提要。
实作
在本文中，我将构建一个非常简单的消息传递应用程序，它的功能仅仅是响应用户发送的内容。 请注意，我将跳过一些无关紧要的步骤，例如，创建视图控制器或自定义表格视图单元格类。
让我们开始使用我们的UI组件。 将表视图，文本字段和发送按钮拖放到情节提要中，然后将它们与视图控制器挂钩。
final class MessagingViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
@IBOutlet weak var textField: UITextField!
@IBOutlet weak var sendButton: UIButton!
// ...
}
此外，使用情节提要的“ Pin menu设置以下约束：
- 将表视图的顶部边缘固定在其父视图的顶部边缘0个点处。
- 将表视图的前缘和后缘固定到其父视图的前缘和后缘0个点。
- 将文本框底部的边缘固定在距文本字段顶部8个点的位置。
- 将文本字段的前沿固定在其父视图的前沿距8个点的位置。
- 将文本字段的尾端固定在距离发送按钮的开头8个点的位置。
- 将文本字段的底部边缘固定在其超级视图的底部边缘8个点处。
- 对齐文本字段的顶部和底部边缘以及发送按钮。
完成约束后，移至文本字段的大小检查器，并将“ Horizontal Content Hugging Priority设置为249。设置此优先级应有助于扩展文本字段并修复警告。
其次，将图像视图和标签拖放到表格视图单元格中，并将其与自定义表格视图单元格挂钩。
final class MessagingCell: UITableViewCell {
@IBOutlet weak var bubbleImageView: UIImageView!
@IBOutlet weak var label: UILabel!
// ...
}
此外，还设置以下约束：
- 从内容视图的边距将图像视图的前，上，后和下边缘固定为0点。
- 从内容视图的边缘将标签的前，上，后和下边缘固定16个点。
完成所有UI组件后，切换到视图控制器的swift文件，并将这两行代码添加到viewDidLoad方法中。
override func viewDidLoad() {
super.viewDidLoad()
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 100
}
将rowHeight设置为UITableViewAutomaticDimension ，将告知表视图使用自动布局约束及其单元格的内容来确定每个单元格的高度。 为了使表格视图能够执行此操作，还必须提供estimatedRowHeight 。 在这种情况下，100只是在此特定情况下运行良好的任意值。
最后但并非最不重要的一点是，实现sendAction方法并使用send按钮将其连接起来。
@IBAction func sendAction(sender: UIButton) {
guard let text = textField.text, !text.isEmpty else { return }
viewModel.appendMessage(with: text)
textField.text = nil
}
结论
这是整个示例项目。
表格视图可能是iOS中结构化数据视图的最基本概念。 随着您的应用程序变得越来越复杂，您可能会使用各种自定义表格视图单元格布局。 我们可以利用对Storyboard进行改进的优势来节省实施自定义大小单元的时间。 欢迎任何评论和反馈，请分享您的想法。 谢谢！