一、前言
- 我们在写列表的时候，经常出现每一个 Cell 高度不一样的情况，但是 iOS 这边是在是太不智能了
- 比起隔壁
android的RecyclerView，人家可以自动更具每一项高度，来进行伸缩变化，iOS的列表控件UITableView竟然都不能直接自适应列表高度
二、效果
- 其实具体的实现并不难，只是没学过的人肯定搞不出来，开始前这里可以先看下效果
- 大致就是
UITableView会自动计算每一个cell的高度，伸缩变换后显示出来，网上有很多类似的帖子，但是大都纸上谈兵，没图没代码地讲不清楚，而且还都是n年前的文章 -
那么开始前。效果图这里效果图如下：
image
三、使用与实现
- 就以上图为例，我带大家边讲解边实现上图中的例子，这样一来成功运行的时候，大家就也都会了
3.1 实现数据提供者 - ContentProvider
- 实现一个数据提供者 - ContentProvider ，用于模拟从网络上拉去数据的情况
class ContentProvider {
static let datas = ["对我个人而言，美丽的沙滩不仅仅是一个重大的事件，还可能会改变我的人生。",
"美丽的沙滩因何而发生？ 我认为， 那么， 查尔斯·史考伯在不经意间这样说过，一个人几乎可以在任何他怀有无限热忱的事情上成功。",
"对我个人而言，美丽的沙滩不仅仅是一个重大的事件，还可能会改变我的人生。 带着这些问题，我们来审视一下美丽的沙滩。 美丽的沙滩，发生了会如何，不发生又会如何。 带着这些问题，我们来审视一下美丽的沙滩。 既然如何， 我认为， 而这些并不是完全重要，更加重要的问题是， 这样看来， 带着这些问题，我们来审视一下美丽的沙滩。",
"我们都知道，只要有意义，那么就必须慎重考虑。",
"对我个人而言，美丽的沙滩不仅仅是一个重大的事件，还可能会改变我的人生。",
"美丽的沙滩因何而发生？ 我认为， 那么， 查尔斯·史考伯在不经意间这样说过，一个人几乎可以在任何他怀有无限热忱的事情上成功。",
"莎士比亚说过一句富有哲理的话，人的一生是短的，但如果卑劣地过这一生，就太长了。这似乎解答了我的疑惑。 带着这些问题，我们来审视一下美丽的沙滩。 ",
"一般来说， 既然如此， 这样看来， 我们都知道，只要有意义，那么就必须慎重考虑。 每个人都不得不面对这些问题。 在面对这种问题时， 了解清楚美丽的沙滩到底是一种怎么样的存在，是解决一切问题的关键。",
"我们都知道，只要有意义，那么就必须慎重考虑。"]
static let imgs = ["paperplane.fill","square.and.arrow.down","paperplane.fill","bell","square.and.arrow.down","bell","paperplane.fill","bell","square.and.arrow.down"]
}
这里节约时间，就不做异步拉取的处理了，后续文章我会挤时间，专门搞一篇
UITableView异步请求加观察者模式的文章来给大家分享
3.2 编写列表 item - UITableViewCell
- 要让
cell随自身内容大小而变化高度，只需要注意三点即可 - 首先是，
addSubView必须是添加到contentView上，而非简单的self - 其次是，内部组件必须设置
translatesAutoresizingMaskIntoConstraints属性为true - 最后是，这个
cell不能通过简单的frame设置大小，而是需要通过NSLayoutConstraint来动态给定 - 首先这里我先提供下最终实现的代码再逐个给大家分析：
import Foundation
import UIKit
class MemberCell: UITableViewCell {
lazy var contentLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(label)
label.numberOfLines = 0
return label
}()
lazy var userImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(imageView)
imageView.image = UIImage(systemName: "Camera")
return imageView
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupConstraint()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupConstraint() {
userImageView.accessibilityIdentifier = "userImageView"
contentLabel.accessibilityIdentifier = "profileImageView"
contentView.accessibilityIdentifier = "profileContentView"
NSLayoutConstraint.activate([
contentLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
contentLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 10),
contentLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -10),
userImageView.topAnchor.constraint(equalTo: contentLabel.bottomAnchor, constant: 10),
userImageView.widthAnchor.constraint(equalToConstant: 25),
userImageView.heightAnchor.constraint(equalToConstant: 25),
userImageView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 10),
userImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10),
])
}
}
3.2.1 子控件实现
- 为了提高代码可读性，这里建议大家使用懒加载的形式
- 我们注意到，子控件的
view是需要添加到cell的contentView上的，而非直接添加到 self 上 - 另一点就是之前说的，需要把
view的translatesAutoresizingMaskIntoConstraints属性设置为false - 拿代码 + 注释举个例子：
lazy var contentLabel: UILabel = {
let label = UILabel()
// translatesAutoresizingMaskIntoConstraints 设为 false
label.translatesAutoresizingMaskIntoConstraints = false
// 添加到 contentView
self.contentView.addSubview(label)
label.numberOfLines = 0
return label
}()
3.2.2 计算子控件以及 cell 大小
- 这里我们就不能再采用上古时代设定
frame的方法而是通过NSLayoutConstraint.activate([...])中设定子控件各边与 cell 各边的关系来指定 - 另外一点就是，对于每个子
view以及我们cell的conteentView我们都需要设定它们的accessibilityIdentifier，其内容直接写该view的名字就行，只要不重名就行，没有太多的要求 - 给大家举个栗子 🌰 ：
func setupConstraint() {
//
userImageView.accessibilityIdentifier = "userImageView"
contentLabel.accessibilityIdentifier = "profileImageView"
contentView.accessibilityIdentifier = "profileContentView"
// 设定子布局各边与 cell 的关系
NSLayoutConstraint.activate([
contentLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
contentLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 10),
contentLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -10),
userImageView.topAnchor.constraint(equalTo: contentLabel.bottomAnchor, constant: 10),
userImageView.widthAnchor.constraint(equalToConstant: 25),
userImageView.heightAnchor.constraint(equalToConstant: 25),
userImageView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 10),
userImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10),
])
}
其中子
view的大小，我们同样可以在activate([...])中，通过widthAnchor & heightAnchor强制来设定
3.3 列表界面 - UITableViewController
- 相比于 cell 中的注意点，对于
UItableView本身需要注意的地方并不多 - 相比于普通
UItableView的使用，这里要添加translatesAutoresizingMaskIntoConstraints的设置 - 同时通过
NSLayoutConstraint.activate(...)设置设置tableView之于ViewController大小
import Foundation
import UIKit
class LandscapeListViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
config()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
NSLayoutConstraint.activate(tableView.edgeConstraints(top: 80, left: 0, bottom: 0, right: 0))
}
func config() {
tableView.delegate = self
tableView.dataSource = self
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.estimatedRowHeight = 80
tableView.rowHeight = UITableView.automaticDimension
tableView.register(MemberCell.self, forCellReuseIdentifier: "MemberCell")
}
}
extension LandscapeListViewController {
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return max(ContentProvider.datas.count, ContentProvider.imgs.count)
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "MemberCell", for: indexPath) as! MemberCell
cell.contentLabel.text = ContentProvider.datas[indexPath.row]
cell.userImageView.image = UIImage(systemName: ContentProvider.imgs[indexPath.row])
return cell
}
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
}
}
3.3.1 自动标注尺寸
- 首先我们需要设置
UITableView的高度计算方案为自动标注尺寸，也就是automaticDimension - 其次我们同样需要标注
tableview的translatesAutoresizingMaskIntoConstraints为false
func config() {
tableView.delegate = self
tableView.dataSource = self
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.estimatedRowHeight = 80
tableView.rowHeight = UITableView.automaticDimension
tableView.register(MemberCell.self, forCellReuseIdentifier: "MemberCell")
}
3.3.2 设定大小
- 更
TableViewCell一样，对于viewController中的tableView，我们也需要设定它们的大小关系 - 为了方便起见，我才用了网上的一套设定方案：
extension UIView {
/// 设定 view 与其父 view 各边之间的关系
public func edgeConstraints(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat) -> [NSLayoutConstraint] {
return [
self.leftAnchor.constraint(equalTo: self.superview!.leftAnchor, constant: left),
self.rightAnchor.constraint(equalTo: self.superview!.rightAnchor, constant: -right),
self.topAnchor.constraint(equalTo: self.superview!.topAnchor, constant: top),
self.bottomAnchor.constraint(equalTo: self.superview!.bottomAnchor, constant: -bottom)
]
}
}
- 这样一来，带代码里我们只要通过
view.edgeConstraints(...)就可以快速设定子view与其superview之间的关系：
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// 调用封装的方法：edgeConstraints(）
NSLayoutConstraint.activate(tableView.edgeConstraints(top: 80, left: 0, bottom: 0, right: 0))
}
总结
- 我在
GitHub新建了一个仓库，正在为大家整理、分享我的iOS学习笔记，欢迎大家star支持：https://github.com/Knowledge-Precipitation-Tribe/ios_notes - 如果大家有更好的方案，欢迎在评论区分享代码，我会更新到本文中 👏
- 同时欢迎大家点赞或者关注支持，因为这是我持续输出的最大动力～
