iOS自动布局

最新推荐文章于 2020-12-23 12:59:45 发布

朱小火

最新推荐文章于 2020-12-23 12:59:45 发布

阅读量632

点赞数

分类专栏：理解学习随笔

本文链接：https://blog.csdn.net/zhulihuo/article/details/43303643

版权

随笔同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

理解学习

2 篇文章 0 订阅

订阅专栏

本文介绍了iOS自动布局AutoLayout的原理和使用，包括与frame布局的区别、与Autoresizing Mask的对比，以及手动添加约束、使用Visual Format Language的方法。通过AutoLayout，开发者可以更方便地处理不同设备和屏幕尺寸的适配问题，实现更灵活的布局设计。

摘要由CSDN通过智能技术生成

作为一个新手，用了三个多月的时间用代码，以设frame的x,y,width,height写项目布局，写的又慢，又不好改动！已深有体会，现寻求一种新的方式！

要想自动布局，要确定两种关系

1.父子关系（父控件和子控件）

2.兄弟关系（兄弟控件）

引用参考自：http://www.cocoachina.com/ios/20140915/9623.html

从目前苹果提供的技术来看，有下、中、上三种实现方法：

下策是，代码中判断当前设备的尺寸，对UI元素进行手工的调整，其缺点是显而易见的：代码复杂、容易出错、且维护难度大、灵活性极差；

中策是，通过设置可视单元（UIView UIButton...）的autoresizing属性，预设当该view所在的环境（父view）发生变化时它的尺寸和位置应该如何调整，该方法可以在Xcode的interface builder中（storyboard 或者 xib）设置完成，但其只能针对父子关系进行有限的调整，比如左边距是否固定，尺寸是否可变等，而对于兄弟关系的调整则无法实现，对于UI比较固定的APP这种调节方式也算基本满足需求；

上策就是结合使用autolayout和sizeclass对UI可视单元的父子关系、兄弟关系进行全方位的调整，而且调节精度更高：不仅能确定一个view的位置尺寸的变化依据是什么，还能对这些依据加以不同的优先级，先满足什么条件，再满足什么条件，对于重要的位置尺寸可以优先保证，这样整个APP就具有极强的动态可调性，满足不同设备、不同应用场景下的需求。

AutoLayout是什么？

autolayout是基于约束，描述性的布局系统

AutoLayout的使用会和原先的frame布局的改变？

以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。

使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置的定义，原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad或者iPhone5或者以后可能出现的mini iPad）的时候，始终还在底部之上10像素居中的位置，不会发生变化。

总结：使用约束条件来描述布局，view的frame会依据这些约束来进行计算

引用参考自：http://www.xuebuyuan.com/280852.html

AutoLayout和Autoresizing Mask的区别

我表示都没用过：下面这段话为我解释了：

Autoresizing Mask是我们的老朋友了…如果你以前一直是代码写UI的话，你肯定写过UIViewAutoresizingFlexibleWidth之类的枚举；如果你以前用IB比较多的话，一定注意到过每个view的size inspector中都有一个红色线条的Autoresizing的指示器和相应的动画缩放的示意图，这就是Autoresizing Mask。在iOS6之前，关于屏幕旋转的适配和iPhone，iPad屏幕的自动适配，基本都是由Autoresizing Mask来完成的。但是随着大家对iOS app的要求越来越高，以及已经以及今后可能出现的多种屏幕和分辨率的设备来说，Autoresizing Mask显得有些落伍和迟钝了。AutoLayout可以完成所有原来Autoresizing Mask能完成的工作，同时还能够胜任一些原来无法完成的任务，其中包括：

AutoLayout可以指定任意两个view的相对位置，而不需要像Autoresizing Mask那样需要两个view在直系的view hierarchy中。
AutoLayout不必须指定相等关系的约束，它可以指定非相等约束（大于或者小于等）；而Autoresizing Mask所能做的布局只能是相等条件的。
AutoLayout可以指定约束的优先级，计算frame时将优先按照满足优先级高的条件进行计算。

总结：

Autoresizing Mask是AutoLayout的子集，任何可以用Autoresizing Mask完成的工作都可以用AutoLayout完成。AutoLayout还具备一些Autoresizing Mask不具备的优良特性，以帮助我们更方便地构建界面。

手动使用API添加约束

创建

iOS6中新加入了一个类：NSLayoutConstraint，一个形如这样的约束

例1：

item1.attribute = multiplier ⨉ item2.attribute + constant

对应的代码为

[NSLayoutConstraint constraintWithItem:button
                             attribute:NSLayoutAttributeBottom
                             relatedBy:NSLayoutRelationEqual
                                toItem:superview
                             attribute:NSLayoutAttributeBottom
                            multiplier:1.0
                              constant:-padding]

这对应的约束是“button的底部（y）＝ superview的底部－10”。

例2：

[NSLayoutConstraint constraintWithItem:btn2

attribute:NSLayoutAttributeTop

//要设定的属性

relatedBy:NSLayoutRelationGreaterThanOrEqual

//大于还是小于相对的View的值

toItem:btn1

//相对于某个View或者控件

attribute:NSLayoutAttributeTop

//指定要设定的关联View的属性

multiplier:1 //因子值

constant:0]];

添加

在创建约束之后，需要将其添加到作用的view上。UIView（当然NSView也一样）加入了一个新的实例方法：

-(void)addConstraint:(NSLayoutConstraint *)constraint;

用来将约束添加到view。在添加时唯一要注意的是添加的目标view要遵循以下规则：

对于两个同层级view之间的约束关系，添加到他们的父view上

对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上

对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

Visual Format Language 可视格式语言

UIKit团队这次相当有爱，估计他们自己也觉得新加约束的API名字太长了，因此他们发明了一种新的方式来描述约束条件，十分有趣。这种语言是对视觉描述的一种抽象，大概过程看起来是这样的：

accept按钮在cancel按钮右侧默认间距处

最后使用VFL（Visual Format Language）描述变成这样：

[NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-[acceptButton]" 
                                        options:0 
                                        metrics:nil 
                                          views:viewsDictionary];

其中viewsDictionary是绑定了view的名字和对象的字典，对于这个例子可以用以下方法得到对应的字典：

UIButton *cancelButton = ... 
UIButton *acceptButton = ... 
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 无法满足约束

布局不能确定指的是给出的约束条件无法唯一确定一种布局，也即约束条件不足，无法得到唯一的布局结果。这种情况一般添加一些必要的约束或者调整优先级可以解决。无法满足约束的问题来源是有约束条件互相冲突，因此无法同时满足，需要删掉一些约束。两种错误在出现时均会导致布局的不稳定和错误，Ambiguous可以被容忍并且选择一种可行布局呈现在UI上，Unsatisfiable的话会无法得到UI布局并报错。

对于不能确定的布局，可以通过调试时暂停程序，在debugger中输入

po [[UIWindow keyWindow] _autolayoutTrace]

来检查是否存在Ambiguous Layout以及存在的位置，来帮助添加条件。另外还有一些检查方法，来查看view的约束和约束状态：

[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中即可～

[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}];

再推荐一篇博客的地址：

http://blog.csdn.net/mozixiong/article/details/14165391

其中我觉得很不错：

1.Visual format language　（应该不算语言）

Apple的工程师很有爱，发明了这种哭笑不得的象形文字。感觉它就是种解析方式。

Apple的官方文档给出了少之又少的文档和坑爹的例子。（视频我没看，不知道怎么样）网上的同学们也写了点不痛不痒的几句代码。你这是学了１＋１就让人搞微积分的节奏么？要写不写清楚，不如不写。

从厚道的老外那看了几篇。自己体会了些，分享给大家。只是个基本水平吧，会了这些，代码写al应该没有问题了。深入的我也还不会，希望遇到更有爱的牛人分享。

VFL在程序中由支持：

[objc] view plain copy

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

- 它返回一组constraint.

- format是你的VFL字串，等下讲。

- opts自己点去头文件看。有些情况会用，等下有例子。

- metrics是一个奇妙的字典，是你自己定义的。这个字典里面的key可以写在format字串中。编译器解析时，自动替换为metrics字典中的value。等下有例子。

- views是需要constraint关系的所有view.(也可以是一个)

2.VFL例子

写vfl字串的时候，脑海里要想象出画面的合理性。不合理的constraint会导致程序运行时报错或者直接崩溃。

随便写几个

[objc] view plain copy

NSDictionary *dict1 = NSDictionaryOfVariableBindings(_boxV,_headerL,_imageV,_backBtn,_doneBtn);
NSDictionary *metrics = @{@"hPadding":@5,@"vPadding":@5,@"imageEdge":@150.0};
NSString *vfl = @"|-hPadding-[_boxV]-hPadding-|";
NSString *vfl0 = @"V:|-25-[_boxV]";
NSString *vfl3 = @"V:|-vPadding-[_headerL]-vPadding-[_imageV(imageEdge)]-vPadding-[_backBtn]-vPadding-|";

dict1就是api 中需要的最后一个参数views。由上述宏来完成。

metrics定义了一些vfl中要用的参数。

下面有些vfl字串，一看便知如何使用metrics。

看到：

1)"|"表示superview.

|-间距-[view1对象名]-(>=20)-[view2对象名]

不写H/V就表示横向，间距可以写固定值也可写>/<。

形象化的理解，"|"是用来确定view上、下、左、右关系的。

想要确定从上到下的关系，就加V:|。那么这个vfl字串就可以描述从上到下的view们的关系。

2)看到vfl3里面，方括号表示view，圆括号表示尺寸数值。支持大小等于。或者另一个view　|-[view1(view2)]，v１的宽度等于v２。

3)优先级用＠表示。如V:|-50@750-[view(55)]，或者写到metrics里面更好。

具体定义查看UILayoutPriority。有几个固定的数值。1000表示必须支持。

4)options，这个要看具体需要。如果是竖排V布局，可以添加NSLayoutFormatAlignAllLeft，让他们对齐。

根据需要也可以添加按位或NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight。（鬼知道什么需要，自己看经验吧）

5)写好以后一般把constraint添加给superview：

[objc] view plain copy

NSString *vfl1 = @"|-hPadding-[_headerL]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict1]];

6)还有一个api用于生成单个constaint

[objc] view plain copy

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;