巧用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不要设置宽度约束