在文章《iPhone屏幕分辨率和适配规则(基础篇)》和《iPhone屏幕分辨率和适配规则(规则篇)》中,讲了iPhone分辨率的基础概念和适配规则。最后来讲讲这些规则在iPhone上是怎么实现的。
本文旨在让非技术人员对iPhone屏幕适配技术有一个宏观的了解,不对具体的实现细节进行探讨。具体的实现细节,请查看相关的开发文档。
适配技术概述
iPhone 3GS之前,iPhone屏幕只有一个规格。所以没有太多的适配问题。早期的页面只需要限定好位置就可以了。
随着iPhone逐步多屏幕尺寸化之后,每新增一种屏幕都进行重新开发,这无疑会给适配工作带来大量的重复性工作。所以,在具体实现时,苹果公司推出了一系列的适配技术。旨在当屏幕尺寸发生改变时,程序能够自动适应屏幕,而不会造成重复性的适配工作。
其中,autoResizing和autoLayout是两种不同的屏幕适配技术。
autoResizing
autoResizing是iPhone早期的一种适配技术,目前已经越来越少被使用了。
autoResizing可以做什么
autoResizing是用于设置子控件相对于父控件的位置关系的。
如图可以看出,autoResizing可以设置如下关系:
- 相对于父控件固定顶距离。
- 相对于父控件固定底距离。
- 相对于父控件固定左距离。
- 相对于父控件固定右距离。
- 跟随父控件横向拉伸。
- 跟随父控件纵向拉伸。
autoResizing应用举例
在这个例子中,设置了Button 1
:
- 相对于父控件左距离固定不变。
- 相对于父控件顶距离固定不变。
设置了Button 2
:
- 相对于父控件顶距离固定不变。
- 相对于父控件右距离固定不变。
- 横向跟随父控件拉伸。
可以看出,当屏幕变化时。Button 1
相对左距离和顶距离固定不变,而Button 2
随着屏幕横向拉大而拉大。
autoResizing的局限
autoResizing没有提供控件之间的关系,Button 1
和Button 2
之间的距离并不能设定。所以,在屏幕改变时,很难控制两个按钮之间的空隙。
所以,现在越来越少人使用autoResizing进行适配。
autoLayout
autoLayout是目前最流行且被广泛使用的屏幕布局技术。
autoLayout可以做什么
autoLayout提供了比autoResizing跟丰富的约束规则。可以说,autoLayout是autoResizing升级版。
autoLayout可以设置:
控件自身
- 宽度。
- 高度。
- 和屏幕等比例宽高。
控件与控件之间的关系
- 左对齐/右对齐/顶对齐/底对齐。
- 水平中心对齐。
- 垂直中心对齐。
- 文本底线对齐。
- 等宽。
- 等高。
控件和父控件的关系
- 对齐水平。
- 对齐垂直。
- 左边距/右边距/顶边距/底边距。
autoLayout应用举例
设置Button 1
:
- 相对于父控件左距离固定。
- 相对于父控件右距离固定。
- 对齐水平中心,固定距离。
- 和
Button 2
等高。 - 和
Button 2
等宽。
设置Button 2
:
- 宽度。
- 高度。
- 对齐水平中心,固定距离。
- 和
Button 1
等高。 - 和
Button 1
等宽。
Button 1和Button 2设置了等高、等宽,所以两者会一直保持一样大小。同时,设置对齐距离父控件中心的距离,能保证其居中对齐的效果。
SizeClass
SizeClass是基于AutoLayout的一种技术。必须跟AutoLayout一起,不能单独使用。
SizeClass可以做什么
SizeClass并不是一种屏幕布局的技术。SizeClass可以让开发人员针对不同的屏幕设置不同的布局。
这是因为iPhone 的横屏和竖屏相差很大。考虑到iOS还支持iPad,iPhone和iPad的页面差异也很大。没必要硬要适配两种页面。
完全可以针对iPhone和iPad的页面特点单独设计页面。
SizeClass的分类。
SizeClass对iOS设备进行了分类。通过将宽度和高度分成三种类型:compact(紧凑)、any(任意)、regular(正常)。从而分成9种不同的屏幕分类。
设备的对应关系如下:
宽 | 高 | 设备 | 样式 |
---|---|---|---|
compact(紧凑) | compact(紧凑) | iPhone 4 | |
compact(紧凑) | regular (正常) | iPhone竖屏 | |
regular(正常) | compact(紧凑) | iPhone横屏 | |
regular(正常) | regular(正常) | iPad |
而Any则表示同时适配compact和regular。
假设我们要为iPhone和iPad分别设置布局,则需要将Phone的SizeClass设置成 w(compact)/h(regular),将iPad的SizeClass设置成w(regular)/h(regular),并分别对两种屏幕进行单独的设计。
《iPhone屏幕分辨率和适配规则(基础篇)》
《iPhone屏幕分辨率和适配规则(规则篇)》
《iPhone屏幕分辨率和适配规则(实现篇)》