实现一个平铺列表我们的首选基本是tableView，每个单元cell的高随着内容变化而变化。
今天我们要说的不是在model里计算好高度，不是说他有多难，有些业务更适合自动计算，比如一个单元cell里全是label，有10几个从上到下排列形成，每一个label的内容有长有短，当然这样的列表更适合html，不过我们要使用原生。
平时基本都是纯代码写工程项目，storyboard/xib用的比较少，下面是tableView初始化代码
lazy var tableView: UITableView = {
let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: k_screen_width, height: k_view_height), style: .grouped)
tableView.delegate = self
tableView.dataSource = self
tableView.separatorStyle = .none
tableView.estimatedRowHeight = 435
tableView.rowHeight = UITableView.automaticDimension;
if #available(iOS 11.0, *) {
tableView.contentInsetAdjustmentBehavior = .never
}
tableView.register(UINib.init(nibName: "BillDetailCell", bundle: nil), forCellReuseIdentifier: "BillDetailCell")
return tableView
}()
最重要的就是下面这两句。
tableView.estimatedRowHeight = 435
tableView.rowHeight = UITableView.automaticDimension;
这时候我们就可以删除返回cell具体高度的代码。
// func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
// return 435
// }
tableview的代理方法实现很简单
func numberOfSections(in tableView: UITableView) -> Int {
return 10
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 10
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return UIView(frame: CGRect.zero)
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "BillDetailCell", for: indexPath)
if let c = cell as? BillDetailCell {
c.load(indexPath.section)
}
return cell
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 0
}
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
return UIView(frame: CGRect.zero)
}
刚才讲到很少用到xib，最开始之始我是创建BillDetailCell的时候是没有带xib文件的，走不了少弯路，各种尝试都不行。
注意，这里创建BillDetailCell一定要一起创建xib文件。
cell的xib设置
为了常用纯代码写顺手的，我们就不过多设置cell上的内容，只配置一个content，我在对应的cell文件中写10几个lable。下面来部分代码。
class BillDetailCell: UITableViewCell {
var cost:UILabel!
// 定义 5个 label ...
var address:UILabel!
// 定义 3个 label ...
var invoiceType:UILabel!
@IBOutlet var content: UIView!
func setup() {
self.backgroundColor = UIColor.clear
content.layer.cornerRadius = 4
content.backgroundColor = k_FFFFFF
content.layer.masksToBounds = true
cost = UILabel()
cost.font = k_font_13
cost.textColor = k_3090FF
cost.text = "费用总额：1740.00"
content.addSubview(cost)
cost.snp.makeConstraints {
$0.top.equalTo(15)
$0.left.equalToSuperview().offset(15)
$0.right.equalToSuperview().offset(-15)
$0.height.greaterThanOrEqualTo(15)
}
// 实现 5个 label ...
address = UILabel()
address.font = k_font_13
address.textColor = k_666666
address.lineBreakMode = .byCharWrapping
address.numberOfLines = 2
content.addSubview(address)
address.snp.makeConstraints {
$0.top.equalTo(cost.snp.bottom).offset(15)
$0.left.equalToSuperview().offset(15)
$0.right.equalToSuperview().offset(-15)
$0.height.greaterThanOrEqualTo(15)
}
// 实现 3个 label ...
invoiceType = UILabel()
invoiceType.font = k_font_13
invoiceType.textColor = k_666666
invoiceType.text = "发票类型：专用发票"
content.addSubview(invoiceType)
invoiceType.snp.makeConstraints {
$0.top.equalTo(address.snp.bottom).offset(15)
$0.left.equalToSuperview().offset(15)
$0.right.equalToSuperview().offset(-15)
$0.height.greaterThanOrEqualTo(15)
}
content.snp.makeConstraints {
$0.top.equalToSuperview()
$0.left.equalToSuperview().offset(10)
$0.right.equalToSuperview().offset(-10)
$0.bottom.equalTo(invoiceType.snp.bottom).offset(10)
}
}
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
setup()
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
func load(_ index:Int) {
if index%2 == 1 {
vmAddress.text = "位置：内蒙古自治区 呼伦贝尔市 莫力达瓦达斡尔族自治旗 杜拉尔鄂温克民族乡 尼西空海拉松村××号"
} else {
vmAddress.text = "位置：北京古城地铁站A出口"
}
}
}
cell里代码最重要的就是最后content的约束。
最终效果图
总结：
1、tableView给个预估cell高度x，设置cell高度自动。
2、再就是使用xib画cell，cell的contentView的约束要被实际的内容撑出来。
上面我就是在xib里放一个自定义的content，然后操作content约束，这个可根据需要是否添加，可以直接操作contentView的约束。
其实每个cell上的内容都很多，不便展示，仅取三个label，当前有地址是动态变化，其他的label内容动态同理。
网友评论