自适应布局(Adaptive Layout)

参考资料:

Adaptive Layout Tutorial in iOS 9: Getting Started

iOS8 Size Classes初探 · sunnyxx的技术博客

Auto Layout 和 Constraints - iOS · 碎碎念 - SegmentFault

通过一个关于天气的项目,你将学到通用故事板(Universal Storyboards),尺寸类别(Size Classes),自定义布局和字体,预览助手编辑器(Preview Assistant Editor)相关的知识。

项目效果图:

自适应布局(Adaptive Layout)_第1张图片
iPhone竖向
自适应布局(Adaptive Layout)_第2张图片
iPhone横向


01 通用故事板(Universal Storyboards)

1.什么是通用故事板?简言之,能为ipad和iPhone所用的故事板。

2.为什么Main.Storyboard里的视图控制器是正方形的?

将屏幕尺寸进行抽象化,以适应不同屏幕尺寸的设备。

02 自定义布局

1.在Storyboard里,分别拖一个Image View和一个View出来,并在View的Identity Inspector里将”TextContainer“填入Label位置。

--进行Size设置。

自适应布局(Adaptive Layout)_第3张图片
Image View的Size Inspector
自适应布局(Adaptive Layout)_第4张图片
Text Container的Size Inspector

--进行Color设置。

自适应布局(Adaptive Layout)_第5张图片
View的背景颜色设置
自适应布局(Adaptive Layout)_第6张图片
TextContainer背景颜色设置

2.布局约束设置。

在storyboard中有三种方式设置约束

--ctrl+drag(可以从一个控件拖动到另一个控件,设置它们之间的关系。也可以拖动到控件自身,设置宽度和高度)(我个人偏好使用这种方式)

--使用Stack,Pin,Align,Resolve工具

好处一:使得精确控制约束的constant或一次性添加多个约束更方便;

好处二:不需设置好view的位置,而只需要定好相对位置,添加约束,然后update frames,Auto Layout会自动计算出正确的位置

--让Interface Builder自动添加约束

前提是确定view的位置不再更改。

回到项目中:

(1)给image view加三个约束。

--运用Align Tool,快速对齐控件。

自适应布局(Adaptive Layout)_第7张图片
Align Tool

--运用Pin Tool,给View定位。快速设置一个View相对于周边View的位置或者它的宽高。


自适应布局(Adaptive Layout)_第8张图片
Pin Tool

--Ctrl+drag设置image view和TextContainer之间的垂直间隔。

最后,三个constraints的添加完成。

自适应布局(Adaptive Layout)_第9张图片
image view的constraints

(2)给TextContainer加约束。

--使用Pin Tool。这里不需要勾选constrain to margins。如果选中,会将父视图的外边距作为边距的值来考虑。margin的默认值是8,也就是说如果勾选,三个框里应该填的是8.

自适应布局(Adaptive Layout)_第10张图片
Pin Tool

(3)图片填充image view:

cloud_images.zip

(4)使用Resolve工具。

自适应布局(Adaptive Layout)_第11张图片
Resolve Auto Layout Issues

03 预览助手编辑器

预览助手编辑器能让你更方便地查看view在不同尺寸设备,不同方向上的呈现情况。

1.选择View-Assistant Editor-Show Assistant Editor-Automatic-Preview-Main.storyboard(Preview)

在左下角,选择+按钮,在弹出的窗口中选择iPhone 5.5inch和iPad。

自适应布局(Adaptive Layout)_第12张图片
Preview Assistant Editor

但是横向时,cloud image显得太大。

2.调整cloud image的大小。选中image view,ctrl+drag到view上,选择Equal Heights。

解决这里constraints的冲突:选中新添加的constraint进行修改,使得image view的高度等于view的高度或者小于等于view高度的40%

自适应布局(Adaptive Layout)_第13张图片
修改Constraint

04 尺寸类别(Size Classes)

Size Classes简介

1.Size Classes是什么?可以用来干什么?

它是对老式UI思路的全新抽象:把各个设备屏幕,以及它们屏幕旋转的状态都抽象成屏幕Size的变化,将这些Size归纳成几个类别(Class)。

Size Class配合Auto Layout可以解决所有iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题

2.有几种Size Classes?有几种Size Classes组合?

共有两种Size Classes:Regular和Compact。下表显示的是Size Class在不同装置的不同方向上的运用情况:

自适应布局(Adaptive Layout)_第14张图片
Size Class在不同装置的不同方向上的运用情况

有9种Size Classes组合。宽(Regular,Compact,Any),高(Regular,Compact,Any), 3 x 3,共9种组合。默认是在宽任意,高任意模式下设置,且其他8种布局继承它。

3.Size Classes怎么用?

首先,搭建基本布局。接下来,再根据不同Size Class的具体需求进行自定义。

IB中某个View的出现与否,约束的出现与否,约束的值都是可以根据Size Classes单独设置的。

比如,一个Image View,我只需要它出现在宽高紧缩(compact)的屏幕上(如Apple Watch)。Installed,表示“出现在屏幕上”。

项目练习

1.往TextContainer里添加内容

--拖两个Label出来,进行字体,颜色,约束的设置。

对于城市这个label,字体设置为System-Thin-150,颜色为白色。对于温度这个Label,字体设置为System-Thin-250,颜色为白色。

自适应布局(Adaptive Layout)_第15张图片
城市Label的约束
自适应布局(Adaptive Layout)_第16张图片
温度Label的约束

但是,此时的字体显然太大了。

自适应布局(Adaptive Layout)_第17张图片
Preview Assistant Editor

2.切换Size Class为Any Width|Compact Height模式

自适应布局(Adaptive Layout)_第18张图片
Any Width|Compact Height

3.更改image view的约束

(1)删除image view默认类型的约束

--打开image view的Size Inspector,把Align Center X to:SuperView这个约束删除。

自适应布局(Adaptive Layout)_第19张图片
删除约束

双击这个约束进去。如图,这表示对于基本布局,约束是存在的,但是对于Any Width|Compact Height模式的布局,约束是不存在的。对剩下三个约束做同样的删除操作。

自适应布局(Adaptive Layout)_第20张图片
约束查看

(2)为Any Width|Compact Height模式的image view添加约束

自适应布局(Adaptive Layout)_第21张图片
添加约束

然后,ctrl drag image view到View 上,选择Equal Widths,Multiplier为0.45

接下来,需要把label移到右边。

4.更改TextContainer的约束。

(1)删除默认模式下的约束。Cmd +delete TextContainer.leader = leading

(2)添加约束。crtl drag TextContainer到View上。选择Vertical Spacing to Top Layout Guide和Equal Widths(Multiplier设为0.5)

自适应布局(Adaptive Layout)_第22张图片
添加约束

最后,update frames

自适应布局(Adaptive Layout)_第23张图片
Interface Builder

05适配字体

注意:与overrride布局不同,override字体会影响到基本布局。

1.切换Size Class为Any Width|Any Height模式

2.打开城市label的attributes inspector,点击+号后,选择Compact Width>Any Height。并修改字体。

点击+号
自适应布局(Adaptive Layout)_第24张图片
修改字体

温度label同样做法,只是Compact Width|Any Height的字体设置为150.

3.对两个label的宽度加以限制。分别ctrl+drag label到TextContainer上,选择Equal Widths。

4.对两个label的Alignment和Autoshrink进行修改。

自适应布局(Adaptive Layout)_第25张图片
对两个label的Alignment和Autoshrink进行修改

最后项目完成!!!

Github项目地址:

GitHub - Paganarchitect/iOS_tutorial_exercises_RayWenderlich: iOS exercises based on Ray Wenderlich tutorial

你可能感兴趣的:(自适应布局(Adaptive Layout))