使用 UITableViewAutomaticDimension 创建动态高度的评论列表
在 iOS 开发中，表视图（UITableView）是一个非常常用的组件，它不仅用于展示静态数据，还可以有效地处理动态数据。尤其是在展示评论列表时，我们经常会遇到内容不固定高度的问题。为了解决这个问题，我们可以使用 UITableViewAutomaticDimension，方便地实现自动调整行高的功能。本文将深入探讨如何在 UITableView 中使用 UITableViewAutomaticDimension 来创建一个动态高度的评论列表，并附上相关代码示例。
1. UITableView 概述
UITableView 是一个显示滚动内容的视图，并将内容组织为行，通常用于显示表格信息。其基本的使用方式是通过 UITableViewDelegate 和 UITableViewDataSource 来管理和展示数据。使用 UITableViewAutomaticDimension 可以帮助我们自动调整行的高度，从而简化布局，实现动态内容的展示。
2. 设计评论列表
评论列表通常包含用户头像、用户名和评论内容。为了实现动态高度的列表，我们需要做以下准备工作：
- 创建一个自定义的
UITableViewCell。 - 在
UITableView中注册此自定义的单元格。 - 设置自动行高和约束以实现自动布局。
2.1 自定义 UITableViewCell
在自定义单元格中，我们将使用 UILabel 来显示用户的评论。我们将使用 Auto Layout 来确保这些元素在其内容大小变化时能自动调整大小。
import UIKit
class CommentCell: UITableViewCell {
let avatarImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
return imageView
}()
let usernameLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.boldSystemFont(ofSize: 16)
return label
}()
let commentLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 14)
label.numberOfLines = 0 // 允许多行
return label
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupViews()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupViews() {
contentView.addSubview(avatarImageView)
contentView.addSubview(usernameLabel)
contentView.addSubview(commentLabel)
// Auto Layout Constraints
NSLayoutConstraint.activate([
avatarImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
avatarImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
avatarImageView.widthAnchor.constraint(equalToConstant: 40),
avatarImageView.heightAnchor.constraint(equalToConstant: 40),
usernameLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 10),
usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
usernameLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
commentLabel.leadingAnchor.constraint(equalTo: usernameLabel.leadingAnchor),
commentLabel.topAnchor.constraint(equalTo: usernameLabel.bottomAnchor, constant: 5),
commentLabel.trailingAnchor.constraint(equalTo: usernameLabel.trailingAnchor),
commentLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10)
])
}
}
2.2 注册自定义单元格
在你的 UITableView 控制器中，需要注册你刚刚创建的单元格：
class CommentListViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
private let tableView = UITableView()
override func viewDidLoad() {
super.viewDidLoad()
setupTableView()
}
private func setupTableView() {
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.delegate = self
tableView.dataSource = self
tableView.register(CommentCell.self, forCellReuseIdentifier: "CommentCell")
tableView.estimatedRowHeight = 44 // 估计行高
tableView.rowHeight = UITableView.automaticDimension // 自动行高
view.addSubview(tableView)
NSLayoutConstraint.activate([
tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
tableView.topAnchor.constraint(equalTo: view.topAnchor),
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
}
// UITableViewDataSource methods
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return comments.count // comments 是评论数据的数组
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "CommentCell", for: indexPath) as! CommentCell
let comment = comments[indexPath.row]
cell.usernameLabel.text = comment.username
cell.commentLabel.text = comment.text
return cell
}
}
3. 总结和优化
在本文中，我们简单介绍了如何使用 UITableViewAutomaticDimension 创建一个动态高度的评论列表。通过自定义 UITableViewCell，并结合 Auto Layout，我们可以实现行高的自动调整，优化了视觉展示和用户体验。
4. 类图示例
下面是该项目的基本类的类图：
classDiagram
class CommentCell {
+avatarImageView: UIImageView
+usernameLabel: UILabel
+commentLabel: UILabel
+setupViews(): void
+init(style:reuseIdentifier:String): void
}
class CommentListViewController {
+tableView: UITableView
+setupTableView(): void
+tableView(_ : UITableView, cellForRowAt _: IndexPath): UITableViewCell
}
CommentListViewController --> CommentCell
在实际开发中，除了用户头像、用户名和评论内容外，我们还可以添加更多功能，例如展示评论的时间、点赞按钮等等。总之，UITableViewAutomaticDimension 是一个强大的工具，它能帮助我们轻松地创建动态和自适应的用户界面，极大地提升用户体验。希望本文能对你的 iOS 开发之路有所帮助！
