Auto Layout 使用心得(二)—— 实现三等分

2015-3-6   /   阅读数:46546   /   分类: iOS & Swift

此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考我的 Auto Layout 设置哦,下载到本地打开就可以了。


准备

上一篇文章中,我们共同进行了 Auto Layout 的初体验,在本篇我们将一起尝试用 Auto Layout 实现三等分。

Auto Layout 的本质原理

Auto Layout 的本质是用一些约束条件对元素进行约束,从而让他们显示在我们想让他们显示的地方。

约束主要分为以下几种(欢迎补充):

  1. 相对于父 view 的约束。如:距离上边距 10,左边距 10。
  2. 相对于前一个元素的约束。如:距离上一个元素 20,距离左边的元素 5 等。
  3. 对齐类约束。如:跟父 view 左对齐,跟上一个元素居中对齐等。
  4. 相等约束。如:跟父 view 等宽。

三等分设计思路

许多人刚开始接触 Auto Layout,可能会以为它只能实现上面的1、2功能,其实后面3、4两个功能才是强大、特别的地方。接下来我们将尝试设计横向三等分:

  1. 第一个元素距离左边一定距离。
  2. 最后一个元素距离右边一定距离。
  3. 三者高度恒定,宽度相等。(此处我们设置为高度恒定(height 属性),如果你需要的是固定长宽比,则需要设定 Aspect Ratio 属性)
  4. 1和2、2和3的横向间距固定。

干货,实现过程的动图:

动图

运行结果

4 寸:

Image

4.7 寸:

Image

纵向三等分实现方式类似,大家可以自己尝试一下哦~

下一步:Auto Layout 使用心得(三)—— 自定义 cell 并使用 Auto Layout

WRITTEN BY

avatar

评论:

有点懵逼
2017-04-07 09:33
作为一个刚入门IOS的新手,看到动图拖来拖去并不知道是啥意思,这篇文章带给我的感触就跟我的名字一样
haha11
2016-07-22 11:39
你这个view之间的间距写死了,一般需求是应该view的宽固定,间距变化,再不嵌套其他view的情况下,怎么能够让view之间的间距相等。
JohnLui
2016-07-22 13:46
@haha11:从此条评论开始向下滚动 600px,即可看到解决方案。
haha11
2016-07-22 14:05
@JohnLui:我想问的是在不增加其他view的情况下怎么实现,如果为了实现这种等分效果而需要在额外的增加其他view,那如果在某些复杂的视图里,嵌套的view过多不就会出现性能问题.这样的话是不是只有手码写约束才能实现在不添加新的辅助view的情况下实现“三等份”。
JohnLui
2016-07-22 14:53
@haha11:不要什么都扯到性能,就是嵌套十层都不会有任何可感知的所谓性能问题。
haha11
2016-07-22 16:16
@JohnLui:我只是想问是不是能在不创建辅助视图的情况下实现三等份效果。用storyborad能让间距相等的效果
really
2016-05-29 20:57

大神您好,阅读了您的文章受益匪浅,请教您一个问题,如何设置4个view的宽度和高度固定,间距随屏幕的大小而变化,autolayout设置约束,还请您百忙之中赐教.谢谢!
JohnLui
2016-06-01 10:37
@really:在外面套四个view等分屏幕,然后把这四个view分别居中。
Leo
2017-03-15 12:46
@JohnLui:看起来这不是一个很好的解决方案,在 view 外面套一个 container 再让 container 等分父 view 的确可以让 view 等距,但是忽略了最左最右/最上最下的 view 距父 view 的距离,这个距离是 view 之间距离的 1/2,并不相等哟。如何解决这个问题我也还在想,大家可以一块想想。
william
2016-01-12 11:08
如果其中有一个有时候要隐藏,其他两个如何实体自动2等分呢?
joey
2015-10-14 17:20
大神 请问下 如何实现4个等高等宽的view 在宽高不变的情况下 实现他们4个间的距离相等
JohnLui
2015-10-14 17:27
@joey:可以放四个间距为零的四等分元素,然后把你想要的四个元素加入进去分别居中显示。
joey
2015-10-14 17:35
@JohnLui:这样的话只会是元素之间两两相邻的间距一样 但是首尾元素对边缘的距离和其他的间距不等
JohnLui
2015-10-14 17:44
@joey:那可以在他们的父级四等分的左右两侧再分别加入两个 1/2 宽度的空元素。

其实 UI 设计图一般都是元素距离边缘的距离是元素之间距离的一半,你这个需求在现实中几乎是不存在的,会比较难看。
joey
2015-10-14 17:49
@JohnLui:实际设计中是用的比较少  谢谢大神指点
joey
2015-10-15 14:29
@JohnLui:找到一个比较简单的方法 就是把元素间的间隙都分别设成空元素(5个),5个空元素等宽,4个本来的元素是固定宽高,每个元素间的spacing是0  
kenshin
2015-09-16 13:32
命题稍微调整下就没法纯XIB实现了

4. 1和2、2和3的横向间距固定。
=》
4. 1和2、2和3的横向间距相等
5. 3个view宽度相等且固定,比如width=100

楼主有兴趣试试么~
JohnLui
2015-09-16 13:44
@kenshin:外面套一层,对父级居中。
tiny-星空
2015-04-23 22:01
貌似还是有点问题    比如不同尺寸的设备图片被拉伸了      如何做到不改变图片(按钮)比例   在任意水平或垂直位置实现在两个图片(按钮)中间再加一个图片(按钮)  并使新加的在原先的两个正中间   (不同尺寸设备都能正常显示)
JohnLui
2015-04-23 22:17
@tiny-星空:保持比例直接把固定高度设置成固定宽高比就行了。
龙呈祥
2015-04-08 11:15
大神``按照这个方法``我添加了20个view 等分```然后添加一个按钮跳转页面``点击按钮``按钮半天弹不起来``半天才转到新页面```如果不添加20个等分的view则没问题 ```不知道是否自动布局有什么限制 ?
JohnLui
2015-04-08 11:35
@龙呈祥:可能 20 等分的计算量太大了吧。。。
张松柏
2015-03-26 15:13
大神,膜拜,学习了,顺便说下,我的名字就叫松柏
JohnLui
2015-04-08 11:34
@张松柏:

发表评论:

© 2011-2018 岁寒  |  Powered by Emlog