【热点盘点】iOS 8增强的自动布局功能

2020-06-11 10:43:21 浏览数 (1)

自动布局是iOS6开始引进的新功能,而iOS 8则在原有自动布局的基础上增加了SizeClass的概念,从而增强了自动布局功能。

自动布局的总体思路归纳起来就是四个字:相对布局。

iOS App的界面都是由一个个UI控件所组成的,这些UI控件之间要么是父子关系,要么是兄弟关系,整个App界面UI控件关系总是如下图所示。

图中②、③、④号控件之间是兄弟关系,它们都是①号控件的子节点;而⑤、⑥、⑦号控件之间也是兄弟关系,它们都是④号控件的子节点。

自动布局则充分利用了UI控件之间的父子关系、兄弟关系,自动布局可控制子节点控件的左边界、右边界、上边界、下边界与父容器的左边界、右边界、上边界、下边界对齐或保持指定距离,与此同时,还可设置子节点控件的宽度占父容器宽度多大比例,子节点控件的高度占父容器高度多大比例;对于兄弟关系的UI控件而言,自动布局可控制兄弟UI控件的左边界、右边界、上边界、下边界对齐,也可控制兄弟UI控件之间的高度比例、宽度比例,还可控制它们之间的间距……通过这种相对关系的管理,iOSApp就可以在运行时自动计算各UI控件的大小和位置。

为UI控件添加自动布局的约束可通过如下三种方式。

第一种:通过Xcode中Editor菜单的Align、Resolve Auto Layout Issues或Pin子菜单添加。使用Interface Builder打开Storyboard界面设计文件时才会看到这些菜单项。

第二种:通过Interface Builder右下角的按钮来添加约束。使用Interface Builder打开界面设计文件之后,在右下角可以看到有几个按钮。

单击第一个按钮即可弹出图中的浮动框,该浮动框与Align子菜单包含的菜单项完全一样,只是通过该按钮可以同时添加多个约束。

一般来说,开发者在添加约束时先不要更新任何UI控件的大小和位置,避免系统更新UI控件的大小和位置时把它们压缩到完全看不见—等到所有约束都添加完成之后,再通过ResolveAuto Layout Issues子菜单的Update Frames来更新UI控件的大小和位置即可。

点击InterfaceBuilder右下角的第二个按钮,打开的浮动框与Pin子菜单包含的菜单项完全一样,只是可以同时添加多个约束。

浮动框上面有4个虚线表示间距的符号,开发者只要点击该虚线符号,该虚线就会变成实线,然后填写相应的数值即可添加约束。

InterfaceBuilder右下角的第三个按钮对应的浮动框与Resolve Auto Layout Issues子菜单包含的菜单项完全一样。

第三种:在InterfaceBuilder中通过快捷方式添加。这种方式通常用于添加两个UI控件之间的相对布局关系。

在按住键盘上control键的同时,在Interface Builder中从一个UI控件拖向另一个具有兄弟关系的UI控件即可看到蓝线。

松开鼠标即可看到弹出菜单。

由于在界面上拖出的蓝线为斜线,因此弹出菜单既可设置两个UI控件在水平方向上的相对布局关系,也可设置在垂直方向上的相对布局关系。如果在界面上拖出的蓝线为垂直竖线,那么Xcode将弹出如下图所示的菜单。

可以看出,如果在两个具有兄弟关系的UI控件之间拖出蓝色的竖线,那么Xcode弹出的菜单将只能设置这两个UI控件在垂直方向上的约束关系。

如果拖出的蓝线为水平横线,那么Xcode将弹出如下所示菜单。

可以看出,如果在两个具有兄弟关系的UI控件之间拖出蓝色的水平横线,那么Xcode弹出的菜单将只能设置这两个UI控件在水平方向上的约束关系。

在按住键盘上control键的同时,在Interface Builder中从一个UI控件向另一个作为父容器的UI控件拖出一条蓝色的斜线,松开鼠标即可看到如下图所示的弹出菜单。

在按住键盘上control键的同时,在Interface Builder中从一个作为父容器的UI控件向它内部的子UI控件拖出一条蓝色的斜线,松开鼠标即可看到如下图所示的弹出菜单。

提示:如果在两个具有父子关系的UI控件之间拖出垂直的蓝线,那么Xcode弹出的菜单将只能设置两个UI控件在垂直方向上的布局约束;如果在两个具有父子关系的UI控件之间拖出水平的蓝线,那么Xcode弹出的菜单将只能设置两个UI控件在水平方向上的布局约束。

对于初学者而言,使用自动布局常犯的两类错误是约束不足(约束太少)和约束冲突(约束太多),如果界面设计者给出的约束只能确定某个UI控件的大小(或大小的某一项)或位置(或位置中的某一项),此时就会出现约束不足的情况,InterfaceBuilder将会在Dock栏的右上角以黄色警告提醒用户;如果界面设计者给出了两个甚至多个互相矛盾的大小、位置约束,就产生了布局错误,在编译时就会提示错误。

如果为自动布局添加的约束出现约束不足,则可通过Editor菜单的Resolve Auto Layout Issues子菜单的Add Missing Constrainter菜单项进行修复;但如果为自动布局添加的约束出现约束冲突时,则需要开发者仔细检查,并修复它们。

对于初始使用自动布局的开发者来说,难点就是理顺界面上各UI控件之间的相对关系:各UI控件的相对大小、相对位置,一旦理顺了这些关系,接下来按上面介绍的方式添加约束即可。

本文摘自《疯狂iOS讲义(上)(第2版)——Objective-C2.0与iPhoneiPad应用开发基础》

0 人点赞