使用AutoLayout实现动态高度的Cell

首先看一下我们最后要实现的效果

使用AutoLayout实现动态高度的Cell_第1张图片

可以看到我们需要实现的cell需要1个UIImageView和4个Label,其中箭头标注的两个Label可以随着文本的内容,动态的向下拉伸,同时我们cell的高度也会拉伸,cell与最下面的label之间的距离永远是5个像素。 接下来让我们一步步动手去实现。

首先我们拖5个控件在我们的Cell里,大致的放在最后显示的位置。

使用AutoLayout实现动态高度的Cell_第2张图片

接下来,第一步设置image的约束,我们让他距离父控件(cell.contentView)左边,上面指定的距离,以及确定的高度和宽度。

使用AutoLayout实现动态高度的Cell_第3张图片

接下来设置name的约束,我们让他距离左边距离image10个像素,并且比image的top高5个像素。 (高是负的,低是正的)

使用AutoLayout实现动态高度的Cell_第4张图片

接下来设置title的约束,我们让他左边距离name11个像素,并比name的top低3个像素。

使用AutoLayout实现动态高度的Cell_第5张图片

接下来我们设置articleTitle的约束,articleTitle与name左边平行,并在距离name底部5像素,距离屏幕右边10像素(这个之前的label并没有添加,但是articleTitle一定要添加,因为当articleTitle的文本内容比较多时,不会选择超出屏幕外边,而是选择向下扩张)

使用AutoLayout实现动态高度的Cell_第6张图片

接下来articleDetail设置与articleTitle所需要设置的类似,但是由于articleDetail是最下面的那个控件,他需要设置与cell底部之间的距离(只有设置了这个距离之后,当articleDetail长度变高时,他才会去挤压cell,使cell跟随着变大)

使用AutoLayout实现动态高度的Cell_第7张图片

但是这个时候Xcode会给我们抛出一个错误:

使用AutoLayout实现动态高度的Cell_第8张图片

让我们先来说一下Content Hugging Priority 和 Content Compression ResIstance Priority

使用AutoLayout实现动态高度的Cell_第9张图片

Content Hugging Priority 其实就是阻止view变大的力量,Content Compression ResIstance Priority是阻止view变小的力量。

由于我们把articleDetail和articleTitle都设置了距离cell右边固定距离,所以他两都有可以是自身变大的力量,且优先级是1000,也就是说一旦文本内容比较多,就会向下拉伸。可是articleDetail和articleTitle都具有变大的力量,而且优先级是一样的,都是251,当出现都要变大时,xcode不知道该优先拉伸哪一个为好,所以也就抛出了错误。我们只要把articleDetail的Vertical的优先级调小一点就可以了(251->250)。

最后添加上

self.tableView.estimatedRowHeight = self.tableView.rowHeight;

self.tableView.rowHeight = UITableViewAutomaticDimension;

添加这两句话是让tableview在加载的时候,预先估计tableviewcell的高度,用于预先展示,当cell的高度确定时,重新刷新一下cell。

做好了这些就可以开始运行我们的代码,并进行测试了。

使用AutoLayout实现动态高度的Cell_第10张图片
使用AutoLayout实现动态高度的Cell_第11张图片

我们可以看到在不同的文本情况下,我们的cell都很好的包裹了里面的内容,而且并不用实现heightForRow这个代理方法。

demo地址:https://github.com/ChenYingPing/AutoLayoutCell

你可能感兴趣的:(使用AutoLayout实现动态高度的Cell)