Autolayout

2018-03-27 本文已影响12人那位小姐

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

Autolayout的2个核心概念

参照
约束

与 Autoresizing 区别

在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性较大，有些任务根本无法完成
相比之下，Autolayout的功能比Autoresizing强大很多
拖线时造成的Autolayout的警告和错误
警告[图片上传失败...(image-f93617-1522131474260)]
- 控件的frame不匹配所添加的约束, 比如比如约束控件的宽度为100, 而控件现在的宽度是110
错误[图片上传失败...(image-f1ae2d-1522131474260)]
- 缺乏必要的约束, 比如只约束了宽度和高度, 没有约束具体的位置
- 两个约束冲突, 比如 1个约束控件的宽度为100, 1个约束控件的宽度为110

代码实现Autolayout

代码实现Autolayout的步骤

利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点

要先禁止autoresizing功能，设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
添加约束之前，一定要保证相关控件都已经在各自的父控件上不用再给view设置frame

NSLayoutConstraint

一个NSLayoutConstraint对象就代表一个约束

创建约束对象的常用方法

/*
view1 ：要约束的控件
attr1 ：约束的类型（做怎样的约束）
relation ：与参照控件之间的关系
view2 ：参照的控件
attr2 ：约束的类型（做怎样的约束）
multiplier ：乘数
c ：常量
*/
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

自动布局有个核心公式 obj1.property1 =（obj2.property2 * multiplier）+ constant value

添加约束的规则（1）

在创建约束之后，需要将其添加到作用的view上
- 在添加时要注意目标view需要遵循以下规则：
  - 1）对于两个同层级view之间的约束关系，添加到它们的父view上
  [图片上传失败...(image-cc7a99-1522131474260)]
  - 2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
    [图片上传失败...(image-2c1723-1522131474260)]
  - 3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
    [图片上传失败...(image-a21081-1522131474260)]

VFL语言

什么是VFL语言
- VFL全称是Visual Format Language，翻译过来是“可视化格式语言”
- VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
  [图片上传失败...(image-c4409d-1522131474260)]

VFL示例

H:[cancelButton(72)]-12-[acceptButton(50)] canelButton宽72，acceptButton宽50，它们之间间距12
H:[wideView(>=60@700)] wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
V:[redBox]-[yellowBox(==redBox)] 竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-| 水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

VFL的使用

使用VFL来创建约束数组
- 创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义 NSDictionaryOfVariableBindings(...)

/*
format ：VFL语句
opts ：约束类型
metrics ：VFL语句中用到的具体数值
views ：VFL语句中用到的控件
*/
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

有了Autolayout的UILabel

在没有Autolayout之前，UILabel的文字内容总是居中显示，导致顶部和底部会有一大片空缺区域
[图片上传失败...(image-e68471-1522131474260)]
有Autolayout之后，UILabel的bounds默认会自动包住所有的文字内容，顶部和底部不再会有空缺区域
[图片上传失败...(image-65a2ca-1522131474260)]

UILabel实现包裹内容

设置宽度约束为 <= 固定值
设置位置约束
不用去设置高度约束

基于Autolayout的动画

在修改了约束之后，只要执行下面代码，就能做动画效果

[UIView animateWithDuration:1.0 animations:

　　^{

　　　　[添加了约束的view layoutIfNeeded];

}];

Masonry框架的使用示例

下载地址： https://github.com/SnapKit/Masonry

 //设置约束
 - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block;

 //如果之前已经有约束,则更新新的约束,如果没有约束,则添加约束
 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *))block;

 //将之前的约束全部删除,添加新的约束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

以下为代码使用实现布局效果：
     //添加两个控件
     UIView *blueView = [[UIView alloc] init];
     blueView.backgroundColor = [UIColor blueColor];
     blueView.translatesAutoresizingMaskIntoConstraints = NO;
     [self.view addSubview:blueView];

     UIView *redView = [[UIView alloc] init];
     redView.backgroundColor = [UIColor redColor];
     redView.translatesAutoresizingMaskIntoConstraints = NO;
     [self.view addSubview:redView];

     //给蓝色View设置约束
     [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
14         make.left.equalTo(self.view.mas_left).offset(30);//和父view的左边间距为30;
         make.bottom.equalTo(self.view.mas_bottom).offset(-30);//和父view的底部间距为30;
         make.right.equalTo(redView.mas_left).offset(-30);//和红色view的间距为30;
         make.height.mas_equalTo(50);//蓝色view的高度为50
     }];

     //给红色View设置约束
     [redView mas_makeConstraints:^(MASConstraintMaker *make) {
         make.right.equalTo(self.view.mas_right).offset(-30);//和父view的右边间距为30;
         make.bottom.equalTo(blueView.mas_bottom);//和蓝色view的底部对齐
         make.height.equalTo(blueView.mas_height);//和蓝色view的高度相等
         make.width.equalTo(blueView.mas_width);//和蓝色view的宽度相等
     }];

制作九宫格样式的视图布局

[图片上传失败...(image-738d9-1522131474260)]
[图片上传失败...(image-923fb8-1522131474260)]

填充的黄色背景的View，然后隐藏显示。设置相对位置

Autolayout

Autolayout的2个核心概念

与 Autoresizing 区别

代码实现Autolayout

代码实现Autolayout的步骤

代码实现Autolayout的注意点

NSLayoutConstraint

创建约束对象的常用方法

添加约束的规则（1）

VFL语言

VFL示例

VFL的使用

有了Autolayout的UILabel

UILabel实现包裹内容

基于Autolayout的动画

Masonry框架的使用示例

制作九宫格样式的视图布局

猜你喜欢

热点阅读