iOS Autolayout使用学习

一.为什么要使用autolayout

  1. 更容易适配各种设备,一套代码适用多种设备(碎片化不再只是安卓的痛)。
  2. autolayout +storyboard 在不写一行代码的情况下,就可以对相对简单的页面完成布局,这样ViewController里或者View里的关于布局的代码将会少很多,我们的代码更加关注业务逻辑本身。
    3 .Xcode本身的可视化编程更加强大,降低了新人开发门槛。
  3. 更强大的表达能力。以往的spring + structs 布局只能描述父子关系视图的布局,但是autolayout不仅可以表达兄弟视图之间的布局,也可以表达同一个rootView视图层次下的不同视图之间的布局,比如视图与祖父视图的布局关系等。
    ps:当然也有一些不该使用autolayout的原因,比如性能问题,比如对于频繁修改的页面(在storyboard里修改几十个约束够酸爽的)等,具体取决于实际使用场景。

二.几个概念

1.约束

约束直白的就是说描述视图的位置、大小的关系信息。比如a视图的宽度是b视图的宽度的1/2,a视图的x坐标离b视图右边10pt等。这些约束信息会最终通过布局引擎转化为视图实际的frame,所以本质上通过约束与通过代码setFrame来设置视图的坐标、大小没有区别(本质没区别意味实际还是有些区别的)。

2.计算公式
<code>view1.attribute1 = mutiplier * view2.attribute2 + constant</code>

通过约束里面的例子,大概就可以猜出这个公式了。 表示view1的某个属性(如高度)是view2的某个属性的(如宽度)的mutiplier倍 再加上constant。而且一旦添加完约束,能修改的只有constant这个属性。如果想改view2的attribute2就只能删除了,再new一个constraint,如果能通过constant完成的就尽量通过修改constant完成,减少不必要的对象生成和销毁。关于有哪些属性,可以看下iOS文档如下:

属性描述

看名字就很容易知道了各个属性是神马意思了。

3.优先级

每个约束都有优先级UILayoutPriority,是一个float型值。优先级越高(最高1000),表示需要优先满足该条约束。因为可能我们给一个视图添加a,b两个约束,a与b是冲突的,但是又不想删除其中一个,那么可以通过设置优先级来解决这个问题。

4.约束添加的位置

通过在storyboard里拉约束,我们似乎可以不用管约束添加在哪里。但是如果我们手写约束的话,就需要决定将添加在哪里,下面是几个规则:
a).如果view1和view2是平级的兄弟关系,那么约束添加到view1和view2的共同父view上
b).如果view1,view2是父子关系,那么添加的父view上
c).如果view1,view2没有直接的父view,那么添加在离他们最近的父view上
d).对于那种不依照其他view的约束(比如view1的宽度为20pt,也是就是view2 = nil)的情况,约束可以直接添加在view1的约束数组里,实际测试中添加到view1的父view里也能正常工作(反正不知道怎么加的时候,如果是多个就加在最近的共同父view上,如果只有自己,就加在自己的父view上);

5.sizeclasses

苹果为了让布局与具体设备无关,提出了抽象设备的概念,也就是把设备的高抽象为compact, any, regular三种, 设备的宽也抽象为compact, any, regular三种,这样就总共有9种设备了
对应关系可以看如下图(网图):

设备对应关系

通过在storyboard里选择不同sizeclasses:

storyboard里的sizeclasses选项

再选择是否使用该视图:

是否勾选

这样就可以完成在不同设备上显示不同视图了。

三.autolayout注意点

重要的事情放前面说:autolayout和手写布局一样都是通过setFrame来改变视图的位置和大小,但是需要掌握好时机才会得到想要的结果。

1.布局过程

先说下VC的生命周期的部分过程

viewDidLoad -> viewWillAppear -> updateViewConstraints -> viewWillLayoutSubviews -> viewDidLayoutSubviews -> viewDidAppear -> viewWillDisAppear -> updateViewConstraints -> viewDidDisAppear</pre>

和布局相关的有
updateConstraints -> layoutSubViews -> drawRect
对应的解释:
当view修改约束(addConstraint, removeConstraint)会触发setNeedsUpdateConstraints,
而这个在layoutSubViews之前会触发updateConstraints,完成之后会调用layoutSubViews。
UIViewController在有个updateViewConstraints 方法,这个方法实际是self.view 被设置了setNeedsUpdateConstraints(第一次展示的时候),必然会调用这个方法(与上面的解释保持一致了,第一次可以理解为为self.view增加了各种约束)。而这个方法的默认实现是调用子view的updateConstraints方法,这样就自上而下的完成了布局。

重点注意
以上两个方法都需要调用super方法,怀疑是UIView 或者UIViewController里的这些方法实现里会告知布局引擎去计算各个控件的Frame
在view的layoutSubViews或者ViewController的viewDidLayoutSubviews方法里后可以拿到view的实际frame,所以当我们真的需要frame的时候需要在这个时间点以后才能拿到

所以在自动布局中,如果获取的frame的时机不对,可能就不会是我们想要的。
回过来想一下为什么就能清楚viewDidLoad里通过setFrame的方式改过原先在storyboard里拖动的约束代码无效了,因为updateViewConstraints在viewDidLoad后执行,会覆盖掉之前的设置的frame,所以无效。如果我们在viewDidLayoutSubviews或者layoutSubViews之后去设置视图的frame则是有效的,不过不建议这样做,具体原因等下面说到动画的时候我们再解释。

2.触发ViewController自动布局的情况

这里只说iOS里最常见的两种
a)屏幕旋转
b)ViewController由不可见到可见
触发自动布局都会调用ViewController的updateViewConstraints方法,因为要得到各个视图的控件frame,必须通过约束才能拿到。

3.动画

之前用frame的时候做动画的时候

[UIView animateWithDuration::0.25  animations:^{
.view.frame = newFrame;
}];

现在推荐用修改约束来修改

_animationView2WidthConstraints.constant = 100;
[UIView animateWithDuration::0.25 animations:^{:^{
     [_animationView2.superview layoutIfNeeded];
}];

之所以推荐用约束修改,是因为一旦屏幕发生旋转或者视图通过导航栏变得重新可见时,都会通过当前的约束来计算各个视图的frame以用于布局。如果使用setFrame方式给自动布局的视图作动画,那么当发生上面操作时,该视图会回到最初的模样,这可能不是我们想要的。
autolayout的基本使用就差不多了,还有更多的姿势或者技巧需要在实际实践中慢慢发现和理解,欢迎大家有问题多多交流。
PS:上面的很多姿势是在Xcode7.1和iOS9.1里解锁的,可能比较老的版本有不同的行为哦_

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

推荐阅读更多精彩内容