自适应TableViewCell(XIB)
前言:前一文自适应TableViewCell(纯代码)介绍了如何使用纯代码方式实现
tableViewCell自适应高度,那么本文就来介绍一下如何使用XIB+Autolayout的方式实现tableViewCell的自适应高度.先看一下效果图,和上篇文章介绍的效果图是一样的.
图1.gif
- 1 . 创建
model类,添加数据源,并且保存在数组中.这个数据源我是写在了,plist文件当中,并且使用cocoaPods导入MJExtension进行数据转模型.
- 2 . 创建自定义的
AdaptiveTableViewCell继承自UITableViewCell创建的时候勾选XIB, 接下来在XIB中添加子控件,并且给子控件添加约束.设置nameLabel的左边距和上边距是10,text_label距离nameLabel的上边距是10,距离contentView的左右边距都是10. 设置prctureImageView距text_Label的上边距是10,距contentView的左边距和下边距是10,并且设置宽高都是100;
图2.png
需要注意: 要设置text_Label的lines是0,否则不会自动换行.
图3.png
- 3 . 接下来要在
viewController中注册自定义单元格,这个时候有2个地方需要注意,一是需要设置tableView的rowHeight为UITableViewAutomaticDimension, 这行代码的租用是设置tableView所有的cell是根据真实高度自动计算的(根据设置的约束), 另外就是需要设置tableView的预算高度.这两者缺一不可.这两行代码放在一起是就是使用了self-sizing技术,这个技术也是在iOS8以后才支持的.目前已经iOS10.1了,大可不必担心.
需要注意:tableView的估算高度,可以给一个随意的值,只要是大于0的就可以.建议给这个值给的稍微大一点,这里面牵扯到tableView性能优化的一些东西.
- 4 .配置单元格,给单元格上的控件赋值.
- 5 . 到这一步我们就要思考一下,我们刚开始设置单元格上的控件的时候,图片给的是一个固定的高度100,但是有些数据中没有图片,那我们就可以把图片的高度设置成0,把图片距离下边框的间距也设置成0.否则,没有图片的那些单元格中,就会出现一片空白的区域.我们需要把图片的高度约束和下边距约束拉成属性,在
model的setter方法中进行修改.
图4.png
需要注意:在没有图片时候需要把图片的约束更改为0,在有图片的时候也一定要把约束更改回来,否则因为tableViewCell的循环引用,界面滑动的时候,会造成显示混乱.
总结:到这里我们就把自适应
TableViewCell的功能实现了.对比来说,使用AutoLayout方式要比使用纯代码的方式更加简单一些.不需要再去计算控件的高度这些繁琐的步骤,只有几个注意事项需要多注意.避免不必要的错误.
- 1.要设置
text_Label的line是0,否则不会自动换行. - 2.要设置
tableView所有的cell的真实高度是自动计算的(根据设置的约束)self.tableView.rowHeight = UITableViewAutomaticDimension;
// 设置tableView的估算高度self.tableView.estimatedRowHeight = 200; - 3.在没有图片时候需要把图片的约束更改为0,在有图片的时候也一定要把约束更改回来,否则因为
tableViewCell的循环引用,界面滑动的时候,会造成显示混乱.
另附本文gitHub地址
