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

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容