随着 iOS 设备屏幕尺寸的增多,当下无论是纯代码开发还是 Xib/StoryBoard 开发,自动布局已经是必备的开发技能了。
我使用自动布局也有一段时间了,遇到了不少问题,在解决的过程中也收获了很多知识。尤其是在使用熟练之后开发速度上的提升非常明显。这里把 AutoLayout 的基本使用和个人使用心得汇总一下,希望能帮助到大家!
适配主要分两种
常见设备的分辨率:
iPhone 4s 和之前设备的屏幕都是 3.5 英寸,可以说没有屏幕适配,所有的坐标点就是 320*480.
适配完全使用 frame、bounds、center 进行计算,代码基本写死。
- // 直接写死
- UIImageView *iv = [UIImageView new];
- iv.frame = CGRectMake(50, 300, 200, 80);
- [self.view addSubview:iv];
外部四根线
- 外部四根线分别表示上、下、左、右四个方向,子控件相对于父控件的距离。
- 实线:表示固定位置
- 虚线:表示非固定位置
- **内部两根线**
- 内部两根线分别表示水平和竖直方向,子控件是否根据父控件等比例缩放。
- 实线:该方向上跟随父控件等比缩放
- 虚线:该方向上不跟随父控件等比缩放
- - **AutoResizing在代码中的使用介绍**
- 通常代码中子控件在添加到父控件之前设置AutoResizing对应的属性值,其代码属性值和Xib中相反,代码中设置可变部分,Xib中是选中部分为固定不变的。
- // 上下左右四个方向参数(与Xib中设置相反)
- UIViewAutoresizingNone = 0,
- UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
- UIViewAutoresizingFlexibleRightMargin = 1 << 2,
- UIViewAutoresizingFlexibleTopMargin = 1 << 3,
- UIViewAutoresizingFlexibleBottomMargin = 1 << 5
- // 宽高是否根据父控件等比缩放
- UIViewAutoresizingFlexibleHeight = 1 << 4,
- UIViewAutoresizingFlexibleWidth = 1 << 1,
比如要设置一个 UIView 与其父控件关系为右下角对齐
示例代码如下:
- XYBannerView *banner = [XYBannerView bannerView];
- banner.frame = CGRectMake(80, 20, 200, 90);
- banner.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
- [self.view addSubview:banner];
Xib 中常用的面板
Xib 主要有以下三个面板
AutoLayout 的使用原则
AutoLayout 是为了确定 View 的 frame(确定 View 的 Point 和 Size)。
2. 如图:
- 'command' + 'option' + '='
注意:上面说的 Add New Constaints 面板只能添加新的约束,修改不能在那里。
AutoLayout 这种灵活的实用技术最直接的学习办法就是实战练习,下面几个小案例来展示一下。
1. 在控制器底部添加两个 View,一个红色,一个蓝色
2. 两个 View 的高度、宽度永远相等
3. 距离父控件左边、右边、两者中间和距底边的距离相等
示意如图:
根据:添加四个约束确定 frame,避免冲突和警告的原则。我们按照要求添加约束
1. 两者等高等宽:使用 Add New Constraints 面板
或者可以直接拖线:选中红色 按住'control'键拖线到蓝色
2. 设置红色 View 约束
选中红色 View 打开 Add New Contraint 面板设置对应约束
3. 设置蓝色 View 约束
选中红色 View 打开 Add New Contraint 面板设置对应约束,其中蓝色 View 的约束同上图,只需要设置蓝色的右边距同红色相等 为 20 即可(其他约束在设置红色的时候已经有了)
4. 设置红蓝色 View 等高 / 底
设置等高 / 底 和上面设置两者等高等宽步骤一致,选择 Top/Bottom 即可。
效果:
同样两个 View 一蓝一红
1. 两个 View 的高度相等
2. 红色 View 和蓝色 View 的右边对齐
3. 蓝色 View 距离父控件的左右相等,且距离红色 View 的间距相等
4. 红色 View 的左边和蓝色 View 中点对齐
1. 设置蓝色 View 约束
蓝色 View 约束:距离父控件边距和红色 View 的边距
2. 设置红色 View 和蓝色 View 等高 和边距
1. 设置两者等高,直接拖线即可
2. 设置红色 view 的边距直:距右 20 和 距底边 20。(参考上图)
3. 设置红色 View 与蓝色 View 的中心对齐
红色 View 和蓝色 View 的中心对齐可转化为 红色 View 长度为蓝色一半。可先设置等宽再修改等宽约束。
效果图:
四个相同的 View 均分占据屏幕的四个角,如图
1. 四个 view 是等宽等高
直接分别设置四个的等宽等高,拖线就很方便
2. 四个 view 互相之间的间距为零
使用 Add New Contraint 面板分别添加每个 View 的四边距 为 0 即可
最终效果如图:
UILabel 相对比较特殊一点,需要单独说一下。
在不使用 AutoLayout 的时候 UILabel 内部的文字默认是居中显示的,如果设置的 Size 较大,而内部文字较少就会造成上下留白,从而造成资源的浪费。
在实际的使过程中,需求往往是 UILabel 正好包裹住内部的文字。
有了 AutoLayout 之后的 UILabel 在添加约束的时候可以不用添加高度,系统会自动计算内部文字高度来自适应 UILabel 的高度!
实际应用中经常需要设置 UILabel 的根据文字多少来自动适应高度,并且 UILabel.width <= 某个值.
这种情况需要给 UILabel 添加宽度约束,比例关系设置为 Less Than Or Equal
1. 设置两个 View,两者间距为 0,一红一绿,
2. 红色 View 内部有一个 UILabel,
3. 根据 Label 内部的文字自适应高度,
4. 点击屏幕修改 Labe 内部文字,让其父控件的 frame 也自动适应
1. 设置两个 View 一红一绿,分别设置边距等约束
2. 红色 View 中添加 UILabel,设置 Label 的文字和约束,设置 Label 高度自适应
最终效果图:
这只是几个简单的小练习,若想使用熟练 AutoLayout 还需要认真练习
以上讲了 AutoLayout 的可视化使用,但是项目中有很多页面是动态生成的,需要我们用代码实现,所以下面讲讲 AutoLayout 的代码实现
代码实现的特点:繁琐、技术含量低
Xib 中的每一条拖线对应代码中一个 NSLayoutConstraint 对象,从 NSLayoutConstraint 头文件中可以查看其对象的创建方法:
- NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view1
- attribute:attr1 relatedBy:NSLayoutRelation toItem:view2 attribute:attr2
- multiplier:multiplier constant:c];
- 参数含义:
- view1: 约束的第1个View
- attr1: 第1个View的属性
- NSLayoutRelation: 两个View的属性之间的关系
- view2: 约束的第2个View
- attr2: 第2个View的属性
- multiplier: 倍数关系
- c: 需要增加的常量
上面的方法可以整合成一个自动布局的核心计算公式
- - (void)addConstraint:(NSLayoutConstraint *)constraint;
- - (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints;
- view.translatesAutoresizingMaskIntoConstraints = NO;
下面代码实现一个如图自动布局
- UIView * view = [UIView new];
- view.translatesAutoresizingMaskIntoConstraints = NO;
- view.backgroundColor = [UIColor redColor];
- // view.frame = CGRectMake(10, 10, 100, 100); ---> 不再设置frame
- [self.view addSubview:view];
- //设置底边约束
- NSLayoutConstraint * bottomConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10];
- //设置右边约束
- NSLayoutConstraint * rightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
- //设置width约束
- NSLayoutConstraint * widthConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100];
- //设置height约束
- NSLayoutConstraint * heightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100];
- [self.view addConstraint:bottomConstraint]; ----> 与父控件相关的约束添加到父控件上
- [self.view addConstraint:rightConstraint];
- [view addConstraint:widthConstraint];
- [view addConstraint:heightConstraint];
代码实现 AutoLayout 相对比较繁琐,但是如果懂得了原理还是能很好实现出来的。
由于 AutoLayout 技术代码实现起来特别繁琐,并且技术含量不高、代码冗余等问题。有一些大牛开源了一些自己写的三方自动布局框架,使用起来非常简单。
目前最流行的是:Masnory
至于使用方法请自行搜索、学习。
重要的事情多说一遍:自动布局非常灵活,想要熟练需要多用多练
来源: http://www.cnblogs.com/xiaoyouPrince/p/6552809.html