1.布局(Layout)
1.1 什么是布局?
是指在一个视图中,如何摆放它的子视图(设置子视图的位置和大小—frame)
1.2 为什么要布局?
屏幕的尺寸经常会发生变化,使得屏幕可显示区域也发生变化,于是最开始添加子视图的frame在新的区域下就不再适用了,需要进行调整,也就是需要重新布局
1.3 可能导致屏幕大小发生变化的原因
a。设备不同(3.5寸下的横竖屏 4寸下的横竖屏 4.7寸下的横竖屏 5.5寸下的横竖屏 )
b。屏幕方向不同
c。状态栏
隐藏
特殊的状态栏:
来电时 绿色的状态栏
录音时 红色的状态栏
开启个人热点时 蓝色状态栏
d。各种bar
NavigationBar : 竖屏时 64个点高 横屏时 52个点高
ToolBar: 44/32 个点
TabBar: 49个点
e。键盘
1.4如何布局?
方法一:纯代码布局(古老的方法)
理念:当屏幕发生变化时,自动执行一段代码,在代码中根据新的屏幕大小重新计算各个视图的frame,从而达到了重新定位的目的
特点:功能强大,非常繁琐
方法二:Auto Resizing以前的一种自动布局技巧
理念: 根据屏幕的等比变化,同样等比的调整视图距离上左下右边缘的距离,或等比调整视图的大小
特点:简单 易用 但是有很大的缺陷
方法三:Auto Layout 最新的自动布局方法
理念:将视图所在的位置使用多个约束条件描述出来,当屏幕大小发生变化时,系统会自动根据设定的多个约束,由系统计算出 不违背所有条件的一个合适的frame
注意:方法一和方法二可以混合使用,但必须关闭AutoLayout功能;
一旦开启了Auto layout功能,则不能再使用方法一或方法二
2.纯代码布局
2.1 理念:在屏幕大小发生变化时,自己手动重新计算各个视图的frame
2.2如何实现?
重写控制器中的方法: viewDidLayoutSubViews:即可
此方法的执行时机:
1》当控制器管理的那个视图要被显示前就会自动执行该方法
2》当屏幕大小发生变化时,如屏幕旋转,则此方法也会自动执行
注意:使用纯代码计算frame时,一定要关闭Auto Layout
2.3 布局对状态栏和各种Bar的处理
使用属性:
topLayoutGuide.length 屏幕上方当前被占据的高度
bottomLayoutGuide.length 屏幕下方当前被占据的高度
2.4视图自身的布局方法
UIView对自身内部的子视图也可以进行布局,典型:UITableViewCell对内部的子视图可以进行布局
如何实现?
step1:自定义视图 继承自UIView
step2:重写layoutSubViews方法即可
布局方法的执行顺序:
step1: 控制器的 viewWillLayoutSubViews
step2:各个子视图的 layoutSubViews方法
step3:控制器的viewDidLayoutSubViews方法
3.Auto Resizing 布局
3.1 是什么?
iOS5之前的自动布局技术,操作简单,API简单,功能也简单,有一定的局限性,很久以前叫 struts/spring(架构/弹簧)技术
3.2 核心理念
当界面大小发生变化时,对子视图进行同比例的变化
3.3 如何实现
step1:关闭Auto layout
step2:选中需要布局的子视图
step3:打开第5个检查器
step4:点亮需要的红线
外框(4个)红线负责限定子视图到父视图的边缘距离是否可变
内框(2个)红线负责子视图内部的大小是否可变
3.4编写代码实现Auto Resizing
设置视图的 autoresizingMask属性即可,代码设置时,规则的描述与在检查器中点亮红线的描述要相反,如,在检查器中点亮左、上为固定距离时,那么用代码描述就要说 视图的 右、下为长度可变
4.Auto Layout (自动布局)
4.1是什么?
从iOS6开始的一个新的布局技术,功能强大,操作复杂,从xcode5开始,慢慢好用,在xcode6中,又配合Size Classes技术完成屏幕适配工作
4.2 工作原理
1)通过一系列的“约束constraint”来描述视图的展示位置
2)什么是约束?代表一个条件,只需要设定一些约束,则系统就会根据这一堆约束,自动计算出符合约束的frame
3)如何创建约束?
方式一:在故事板中可视化配置
方式二:用代码创建
4)约束的两个原则
1)描述清楚(如果不清楚,约束变成橙色)
2)互不冲突(如果冲突,会显示红色)
如果满足以上两个原则,则线条变成蓝色
1.使用代码创建Auto Layout约束
1.1什么时候用?
子视图使用代码创建时,或者需要使用代码修改已有约束时
1.2 怎么实现
step1:创建约束对象NSLayoutConstraint
step2:将约束对象加入到视图的父视图中
1.3 创建一个约束对象
方法一:万能公式法
任何一个视图的约束都可以由下面的等式描述出来,就是要把文字性的描述变成等式中的参数
view1.attr1 <relation> view2.attr2 × multiplier + constant
文字性描述:按钮1距离视图的左边为20个点
公式描述:button1.left = self.view.left *1 + 20
文字性描述:按钮1的宽度是按钮2的宽度的一半儿
公式描述:button1.width=button2.width*0.5+0
文字性描述:按钮1的右边缘与按钮2的左边缘距离10个点
公式描述:button1.right = button2.left * 1 - 10
button2.left = button1.right *1 + 10
约束中的等号左边,代表描述的主体,一般也叫firstitem
约束中的等号右边,代表参照的视图,一般也叫seconditem
multiplier和constant都是为了使等式成立的系数以及偏移量
方法二: VFL法 (Visual Format Language)
是什么?一个字符串,具有一定的格式,不同的格式代表不同的约束,并且,一个字符串往往能一次性表达出多个约束
好处:使用VFL描述完约束,并转化为一组约束,会比万能公式法,节省大量的代码,并实现多个约束的添加
如何写VFL字符串?
1》 button1和button2之间的间距为30
VFL:[button1]-30-[button2]
2》button1的宽度为50
VFL:[button1(==50)]或[button1(50)]
3》button1水平方向离父视图的左右边距为50
VFL:|-50-[button1]-50-|
4》button1与竖直方向上的button2 间距为10
VFL :V:[button1]-10-[button2]
5》button1与视图的顶端距离为20
VFL :V:|-20-[button1]
VFL特殊符号的含义:
| 代表父视图的边缘
H:| 代表父视图的左边
V:| 代表父视图的上边缘
[ ] 代表一个子视图(控件)
( ) 代表宽度的条件
- 代表标准间距 为 8
-x- 代表间距是x
文字:button1,2,3 等宽,间距为10,button1左边距与view为20,button3的右边距与view为20
VFL: |-20-[button1]-10-[button2(button1)]-10-[button3(button1)]-20-|
2.Size Classes
2.1 是什么?
为了适配越来越多的不同尺寸的屏幕。
2.2 核心理念
将8块屏,进行分类,然后,设计界面时,针对这一个类别,进行设计,然后,等到程序运行时,系统会根据当前实际的设备,判断出当前屏幕属于哪一个类别,然后,就加载针对这一个类别设计的那个界面即可