autolayout

autolayout: 相对布局的思维

1.两种语法:

1)VFL(visual format language)

NSString *vfl = @"V:|-5-[_view]-10-  
  [_imageView(20)]-10-[_backBtn]-5-|";

2)手动添加约束:

[self.view addConstraint: [NSLayoutConstraint               constraintWithItem:blueView
            attribute:NSLayoutAttributeLeft
            relatedBy:NSLayoutRelationEqual
            toItem:redView
            attribute:NSLayoutAttributeLeft
            multiplier:1
            constant:0]];```

2.优先级(Priority):解决约束的冲突

3.视图显示前会有两个步骤,顺序是updating constraints -> laying out views -> 显示。

Updating constraints:从子视图到父视图,布局会在实际设置frame时使用,调用setNeedsUpdateConstraints触发操作。自定义视图的话可以重写updateConstraints增加本地约束。
Laying out views:布局视图是从父视图到子视图,通过setNeedsLayout触发。调用layoutIfNeeded可以强制系统立刻更新视图布局。

4.autosizing 区别:

autosizing masks告诉子视图调整大小,但又没告诉子视图该调整多少!!不能精确控制!
autosizing的虚线表示是硬编码;实线表示是autosizing;

5.autolayout

T-bars仍然是橘黄色的。这意味这你的布局没有完成,是有问题的;蓝色意味着正确;

从Editor菜单中,选择Pin中选项中去添加各种约束;

与手动写代码计算的原理基本相似,都是动态计算但最终还是用frame来确定位置,

而autolayout就是不用考虑设备问题,我的理解是就是指定计算规则,让计算机帮你去计算;改为人为更容易理解的方式,告诉计算机你要怎么做,然后说你去执行吧。自动布局比autosize可以更精准的控制坐标;

autolayout可以处理多语言的问题;

这这是Xcode5相对Xcode4来说最大的一个提升:再也不强制你总是有一个有效的布局。如果你根本不提供任何约束,Xcode自动分配一套默认的约束.Xcode中的规则是:Xcode只为那些你没有设置任何约束的对象创建自动约束。一旦你增加一个约束,你便是告诉Xcode你接管了这个视图。Xcode将不再增加任何自动约束,并希望你为这个视图增加需要的约束。

拖动一个视图会出现2个框,一个是虚线边框,一个是实线边框。虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。如果你打算更新新的约束到新拖动的位置,Editor菜单上有一个Resolve Auto Layout Issues子菜单。从这个菜单中,选中Update Constraints。

添加center约束,从Editor菜单选择Align\Horizontal Center in Container.这会增加一个很长的橙色线段,线之所以是橙色是因为你才仅仅指定了button的X轴,但Y轴并没有指定约束。使用Editor\Pin菜单在button和视图底部间增加一个Vertical Space约束。

Editor-->pin 用法
功能 用途
width 指定固定宽度
heigth 指定固定高度
horizontal spacing 指定两个视图水平空隙
vertical spacing 指定两个视图垂直空隙
leading space to superview 相对父视图的左边间距
trailing space to superview 相对父视图的右边间距
top space to superview 相对父视图的上边间距
bottom space to superview 相对父视图的底边间距
widths Equally 指定两个视图宽度相等
heights Equally 指定两个视图高度相等
Align 是指定各种对齐的方式
功能 用途
left edges 2个视图左对齐
right edges 2个视图右对齐
top edges 2个视图上对齐
bottom edges 2个视图下对齐
Horizontal Centers 2个视图水平中间对齐
Vertical Centers 2个视图垂直中间对齐
baselines 2个视图按字体水平对齐
Horizontal Center in Container 控件在父类中水平居中显示
vertical Center in Container 控件在父类中上下居中显示

xcode 中,建立2个视图之间的约束可以按住ctrl,拖动一个视图到另外一个视图上;
点击红色箭头,可以看到存在的问题;

intrinsic content size 各种controller内容(文字,图片等)自适应宽度;

你也可以通过指定宽度和高度来

添加约束的方式

1.the Editor\Pin and Align menus;
2.Ctrl-dragging between views.
3.interface 下边的3个按钮;

视图效果预览

Open the Assistant editor (press the button in Xcode’s toolbar that looks like a butler/alien) and select Preview in the jump bar,点击左下角+可以查看在不同设备上的效果;

Unable to simultaneously satisfy constraints. 设置的约束如果有冲突,则console报这个错误;
Content Priority Ambiguity error ,当一个视图的size发生变化时,没有指定2个子视图的priority时,autolayout会不知道该怎么调整2个子视图的大小; go into the Size inspector set the vertical Content Compression Resistance Priority to 751. set Content Hugging Priority to 252.

Content Hugging Priority(内容压缩优先级)
Content Compression Resistance Priority(内容抗压缩优先级)
如果 Constraint 发生冲突时,会先找优先级高的UIView,满足优先级高的UIView 的Constraint 后再依次找优先级低的 Constraint 满足,最后改变 View 的 Frame。如果发生多个 Constraint不能同时满足的情况,就发生了Unsatisfiable Constraints的错误。
打印约束错误:po [[UIWindow keyWindow] _autolayoutTrace]
以下2个属性都是针对内容的处理方式
Content Compression Resistance = 不许挤我!当空间不够时怎么处理的优先级!!!
这个属性的优先级(Priority)越高,越不“容易”被压缩。也就是说,当整体的空间装不小所有的View的时候,Content Compression Resistance优先级越高的,现实的内容越完整。

Content Hugging = 抱紧!整体空间足够大时,怎么处理

这个属性的优先级越高,整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。

分析

根据要求,可以将约束分为两个部分:

整体空间足够时,两个label的宽度由内容决定,也就是说,label的“Content Hugging”优先级很高,而且没有固定的Width属性。
整体空间不够时,左边的label更不容易被压缩,也就是“Content Compression Resistance”优先级更高。
aspect ratio 自己ctrl+自己,可以按比例缩放自己

动画:

[containerView layoutIfNeeded]; // Ensures that all pending layout operations have been completed

[UIView animateWithDuration:1.0 animations:^{

// Make all constraint changes here

[containerView layoutIfNeeded]; // Forces the layout of the subtree animation block and then captures all of the frame changes

}];

autolayout:
https://www.zybuluo.com/MicroCai/note/73867#autolayout-基础
http://www.vienta.me/2014/12/07/AutoLayout-%E5%BF%98%E6%8E%89Frame-%E6%8B%A5%E6%8A%B1Constraint%EF%BC%88I%EF%BC%89/
http://www.cocoachina.com/industry/20131012/7148.html

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html

http://nonomori.farbox.com/post/scrollview-yu-autolayout

http://www.tuicool.com/articles/iIBJneA
http://www.cocoachina.com/industry/20131203/7462.html
http://www.cocoachina.com/industry/20131108/7322.html
http://lvwenhan.com/ios/430.html
http://onevcat.com/2012/09/autoayout/
###mansory:
http://www.cocoachina.com/ios/20141219/10702.html
http://www.cocoachina.com/ios/20150527/11936.html
http://www.cocoachina.com/industry/20131012/7148.html

http://ios.jobbole.com/81483/

http://www.mgenware.com/blog/?p=491
http://blog.csdn.net/meegomeego/article/details/39991057
http://www.raywenderlich.com/tutorial-archive

sizeClass

http://www.cocoachina.com/ios/20141217/10669.html
http://www.cocoachina.com/ios/20140915/9623.html

autolayout 添加动画

http://www.cocoachina.com/ios/20141010/9869.html

cocoa autolayout

http://www.cocoachina.com/cms/plus/search.php?keyword=Autolayout&searchtype=titlekeyword&channeltype=0&orderby=&kwtype=0&pagesize=10&typeid=0&TotalResult=20&PageNo=2

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

推荐阅读更多精彩内容