autolayout

作者: ClarkWang_001 | 来源:发表于2015-06-23 21:10 被阅读881次

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

相关文章

  • 9.4 AutoLayout使用

    AutoLayout使用 AutoLayout使用.png

  • iOS - AutoLayout -2 AutoLayout

    # iOS - AutoLayout -2 AutoLayout 上篇文章我们了解了AutoLayout 的布局方...

  • ScrollView 与 Autolayout

    ScrollView 与 Autolayout ScrollView 与 Autolayout

  • # iOS - AutoLayout -1

    iOS - AutoLayout -1 1、AutoLayout 自动布局(AutoLayout)是iOS6引入的...

  • iOS布局

    布局方式 AutoLayout,AutoresizingMask AutoLayout NSLayoutConst...

  • AutoLayout

    AutoLayout autolayout的概念 Autolayout是一种“自动布局”技术,专门用来布局UI界面...

  • 9.6AutoLayout约束基础

    AutoLayout约束基础 AutoLayout约束基础1.png AutoLayout约束基础2.png Au...

  • UI基础4

    自动布局 autoresizing:autolayout:size classes + autolayout:si...

  • AutoLayout

    AutoLayout深入浅出一[前传] AutoLayout深入浅出二[基本使用] AutoLayout深入浅出三...

  • autoLayout 和 autoresizing

    autolayout 和 autoresizing 不能够共存,使用autoLayout必须关闭aoturesizing

网友评论

    本文标题:autolayout

    本文链接:https://www.haomeiwen.com/subject/jnhjqttx.html