自适应布局(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)相关的知识。

项目效果图:

iPhone竖向
iPhone横向


01 通用故事板(Universal Storyboards)

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

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

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

02 自定义布局

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

--进行Size设置。

Image View的Size Inspector
Text Container的Size Inspector

--进行Color设置。

View的背景颜色设置
TextContainer背景颜色设置

2.布局约束设置。

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

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

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

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

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

--让Interface Builder自动添加约束

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

回到项目中:

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

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

Align Tool

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


Pin Tool

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

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

image view的constraints

(2)给TextContainer加约束。

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

Pin Tool

(3)图片填充image view:

cloud_images.zip

(4)使用Resolve工具。

Resolve Auto Layout Issues

03 预览助手编辑器

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

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

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

Preview Assistant Editor

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

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

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

修改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在不同装置的不同方向上的运用情况:

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,颜色为白色。

城市Label的约束
温度Label的约束

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

Preview Assistant Editor

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

Any Width|Compact Height

3.更改image view的约束

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

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

删除约束

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

约束查看

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

添加约束

然后,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)

添加约束

最后,update frames

Interface Builder

05适配字体

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

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

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

点击+号
修改字体

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

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

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

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

最后项目完成!!!

Github项目地址:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容