## 屏幕适配的发展历史
- iPhone3GS\iPhone4
- 没有屏幕适配可言
- 全部用frame、bounds、center进行布局
- 很多这样的现象：坐标值、宽度高度值全部写死
objc
UIButton *btn1 = [[UIButton alloc] init];
btn1.frame = CGRectMake(0, 0, 320 - b, 480 - c);
-
iPad出现、iPhone横屏
- 出现Autoresizing技术
- 让横竖屏适配相对简单
- 让子控件可以跟随父控件的行为自动发生相应的变化
- 前提是：关闭Autolayout功能
- 局限性
- 只能解决子控件跟父控件的相对关系问题
- 不能解决兄弟控件的相对关系问题
- 出现Autoresizing技术
-
iOS 6.0（Xcode4）开始
- 出现了Autolayout技术
- 从Xcode5.0(iOS 7.0)开始，开始流行Autolayout
Autolayout
- 两个核心概念: 参照，约束
手动添加约束
添加约束的规则
在创建约束后，需要将其添加到作用的View上
在添加时要注意目标View需要遵从一下规则:
- 对于两个同层级view之间的约束关机，添加到他们的父view上
- 对于不同层级view之间的约束关系，添加到最接近的共同父view上
- 对于有层次关系的两个view之间的约束，添加到层次较高的父view上
添加约束简单例子
- 苹果官方添加约束第一种直接添加的方法
/** 不要将AutoresizingMask 转为 Autolayout的约束 */
blueView.translatesAutoresizingMaskIntoConstraints = NO;
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
/** 宽度约束 : 宽度是300 */
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0.0 constant:300];
[blueView addConstraint:widthConstraint];
代码实现Autolayout方法1-系统
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
1. view1 : 要约束的控件
2. attr1 : 约束的类型(做什么样的约束)
3. relation : 与参照控件之间的关系
4. view2 : 参照的控件
5. attr2 : 约束的类型
6. multiplier : 乘数
7. c : 常量
- 苹果官方批量添加约束 - VFL
- 什么是VFL语言
- VFL全称是Visual Format Language，翻译是“可视化格式语言”
- VFL 是苹果公司为了简化Autolayout的编码而推出的抽象语言
+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;
代码实现Autolayout方法2-Masonry
- 目前最流行的Autolayout第三方框架
- 用优雅的代码方式编写Autolayout
- 省去了苹果官方超长的Autolayout代码
- 大大提高了开发效率
- 框架地址: ****https://github.com/SnapKit/Masonry****
使用例子
/**
* 删除以前的约束，重新添加约束
[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
}];
* 更新约束
[blueView mas_updateConstraints:^(MASConstraintMaker *make) {
}];
*/
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
/** 添加新的约束 */
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
/** 在block中make创建约束 */
/** 尺寸100*100，粘着父视图间距右下角20 */
make.width.mas_equalTo(100);
make.height.mas_equalTo(100);
make.right.equalTo(self.view).offset(-20);
make.bottom.equalTo(self.view).offset(-20);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
/** 在block中make创建约束 */
/** 尺寸100*100，粘着父视图间距右下角20 */
make.width.height.mas_equalTo(100);
make.height.mas_equalTo(100);
make.right.equalTo(self.view).offset(-20);
make.bottom.equalTo(self.view).offset(-20);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
/** 在block中make创建约束 */
/** 尺寸100*100，粘着父视图间距右下角20 */
// make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(100, 100)]);
make.size.mas_equalTo(CGSizeMake(100, 100));
make.height.mas_equalTo(100);
make.right.equalTo(self.view).offset(-20);
make.bottom.equalTo(self.view).offset(-20);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
/** 在block中make创建约束 */
/** 尺寸100*100，粘着父视图间距右下角20 */
/** 默认父控件作为参考 */
make.size.mas_equalTo(100);
make.right.offset(-20);
make.bottom.offset(-20);
}];
/**
* 乘数比例
*/
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
/** 在block中make创建约束 */
/** 尺寸100*100，粘着父视图间距右下角20 */
/** 默认父控件作为参考 */
make.size.mas_equalTo(self.view).multipliedBy(0.5);/** 父视图size的一半 */
make.right.equalTo(self.view).offset(-20);
make.bottom.equalTo(self.view).offset(-20);
}];
/** 居中（水平+垂直） */
/** 尺寸是父控件的一半 */
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(self.view).multipliedBy(0.5);
make.center.mas_equalTo(self.view);
}];
/** 间距 */
/**
* 距离父控件内部都是50间距
*/
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.view).offset(50);
make.right.mas_equalTo(self.view).offset(-50);
make.top.mas_equalTo(self.view).offset(50);
make.bottom.mas_equalTo(self.view).offset(-50);
}];
/** 精简 */
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.top.mas_equalTo(self.view).offset(50);
make.right.and.bottom.mas_equalTo(self.view).offset(-50);
}];
/** 精简边缘 */
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 100, 50, 50));/** 设置间距 */
make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsZero);/** 跟父控件一样大 */
}];
约束类型
1.尺寸 : width \ height \ size
2.边界 : left \ leading \ right \ trailing \ top \ bottom
3.中心点: center \ centerY \ center X
4.边距 : edgs
有个宏在头文件，用在引用头文件前面，就不用每个方法添加"mas_"了
//define this constant if you want to use Masonry without the 'mas_' prefix
//#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
//#define MAS_SHORTHAND_GLOBALS
