天天看点

初识Auto Layout和Size Classes

之前一直没有接触过Auto Layout,本人自从工作以后一直纯代码完成项目,很少用到StoryBoard和XIB了.自从Apple发布了iPhone 6和iPhone 6 plus,要完美适配屏幕,就必须接触Auto Layout了,StoryBoard看来也是要学习一下怎么使用了。最近不是特别忙,就看了一下苹果官方的Auto Layout的介绍文档。至于Auto Layout的详细教程,个人觉得这篇文章开始iOS 7中自动布局教程(一)介绍的蛮详细的了,很适合没有接触过Auto Layout的人学习一下。下面是我自己看了苹果的官方文档后的一点笔记,后面在实际项目中使用Auto Layout后有深入的体会了再另开博文记录。

一、Auto Layout

Auto Layout是一个让你可以通过创建一个界面元素之间数学上的关系描述来进行app界面布局的系统。你可以定义单独元素或者元素之间的这种约束关系描述。利用自动布局,你可以创建针对不同屏幕尺寸、不同屏幕方向和不同地区的动态多变的用户界面。

约束是自动布局的最基本的构建模块。约束表达了元素在你的视图中的布局规则。比如,你可以创建一个约束来规定一个元素的宽度或者它在水平方向上与另一个元素的距离。你可以添加或者移除约束,或者修改约束的属性来影响界面的布局效果。当计算界面元素的运行时的位置时,自动布局系统会考虑全部约束并且以最好的方式满足所有的约束。

1.约束的基础知识

你可以认为约束是人类可描述语言的一种数学描述。如果你顶一个按钮的位置,比如你会说“让按钮的左边距离它父视图左边的距离为20像素。”更正式一点,它将被翻译为“button.left = container.left + 20”,反过来,就是表达式 y =m*x = b(其中,y和x是视图的属性,m和b是浮点数。)

约束有这些属性left, right, top, bottom, leading, trailing, width, height, centerX,centerY, and baseline.

选中一个约束,可以看到类似这样的属性:(注意左边的加号。默认约束是加载Size Class为Width Any,Height Any模式下的,点击加号可以添加其他Size Class模式下的约束。Size Class后面介绍。)

初识Auto Layout和Size Classes
初识Auto Layout和Size Classes

其中leading和trailing在从左到右的语言(比如英文)中相当于left和right.在从右到左的语言中相当于right和left。在创建约束的时候,leading和trailing有它们的默认值,你在使用它们的时候应该要保证你的界面可以在不同语言环境下布局良好。

Constant :物理尺寸或者偏移量。

Relation : 视图元素之间的关系,可取:lessthan or equal、equal、greater than or equal。比如view’s width >= 20, or even that textview.leading >=(superview.leading + 20)。

Priority : 约束的级别,默认1000,级别高的约束会比级别低的约束先被满足。默认级别是required,意思是约束必须被准确的满足。

Multiplier : 乘数,默认1.0,也就是Constant的倍数。

Placeholder : 默认是不勾选的。是针对那些运行时才知道自己尺寸的元素,需要设置placeholder约束,如果约束属于Placeholder,记得勾选上这一项,实际运行的时候约束会被移除。当一个元素包含了placeholder约束,选择该视图元素,可以在这里

初识Auto Layout和Size Classes

将Intrinsic Size由Default改为Placeholder,再设置视图在布局设计的时候的大小。下面的解释很清楚,视图在运行时并不拥有这个尺寸,只是为了方便布局设计。

初识Auto Layout和Size Classes

Installed : 默认是勾选的,对约束来说,即约束是否在当前Size Class尺寸下有效。对子视图来说,即子视图在当前Size Class尺寸下是否可见。

使用约束,可以利用Interface Builder或者利用VFL代码写。之前在想以后要不要坚持纯代码完成项目,现在感觉还是利用Interface Builder比较方便快捷,利用VFL的话太复杂不说,还要写大量的布局代码,不好理解,更不好维护。

在Interface Builder中添加约束,有三种方式:一是选中视图元素,按住Ctr在某个方向上拖动或者拖动到另一个视图;二是选中某个视图或者某两个视图选择Editor->选择Pin下面可用的约束类型;三是里面StoryBoard右下角的四个快捷按钮。Xcode提供了很强大的约束编辑功能,如果存在不明确或者冲突的约束,会看到有红色或者黄色圆点,点击会弹出提示哪里的约束有问题。还有其他方便的功能,这个需要在具体使用中去体会。

2.使用约束需要注意几点:

1.约束是累加的,并不会一个约束覆盖另外一个约束。如果你已经有了一个约束,你又加了一个跟这个约束一样类型的约束,并不会覆盖之前的约束。比如,再加一个限制宽度的约束并不会删除或者修改之前的限制宽度的约束。

2.如果一个视图体系中,包含了一个视图,并且会在实现方法(比如UIView的layoutSubviews或者NSView的layout方法)中会手动修改子视图的位置和大小。那么你就不能让一个约束横穿这种视图体系。如果一个比如UIScrollView,bounds会转变的视图,你也不可设置一个约束横穿这种视图。你可以认为那种视图是一种障碍物,障碍物里面的世界和外面的世界是不通的。(不知道翻译的对不对,这个要在以后的使用过程中感悟才会理解的更深,后期再做修改。)

3.约束一旦加上去,不能再修改它的类型,比如一个限制宽度的约束,不能修改为限制高度的约束。

4.约束必须加在被约束的元素的共同的最近的父视图上面。

二、Size Classes

我们知道了利用Auto Layout可以进行界面元素的布局。假如不同尺寸的屏幕界面差异很大,怎么区分呢,之前我们可以创建不同的XIB来跟不同尺寸的屏幕对应起来。现在的StoryBoard中加入了Size Class,对于宽度和高度而言,都有三种情况:紧凑 (Compact) 、任意 (Any) 、 正常 (Regular) ,所以一共有9个类别,在设置 Size Class 的时候页面会有提示。比如宽为 Compact 高为 Any 的情况,提示为 3.5-inch、4-inch、4.7-inch的横竖状态下的屏幕。所以说现在的StoryBoard是可以控制所有屏幕尺寸的StoryBoard了,非常强大。Size Class 的作用是将不同尺寸的屏幕进行分类处理,而最后进行布局管理的还是Auto Layout。当然,Size Class是依赖于Auto Layout的,这两者一般在项目中都是同时勾选上的。

看了苹果官网https://developer.apple.com/library/prerelease/ios/releasenotes/General/WhatsNewIniOS/Articles/iOS8.html#//apple_ref/doc/uid/TP40014205-SW30 对Regular的解释:A regular size class denotes either a large amount of screen space, such as on an iPad, or a commonly adopted paradigm that provides the illusion of a large amount of screen space, such as scrolling on an iPhone. Every device is defined by a size class, both vertically and horizontally.大概意思就是说Regular尺寸是指要么像iPad那样有较大的屏幕空间,要么像iPhone上面的ScrollView提供了较大的屏幕空间。

感觉这种解释还是不太清楚,自己也不太清楚苹果到底是怎么区分这三者的,只能在Xcode中布局的时候在最下面选择不同的Size Class,会有提示是适合什么尺寸屏幕的。等以后有一定理解之后再做介绍吧。

利用Size Class我们可以对不同屏幕的界面进行设计。然后利用Auto Layout来对不同尺寸下的界面进行自动布局。

具体怎么使用,这里就不再赘述了,可以参考这里一篇介绍Size Class的详细教程:[iOS] 初探 iOS8 中的 Size Class 这位博主堪称大神啊,看了他的博客目录,瞬间感觉自己弱爆了,惭愧万分,自己要努力向大神们学习。另外这一篇文章写得也非常详细:为iPhone 6设计自适应布局

三、总结

Size Class用来区分不同的屏幕尺寸,Auto Layout用来对不同尺寸进行界面布局。确实比代码适配方便很多,不过初学起来,还是有很多细节要注意的。以后打算不再纯代码写了,既然苹果极力推荐大家使用SB、AL和Size Class,自己也该学习学习怎么掌握它们了。只有在实际项目中使用它,才可以发现自己掌握的有哪些不足,以及有哪些使用技巧,后期再单独开篇介绍。

下面是一个朋友整理的Auto Layout和Size Class学习资源:

sizeClass和autolayout学习资源整理

今天又发现一篇不错的博文:iOS 8 AutoLayout与Size Class自悟