巧用AutoLayout控制横向多个视图组件布局

导读

在上一篇文章解决往可重用Cell中手动添加View时重复显示问题中我提到了类似如下这种复杂的横向多控件布局,我未有好的AutoLayout实现方式,暂时使用了手动编写视图代码的方法。

image

难点

这种横向的布局难点主要有:

1.左边的Label长度不固定

2.右边由ImageView和Label叠加成。且Image长度随Label变化。Label长度也不固定

3.左边和右边长度相加不超过屏幕宽度。如果超过,保持右边不变,左边缩略。

但对于这种布局,我使用耿耿于怀,希望能用AutoLayout完美解决。在大牛JohnLui的帮助下,终于搞定。为了帮助其它遇到类似问题的小伙伴同时也基于分享的精神,我制作了一个小DemoHorizontalMultiViewDemo,方便大家使用,欢迎大家fork。

思路

使用AutoLayout解决这类布局的关键点在于:

1.给右边ImageView增加一个到右侧距离 >=0 的约束!

2.给右边ImageView增加一个宽度约束,然后用代码调整这个约束的值!

3.两个Label不要设置宽度约束