如何用自动布局实现等宽等高等间距

1. 基础篇

-目的:用自动布局(StoryBoard中)实现几个View等分屏幕
-效果图:

Snip20151130_3.png

-实现方法:
a.设置第一个view的约束(既灰色view),约束为上,左,下为0,0,0
b.设置第二个view的约束(既蓝色view),约束为上,左,下为0,0,0
c.设置第三个view的约束(既粉色view),约束为上,左,下为0,0,0
d.设置第四个view的约束(既橘色view),约束为上,左,下,右为0,0,0,0
e.选中四个View,设定四个View为等宽,如图

Snip20151130_4.png

2.进阶篇

• 目的:用自动布局(StoryBoard中)实现几个控件的等间距分割

• 效果图:(简版,约束版)(事例为距上方蓝线的约束)

  
  
  

  Snip20151130_6.png

Snip20151130_5.png

• 实现方法

小TIPS:这里使用自动布局进行等间距分割的时候,要借助辅助的view控件

a. 对微博icon设置约束,约束为,上,左,宽,高为18,50,30,30
b. 设置其他三个icon与微博icon等宽,等高,等水平
c. 设置豆瓣icon距离上,右的约束为18,50
d. 拖三个view到四个icon中间,如图

Snip20151130_7.png

e.对三个view分别设定约束(相对于左侧icon)为水平居中,等高,左右约束为0,0

Snip20151130_8.png

Snip20151130_9.png

f.最后对三个view(选中)设定等宽
g.更新约束看看效果吧

3. iOS9.0更新(StackView)

注:该方法只能适配iOS9.0系统

将StackView拖动到StoryBoard中,设置好相应的约束,这个view就相当如一个容器,将想进行等间距的控件放入StackView中,并设定属性如图

Snip20151130_10.png

效果图:

Snip20151130_11.png