多屏尺的自动适配 AutoLayout (手动添加约束)
来源:互联网 发布:淘宝店铺身份认证复核 编辑:程序博客网 时间:2024/06/15 21:20
AutoLayout是什么?
使用一句Apple的官方定义的话关键词:- 基于约束 - 和以往定义frame的位置和尺寸不同,AutoLayout的位置确定是以所谓相对位置的约束来定义的,比如x坐标为superView的中心,y坐标为屏幕底部上方10像素等
- 描述性 - 约束的定义和各个view的关系使用接近自然语言或者可视化语言(稍后会提到)的方法来进行描述
- 布局系统 - 即字面意思,用来负责界面的各个元素的位置。
AutoLayout和Autoresizing Mask的区别
(在关闭AutoLayout是才会出现)
- AutoLayout可以指定任意两个view的相对位置,而不需要像Autoresizing Mask那样需要两个view在直系的view hierarchy中。
- AutoLayout不必须指定相等关系的约束,它可以指定非相等约束(大于或者小于等);而Autoresizing Mask所能做的布局只能是相等条件的。
- AutoLayout可以指定约束的优先级,计算frame时将优先按照满足优先级高的条件进行计算。
Autoresizing Mask是AutoLayout的子集,任何可以用Autoresizing Mask完成的工作都可以用AutoLayout完成。AutoLayout还具备一些Autoresizing Mask不具备的优良特性,以帮助我们更方便地构建界面。
AutoLayout基本使用方法
Interface Builder(IB)
这部分网上大量的教程,都是说的这个
手动使用API添加约束
Constraints(约束)
创建约束
iOS6中新加入了一个类:NSLayoutConstraint,一个形如这样的约束- item1.attribute = multiplier ? item2.attribute + constant
1
[NSLayoutConstraint constraintWithItem:button
2
attribute:NSLayoutAttributeBottom
3
relatedBy:NSLayoutRelationEqua
4
toItem:superview
5
attribute:NSLayoutAttributeBottom
6
multiplier:1.0
7
constant:-padding]
添加约束
在创建约束之后,需要将其添加到作用的view上。UIView(当然NSView也一样)加入了一个新的实例方法:- -(void)addConstraint:(NSLayoutConstraint *)constraint;
用来将约束添加到view。
在添加时唯一要注意的是添加的目标view要遵循以下规则:
- 对于两个同层级view之间的约束关系,添加到他们的父view上
- 对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
- 对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
刷新
可以通过-setNeedsUpdateConstraints和-layoutIfNeeded两个方法来刷新约束的改变,使UIView重新布局。这和CoreGraphic的-setNeedsDisplay一套东西是一样的~Visual Format Language(VFL) 可视格式语言
UIKit团队这次相当有爱,估计他们自己也觉得新加约束的API名字太长了,因此他们发明了一种新的方式来描述约束条件,十分有趣。这种语言是对视觉描述的一种抽象,大概过程看起来是这样的: accept按钮在cancel按钮右侧默认间距处最后使用VFL(Visual Format Language)描述变成这样:
1
[NSLayoutConstraint constraintsWithVisualFormat:@\\
"[cancelButton]-[acceptButton]\"
2
options:0
3
metrics:nil
4
views:viewsDictionary];
1
UIButton *cancelButton = ...
2
UIButton *acceptButton = ...
3
viewsDictionary = NSDictionaryOfVariableBindings(cancelButton,acceptButton);
{ acceptButton = ""; cancelButton = ""; }
当然,不嫌累的话自己手写也未尝不可。现在字典啊数组啊写法相对简化了很多了,因此也不复杂。关于Objective-C的新语法,可以参考WWDC 2012笔记:WWDC 2012 Session笔记——405 Modern Objective-C。 在view名字后面添加括号以及连接处的数字可以赋予表达式更多意义,以下进行一些举例:
- [cancelButton(72)]-12-[acceptButton(50)]
- 取消按钮宽72point,accept按钮宽50point,它们之间间距12point
- [wideView(>=60@700)]
- wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)
- V:[redBox][yellowBox(==redBox)]
- 竖直布局,先是一个redBox,其下方紧接一个宽度等于redBox宽度的yellowBox
- H:|-[Find]-[FindNext]-[FindField(>=20)]-|
- 水平布局,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线'|‘ 表示superview的边缘)
容易出现的错误
因为涉及约束问题,因此约束模型下的所有可能出现的问题这里都会出现,具体来说包括两种:- Ambiguous Layout 布局不能确定
- Unsatisfiable Constraints 无法满足约束
- po [[UIWindow keyWindow] _autolayoutTrace]
- [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical]
- [view hasAmbiguousLayout]
- [view exerciseAmbiguityInLayout]
布局动画
动画是UI体验的重要部分,更改布局以后的动画也非常关键。说到动画,Core Animation又立功了..自从CA出现以后,所有的动画效果都非常cheap,在auto layout中情况也和collection view里一样,很简单(可以参考WWDC 2012 Session笔记——219 Advanced Collection Views and Building Custom Layouts),只需要把layoutIfNeeded放到animation block中即可~1
[UIView animateWithDuration:0.5 animations:^{
2
[view layoutIfNeeded];
3
}];
部分代码
纯净代码UI正常布局后,添加autolayout就可以了,调整相当方便这是一段水平居中,垂直并列的4个按钮 布局代码
setTranslatesAutoresizingMaskIntoConstraints 是为no,开启AutoLayou.
纯净代码UI正常布局后,增加一个函数,进行自动布局
水平居中布局:NSLayoutAttributeCenterX
垂直居中布局:NSLayoutAttributeCenterY
以及后面的布局切换动画。
0 0
- 多屏尺的自动适配 AutoLayout (手动添加约束)
- AutoLayout自动布局添加约束的规则
- UIScrollView添加AutoLayout约束的坑
- UIScrollView添加AutoLayout约束的坑
- ios-autolayout添加约束的规则
- UIScrollView添加AutoLayout约束的坑
- 代码手动修改约束(AutoLayout)
- [autoLayout]自动布局下的纯storyboard添加约束--四个imageView平分一个屏幕的宽度
- UIScrollview--使用Autolayout添加约束
- autoLayout自动布局约束技巧
- iOS autolayout 的基本使用(用代码添加约束)
- iOS AutoLayout自动布局修改约束的值,延迟加载
- ScrolView的Autolayout约束
- 手动在eclipse中添加XML文件的schema约束
- Eclipse-----手动添加XML文件的Schema约束
- iOS 代码添加约束—VFL (AutoLayout)
- iOS 代码添加约束—VFL (AutoLayout)
- AutoLayout之通过代码添加约束
- Masonry - Autolayout 第三方自动布局类 归纳
- Sublime使用常见技巧举例
- Masonry介绍与使用实践:快速上手Autolayout
- Codeforces 407 A. Triangle 【Codeforces Round #239 (Div. 1)】
- 1005. 继续(3n+1)猜想 (25)
- 多屏尺的自动适配 AutoLayout (手动添加约束)
- lwip网络接口netif
- Python 读取键盘输入 :raw_input()和input() 函数 读取交互输入
- Android——自定义ArrayAdapter
- 提高Interface Builder高效工作的8个技巧
- error: two or more data types in declaration specifiers原因及解决方法
- Activity生命周期应用实例
- IOS框架研究之SDWebImage的原理以及使用流程
- 深入理解C/C++内存对齐