Autolayout

2016-06-13  本文已影响443人  温暖C

一、简介

  1. 在以前的iOS程序中,经常编写大量的坐标计算代码,为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕编写不同的坐标计算代码,即传说中的“屏幕适配”。

  2. 那什么是Autolayout呢?
    Autolayout是一种“自动布局”技术,专门用来布局UI界面的。Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大推广。自iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升。苹果官方也推荐开发者尽量使Autolayout来布局UI界面,它能很轻松地解决屏幕适配的问题。

  3. 在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成,相比之下,Autolayout的功能比Autoresizing强大很多。

  4. 如何使用呢?
    Autolayout有2个核心概念:参照和约束。它通过内定的Constraint(约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图。将我们想象中的结果展现出来。Constraint的设定非常灵活,实现一种布局的方法可以通过多Constraint来完成.
    以下几点是我们在开始使用之前必须弄清楚的事情:

二、用xib或者storyboard来实现Autolayout

  1. 先从Interface Builder开始吧. 打开某个xib或者storyboard,
    在右侧Show in file inspector里面找到Ues Autolayout,将其勾选。如下图:


    自此,Autolayout便启用成功,autoresizingMask被废弃.其所有以往的功能和特性都被Autolayout取代.
    注意:
    现在我们定位控件位置的方式,不再像以前一样,计算好每一个控件具体的位置,x是多少,y是多少。而是思考,这个控件离左边是相隔多少距离,或者离顶部或底部相隔多少距离。
    而有些规则性的事情还是类似的,比如我们定位一个控制的位置,一定要有x,y两个坐标点同时有值,少一个都不能正常显示。
    同样Autolayout在创建约束时也一样,在思考完离顶部距离以后,还需要思考离顶部距离,否则控件的显示位置一样无法正常显示.
    换言之,要让Autolayout计算出合理的位置,需要保证水平距离和垂直距离同时存在. 否则IDE,都会给出警告,提示这样的布局Ambiguous Layout(模凌两可)
  2. Interface Builder提供Autolayout的功能:

2.1如下图:



详解:
(选择两个view时可设置)
Leading Edges:左边对齐
Trailing Edges:右边对齐
Top Edges:顶部对齐
Bottom Edges:底部对齐
Horizontal Centers:水平居中
Vertical Centers:垂直居中
Baselines:文本底标线对齐

(单选择一个view时可设置)
Horizontal Center in Container:对于父view的水平居中
Vertical Center in Container:对于父view的垂直居中

2.2如下图:



(选择框)
None:添加完约束后不进行任何操作,
Items of New Constraints:在添加约束后重新摆放约束涉及到的view
All Frames in Container:在添加约束后重新摆放所有这个容器内的view

2.3如下图:


详解:
上面的十字是"与最近的邻居的约束", 填上数字, 单击虚线变成实线就是要添加这个约束.
这里的"邻居"是将一个包含子view的父view看做一个装了一堆积木的盒子, 积木相对于盒子的边框和其他的积木都作为"邻居"。

(定义的宽高数据约束)
Widths:宽度指定,
Height:高度指定,

(定义多个view之间的宽高约束)
Equal Widths:宽度相同,
Equal Heights:高度相同,

(定义多个view之间的宽高约束)
Align:多个view之间的对齐约束

2.4如下图



详解:
(上半部分菜单的操作对象是当前选中的view, 下半部分的操作对象是选中view内的view)
Update Frames:刷新frame(使用当前已经设置的所有约束),
Update Constraints:刷新约束(根据当前的约束和frame, 更新约束的constant值),
Add Missing Constraints:添加缺失的约束(自动添加系统认为你应该添加却忘记添加的约束, 测试中经常搞出冲突)
Reset to Suggested Constraints:重置为系统建议的约束(清理系统认为重复/冲突的约束, 测试中经常搞出问题)
Clear Constraints:清理所有约束(删除对象上绑定的所有约束)

三、代码创建AutoLayout

代码创建的约束有两种方式:
1:常规约束,写法非常冗长,但能实现所有的约束方式以及非常特殊的约束方式,代码如下:

  // 添加两个控件到父控件上添加蓝色View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
self.blueView = blueView;

  // 添加红色View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];

 // 禁用auturezing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
 //注意, 这里设置父控件无效,要设置自己的translatesAutoresizingMaskIntoConstraints属性为NO。
redView.translatesAutoresizingMaskIntoConstraints = NO;

 // 添加约束
 // 添加蓝色VIew距离父控件左边的距离固定为20  X
NSLayoutConstraint *leftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:leftCos];

 // 红色的顶部和蓝色的底部距离固定 Y
NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
[self.view addConstraint:redTopCos];

注意:

2.可视化格式语言约束(VFL)
所谓可视化格式语言约束,是一种很直观的理解方式,当然,前提是你已经熟练理解这套语言的规则.
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言。
通过可视化语言可以一次性创建多个约束. 这对于第一次方式来说,是相当方面和容易理解的.但可视化语言不是所有约束都能满足.
我们可以用正则表达式的学习方式来学习这项可视化格式语言.举例代码如下:


// 添加两个控件到父控件上
// 添加蓝色View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];

// 添加红色View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];

// 禁用Autoresizing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
redView.translatesAutoresizingMaskIntoConstraints = NO;

// 添加约束
// 设置蓝色View距离左边和右边有20的的间距 X 和 宽度
NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];
[self.view addConstraints:blueViewH];

// 设置蓝色View距离顶部有20的间距, 并且高度等于50 Y 和高度
// 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度
// 并且设置红色和蓝色右对齐
NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
[self.view addConstraints:blueViewV];
NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
[self.view addConstraint:redVeiwW];

注意: 在VFL语句中, 是不支持乘除法

VFL实例:

四、VFL的使用

使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

详解:
lFormat: VFL语句
options: 对齐方式
metrics:VFL语句中用到的变量值
views:VFL语句中用到的控件
metrics:可以把VFL语句中的常量,抽取成为变量。由于是个字典,要包装成对象类型

五、AutoLayout实现动画

1.约束也可以在storyboard里面进行连线,只需要修改控件的约束,也能实现动画。

[UIView animateWithDuration:1.0 animations:^{
   [添加了约束的view layoutIfNeeded];
}];

  1. 可以在UIView中让多个约束一起执行动画
    如果控件有默认的高度,只需要设置autoLayout的X值和Y值,autoLayout会自动计算出控件的宽高。

六、Autolayout的警告与错误

1.警告
控件的frame不匹配所添加的约束,比如约束控件的宽度为100,而控件现在的宽度是110.

2.错误
(1).缺乏必要的约束,只约束了宽度和高度,没有约束具体的位置。
(2).两个约束冲突,比如1个约束控件的宽度为100,一个约束控件的宽度为110

七、特殊情况

  1. UILabel
    UILabel不用约束宽度,会自动根据文字多少自动改变宽度——不用添加宽度约束(不会报错)

  2. UISearchbar
    searchbar添加到navigationBar的titleView中时,会自动伸长到整个navigationBar,对其添加的任何约束和frame属性都没有用。
    解决方法:添加searchBar到另外一个普通的view中再设置为titleView

上一篇下一篇

猜你喜欢

热点阅读