iOS学习之Autolayout
2014-10-11 11:19
274 查看
转载自:http://vit0.com/blog/2013/12/07/iosxue-xi-zhi-autolayout/
学习资料
文章
Beginning Auto Layout Tutorial in iOS 7: Part 1Beginning Auto Layout Tutorial in iOS 7: Part 2
Auto Layout Guide(官方)
前两篇文章对如何在xcode 5中使用autolayout讲得已经很详细了。我使用了一段时间autolayout的感觉是,一般情况下都可以通过xcode的ib上直接设置autolayout的各种属性完成项目需求,除非遇到需求比较复杂的布局。
官方的Auto Layout Guide讲得详细易懂,推荐
WWDC视频
2012
202 – Introduction to Auto Layout for iOS and OS X228 – Best Practices for Mastering Auto Layout
232 – Auto Layout by Example
以及obj.io对这三个视频的总结
2013
Taking Control of Auto Layout in Xcode 5
一些学习到的知识点整理
用代码创建一个 NSLayoutConstraint
下面的方法遵循一个计算公式:view1.attribute1 = multiplier × view2.attribute2 + constant
1 2 3 4 5 6 7 | + (id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attribute1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attribute2 multiplier:(CGFloat)multiplier constant:(CGFloat)constant; |
Button.centerX = Superview.centerX
1 2 3 4 5 6 7 | [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0] |
1 2 3 4 5 6 7 | [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0f constant:-padding] |
- (void)addConstraint:(NSLayoutConstraint *)constraint添加。但是应该添加到哪个 view 里呢?
兄弟 view 的 Constraint 添加到他们的 superview
两个 view 的父 view 是兄弟关系的,Constraint 添加到父 view 的 superview 上
如果两个 view 是 parent-child 关系,Constraint 添加到 parent view上
跨层级 view 之间的 Constraint
有如下的视图层级:- View - UIScrollView - UISwitch - UIButton
其中UISwitch相对 UIScrollView 水平居中,和 ScrollView 同一层级有一个 UIButton,现在要始终保持 UIButton 的水平中点位置和 UISwitch 的水平中点位置在同一条线上。
为 UISwitch 的水平居中 Constraint 建立一个 IBOutlet。
1 2 3 4 5 6 78 | - (void)viewDidLoad { [super viewDidLoad]; // Remove the IB-generated constraint centering the switch in its super view [self.scrollView removeConstraint:self.horizontalSwitchConstraint] // Add a new constraint centering the switch on the button NSLayoutConstraint *cn = [NSLayoutConstraint constraintWithItem:self.switchButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.button attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0]; [self.view addConstraint:cn]; } |
设置Autolayout有两个原则
Ambiguous Layout(The constraints must be suficient)Unsatisfiable Constraints(The constraints must not conflict)
在 IB 中设置明确的宽度
设置宽度有几个原则:如果一个 View 的宽高在显示的时候是不确定的:让 view 根据内容改变大小(size to fit size)
如果一个 View 有确定的大小:改变其宽度的 Constraint Relation 为 >=
正确的设置Content Hugging Priority(内容压缩优先级) 与 Content
Compression Resistance Priority(内容抗压缩优先级)
Relation(Greater/Less) 与 Priority
Greater/Less 一般与 Priority 一起使用,为一个 Constraint 设置了 Greater/Less 后,调整 Priority。如果 Constraint 的 Priority 的值越大,程序优先设置它的 Constraint 效果。如果两个 View 不在同一个层级,此时想要设置他们之间的 Constraint,只能通过代码实现。简单的方式是:先在 Xcode 中设置了 Constraint,然后为这个 Constraint 建立一个 IBOutlet,回到代码中,移除想要替换的 Constraint。
Content Hugging Priority 与 Content Compression Resistance Priority
含义:Content Hugging Priority(内容压缩优先级)
Content Compression Resistance Priority(内容抗压缩优先级)。
如果 Constraint 发生冲突时,会先找优先级高的UIView,满足优先级高的UIView 的Constraint 后再依次找优先级低的 Constraint 满足,最后改变 View 的 Frame。如果发生多个 Constraint不能同时满足的情况,就发生了Unsatisfiable
Constraints的错误。
Visual Format Language
VFL(Visual Format Language),提供了一种让代码以一种可视化的方式来设置不同 views 之间的 Constraint。1 2 3 4 5 | [NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-[acceptButton]"] options:0 metrics:nil views:viewsDictionary]; UIButton *cancelButton = ... UIButton *acceptButton = ... viewsDictionary = NSDictionaryOfVariableBindings(cancelButton, acceptButton); |
Property | Examples |
---|---|
Inequality,Priority | [wideView(>=60@700)] |
Vertical:Flush Views,Equal Heights | V:[redBox][yellowBox(==redBox)] |
Combination | H:|–[Find]–[FindNext]–[FindField(>=20)]–| |
Constraint 在什么时候更新
UIView中
-setNeesdDisplay -setNeedsLayout -setNeedsUpdateConstraints
UIView/UIWindow中
-layoutIfNeeded
关于 intrinsicContentSize
在 UIView 中有个方法-intrinsicContentSize,用于指定一个
view 的 width 和 height,设置了
-intrinsicContentSize相当于设置一个不可变的长度或者宽度。有点像
UISlider 只能设置宽度,不能设置高度那样。
Debug
在 Xcode 中,设置 Autolayout 时可能出现3种状态,分别会出现黄色、红色、蓝色的线或线框。出现黄色的线或者线框表示:View 根据设置的 Constraints 最后计算出的 frame 位置和在xib 中 view 目前显示的位置不一致。此时并没有错误,只要更新一下
Update frames 以下就好
出现红色的线或者线框表示:出现了Ambiguous
Layout(Constraints 太少以至不能确定一个 view 的位置)或者Unsatisfiable Constraints(Constraints
有冲突,确定 view 一个方向上的 Constraints 超过1个)。这种情况要找到没有正确设置 Constraints 的 View 添加缺失的 Constraints 或者删除多余的 Constraints。
蓝色线条或者线框表示这个 view 的 Constraints 正确设置,并且 view 目前显示的位置和 Constraints 计算得出的最终位置是在同一个地方。
在代码添加 Constraints 的 Debug 方法。
在控制台输出AutolayoutTrace:
po [[UIWindow keyWindow] _autolayoutTrace]。如果此时有Ambiguous Layout或Unsatisfiable
Constraints,可以在输出的代码中看到。
有用的 debugging defaults
双倍的国际化字符串:
NSDoubleLocalizedStrings YES
显示视图的对齐框:
UIViewShowAlignmentRects YES
AutoresizingMask自动转化成 Constraint
view有一个 translatesAutoresizingMaskIntoConstraints 属性,如果设置为 NO,那么在运行时,程序不会自动将AutoresizingMask转化成 Constraint。
Animation
关键是在 UIView Animation 中调用[view layoutIfNeeded]
1 2 3 4 56 | [UIview animateWithDuration:1.0 animations:^{ // Constraint Changed... [view layoutIfNeeded]; }]; |
Github上一些好用的Autolayout第三方库
MasonryUIView AutoLayout
Comments
相关文章推荐
- iOS学习之Autolayout
- iOS 8 AutoLayout 及SizeClass(三) 使用详解 好多值得学习及研究的地方
- iOS自动布局学习(UIView+AutoLayout)
- 学习 iOS Autolayout的一点经验
- iOS学习笔记-如何获取xib的autolayout后的frame
- iOS AutoLayout学习总结
- iOS AutoLayout学习总结
- IOS学习之 记录autolayout后的frame的处理
- iOS学习——AutoLayout中利用 NSLayoutConstraint设置相对布局
- 【转】iOS学习之Autolayout(代码添加约束) -- 不错不错
- ios学习之autolayout自动布局的简单理解 即UIKIt dymanic的使用
- iOS学习之AutoLayout常用方法
- IOS Auto Layout学习,struts and springs
- iOS学习之Autolayout
- ios basic:1.3 storyboard(学习autolayout的使用和multiple scenes之间的segue)
- 【原】iOS学习之苹果原生代码实现Autolayout和VFL语言
- Simple solution to Auto Layout on iOS Versions prior to 6.0 ERROR in Mac OSX 10.7 and later
- Auto Layout on iOS Version prior to 6.0
- IOS Autolayout(VFL) 处理子视图居中
- Tutorial: iOS 6 Auto Layout versus Springs and Struts - Part 1 of 3