Autolayout 案例

虽然Apple已经推出Autolayout很多年了,但是起初它对开发者并不友好,再者以前就3.5”与4”两种尺寸,也没必要使用Autolayout。随着4.7”与5.5”屏幕的推出,Autolayout慢慢凸显出了它的优势,也使得开发者开始向Autolayout倾斜。

部分开发者不熟悉Autolayout,所以不敢用,这又进一步导致了不熟悉,恶性循环。本文将通过几个简单的小案例,讲解Autolayout,然后大家可以在之后的开发中,尽量去使用它。

案例下载地址:

https://github.com/saitjr/AutolayoutSimpleDemo.git

环境信息:

Mac OS X 10.10.3

Xcode 6.3

iOS 8.3

正文

本文案例所使用到的sizeClasses是any width与any height。(表示适配任何屏幕)

sizeClasses
sizeClasses

具体sizeClasses的用法,与w/h表示的含义,今后有机会可能讲到。

然后还需要知道三个按钮:

三个布局相关按钮
三个布局相关按钮

align:添加对齐方式约束;

pin:添加坐标与大小约束;

resolve auto layout issues:解决auto layout的问题(清除约束、更新约束后的布局、添加缺少的约束等等)。

案例一:

要求:

无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。

最终效果

实现:

  1. 拖一个UIView到StoryBoard中,修改高宽为100,设置红色背景

这时运行可以发现,红色view并不是在所有设备上都是居中显示的,所以需要添加居中与size约束。

  1. 添加相关约束

添加size约束

添加位置约束

现在可以在多个设配上运行这个案例,包括屏幕旋转等操作。可以看到无论哪种屏幕,红色的view都是居中显示的。

案例二:

要求:

  1. 无论在什么尺寸的设备上(包括横竖屏切换),黑色view的左、上边距、大小都不变;

  2. 灰色view的右边距不变

  3. 宽、高、上边距黑色view相等

最终效果

实现:

  1. 拖一个UIViewController,并将它设为入口(将入口箭头拖给这个UIViewController即可)

  2. 拖两个View,给一个大致的位置,并设置大小为100*100,颜色为黑色与灰色

  1. 给黑色view添加大小与位置约束

  1. 给灰色view添加右边距约束

  1. 给灰色view添加大小与上边距

因为这几个约束与黑色view的约束相同,所以,我们可以相对与黑色view的约束来添加

案例三:

要求:

  1. 有两个view,黑色与灰色;

  2. 黑色view的左、上、右边距均为20,下边距灰色view 20,宽度自适应,高度与灰色view平分整个界面;

  3. 灰色view宽度为黑色view的一半(即左边以中线起始),右、下边距与黑色view相同,高度与黑色view相同。

最终效果

实现:

  1. 拖两个view,设置背景色、大概的位置

  1. 给黑色view添加左、上、右、下边距约束

  1. 给灰色view添加右、下边距约束

  1. 给灰色view添加相对于黑色view来说,等高等宽的约束(黑色与灰色view并不等宽,下一步会做修改)

  1. 修改灰色view的等宽约束

更多案例:

Autolayout键盘弹出?

TIPS:

  1. 控件必须要有能确定位置与大小的约束,如果缺少,会报错;添加约束的过程中,也要注意约束冲突,即多次限制了控件的属性。

  2. 在案例三中可以看到,如果没有自己想要的约束条件,可以设置一个接近的,然后设置偏移量。比如一个控件的左侧距离中线10个像素这种情况。

  3. 在pin中设置边距约束时,注意是相对于哪一个控件添加的约束。一般是距离最近的控件,具体是谁,可以在这里看到:

修改相对约束控件
修改相对约束控件

发表评论

电子邮件地址不会被公开。