使用StoryBoard建立三个按钮,按钮水平等距离摆放

  随着苹果对Storyboard的大力推广和支持,Storyboard的功能越来越强大,无论是个人开发还是团队协作,Storyboard都表现的很不错,然而有些布局还是纯代码实现起来比较方便,特别是涉及到屏幕适配以及横竖屏旋转。


使用StoryBoard建立三个按钮,按钮水平等距离摆放_第1张图片
需要实现的效果

  最近在开发中遇到需要在一个View中水平摆放三个按钮,按钮之间的距离以及两边按钮到边框的距离相等,之前遇到直接上纯代码创建,取得屏幕宽度后直接计算(假设按钮宽高固定),在旋转屏幕时也要再次刷新。

  Tip:这里注意一下,iOS8以后屏幕旋转时候的[UIScreen mainScreen].bonuns改变了,获取屏幕宽度最好用以下方法

  MIN(SCREEN_HEIGHT, SCREEN_WIDTH);

  详见 StackOverflow-iOS8横竖屏

  那么在storyboard中如何利用约束来实现呢?其实很简单


使用StoryBoard建立三个按钮,按钮水平等距离摆放_第2张图片
基本设计思想

  如上图所示,其实就是利用约束中的宽度相等约束来实现。3个按钮,中间居中,按钮之间和按钮与屏幕之间共4段间距,间距要相等~那就放4个view咯,设置view之间的宽度相等。

  Ok,如何设计知道了,下面一步一步来,首先拖三个Button,设置button的宽高约束,我这里是70,70。然后设置中间button与父视图水平和垂直居中,保证它在最中间。

   然后另外两个button与中间button水平居中,之后拖4个view依次填充在缝隙中,设置4个view都和父视图上对齐,左右两个view也和父视图对齐,4个view约束基本差不多


使用StoryBoard建立三个按钮,按钮水平等距离摆放_第3张图片
4个view约束

   注意,不要设置4个view的宽度约束,而是设置4个view等宽,这样他们的宽度就会随着屏幕改变而改变。

   设置完成以后运行一下


使用StoryBoard建立三个按钮,按钮水平等距离摆放_第4张图片
竖屏

    旋转一下屏幕

使用StoryBoard建立三个按钮,按钮水平等距离摆放_第5张图片
横屏下

    可以看到4个view宽度改变了,之后隐藏4个view,大功告成。

    当按钮少的时候可以这样玩,而不用手动去改变约束,当按钮很多时候还是用代码比较合适。

    以上。

你可能感兴趣的:(使用StoryBoard建立三个按钮,按钮水平等距离摆放)