同上篇一样,图示3个ImageView,他们的宽度和高度都是固定的(比如100),那么如何用约束使他们等距离摆放呢?
首先对每个imageView都做等高等宽约束,值都为约定好的100。
我们来理清一下已知条件,N个(现在是3个)imageView,每个imageView的宽度和高度都是100,将它们进行等距离缩放。
我们先来进行简单一些的,假设imageView之间的间距和imageView对屏幕边缘的间距是相等的。现在假设间距为x,整个屏幕宽度为X,可以计算 x = (X-300)/4,那么第一个imageView的中心点横坐标为 x+50, 也就是 X/4 - 25,也就是说,第一个imageView处于整个屏幕宽度的1/4往左偏移25pm处。
(注意这里要确保imageView的宽度不会太大,否则在窄屏幕上回重叠在一起)
然后修改水平方向相等的约束,在我看来这个约束的意义是水平方向上中心点的x值相等,我们把它的multiplier修改为1:2,也即imageView.center.x = view.center.x/2,也就是位于整个屏幕的1/4处,constant修改为-25,即往左偏移25pm,和我们上面的计算结果一致。
同理第二个imageView的中心点横坐标为 2x+150,也就是X/2,即位于整个屏幕正中央,做相同的约束,并且multiplier修改为1, constant为0
同理第三个imageView的中心点横坐标为 3x+250,也就是3X/4 + 25,multiplier修改为3:2, constant为25
这样就完成了
效果图如下:
基本方法就是这样的了,对于稍微复杂一些的,比如和屏幕之间间距是固定的等距离摆放,则需要自己动笔去计算一下其中约束的值应该怎么设置,然后按照计算好的值填上去,就ok了。