ZhouJiatao's Blog

UIView自适应高度

情景

为了布局结构的清晰,我们常把一些控件放入同一个UIView中。
比如以下布局,一个UIView(蓝色部分)作为容器,容纳一个UIImageView和两个UILabel。

normalLayout

这样在对其设置隐藏时也是相当方便,我们不需要分别设置3个子控件的hidden属性,而只需设置容器的hidden属性。
但是,contentLabel的行数一旦增多,可能超出容器范围。

leakageLayout
(Tips:将UILabel的lines属性设置为0,就不会被限制行数)

我们怎样才能让UIView随contentLabel的内容而改变高度呢?

解决方法

以上布局是为了让你理解,通常来说将几个控件归纳进一个容器,是多么有必要。现在,为了更方便的进行下一步演示,我们将布局简化为一个UIView包容一个UILabel。

demoLayout

为了让UIView适应内容的高度,需要进行以下步骤:

1.UIView’s height constraint priority

将UIView的height constraint 的Priority设置得比UILabel的”Content Hugging Priority”和”Content Compression Resistance Priority”都低。(这里设置了249)
UIViewConstraints

2. UILabel: Bottom space to container

需要约束UILabel的底部和容器的距离
UILabelConstraints

3. update frames

updateFrame

OK!你可以在storyboard中立即看到效果,UIView高度增高,UILabel内容也得以完全显示。在程序运行时,修改UILabel的内容,UIview的高度也会随之变化。