App适配简单概括
1:适配：适应、兼容各种不同的情况
系统适配
- 针对不同版本的操作系统进行适配
屏幕适配
- 针对不同大小的屏幕尺寸进行适配
在用户眼中
- 屏幕是由无数个像素组成的
- 像素越多，屏幕越清晰
在开发者眼中
- 屏幕是由无数个点组成的，点又是由像素组成的
- 像素越多，屏幕越清晰
iOS设置尺寸图
一：Autoresizing：基本的控件布局－－－－掌握
在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性较大，有些任务根本无法完成
相比之下，Autolayout的功能比Autoresizing强大很多
代码：
// 1.创建父控件 UIView *greenView = [[UIView alloc] init]; greenView.frame = CGRectMake(, , , ); greenView.backgroundColor = [UIColor greenColor]; [self.view addSubview:greenView]; self.greenView = greenView; // 2.创建子控件 UIView *redView = [[UIView alloc] init]; redView.frame = CGRectMake(, , , ); redView.backgroundColor = [UIColor redColor]; [greenView addSubview:redView];
3.设置子控件的autoresizing
注意: 代码中的上下左右和Storyboard中的是相反的
- Storyboard中勾选上左边, 就代表当前控件和父控件的左边的距离是固定的
- 而在代码中如果写上FlexibleLeftMargin, 就代表当前控件和父控件的左边是可拉伸的
- 换句话说就是: 如果设置了FlexibleLeftMargin, 就代表着右边是固定的
- UIViewAutoresizingFlexibleLeftMargin // 左边可以伸缩
- UIViewAutoresizingFlexibleRightMargin // 右边可以伸缩
- UIViewAutoresizingFlexibleTopMargin // 顶部可以伸缩
- UIViewAutoresizingFlexibleBottomMargin // 底部可以伸缩
- // 以下两个和Storyboard中的是一样的
- UIViewAutoresizingFlexibleWidth // 宽度可以伸缩
- UIViewAutoresizingFlexibleHeight // 高度可以伸缩
redView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
触摸一下屏幕红色的View就会随着蓝色的View变化而变化
二：AutorLayout：界面布局适配－－－－通过StoryBoard拖线必须熟练
Autolayout是一种“自动布局”技术，专门用来布局UI界面的
Autolayout自iOS 6开始引入，由于Xcode 4的不给力，当时并没有得到很大推广
自iOS 7（Xcode 5）开始，Autolayout的开发效率得到很大的提升
苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
一个NSLayoutConstraint对象就代表一个约束
创建约束对象的常用方法
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
- view1 ：要约束的控件
- attr1 ：约束的类型（做怎样的约束）
- relation ：与参照控件之间的关系
- view2 ：参照的控件
- attr2 ：约束的类型（做怎样的约束）
- multiplier ：乘数
- c ：常量
代码
// 1.创建两个控件, 并且添加到父控件上 UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView];
2.添加约束
// self.view.translatesAutoresizingMaskIntoConstraints = NO; // 错误写法, 禁用父控件的对子控件无效 redView.translatesAutoresizingMaskIntoConstraints = NO; blueView.translatesAutoresizingMaskIntoConstraints = NO;
2.1添加蓝色的约束
// 2.1.1顶部 NSLayoutConstraint *blueTopCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:]; [self.view addConstraint:blueTopCos]; // 2.1.2左边 NSLayoutConstraint *blueLeftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:]; [self.view addConstraint:blueLeftCos]; // 2.1.3右边 NSLayoutConstraint *blueRightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:]; [self.view addConstraint:blueRightCos]; // 2.1.4高度 NSLayoutConstraint *blueHeightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:]; [blueView addConstraint:blueHeightCos];
2.2添加红色的约束
// 2.2.1顶部 NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:]; [self.view addConstraint:redTopCos]; // 2.2.2右边 NSLayoutConstraint *redRightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:]; [self.view addConstraint:redRightCos]; // 2.2.3高度 NSLayoutConstraint *redHeightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:]; [redView addConstraint:redHeightCos]; // 2.2.4宽度 NSLayoutConstraint *redWidthCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0]; [self.view addConstraint:redWidthCos];
优先级：（默认是100）
警告
控件的frame不匹配所添加的约束,
比如约束控件的宽度为100, 而控件现在的宽度是110
错误
缺乏必要的约束, 比如
只约束了宽度和高度, 没有约束具体的位置
两个约束冲突, 比如
1个约束控件的宽度为100, 1个约束控件的宽度为110
：自动布局的核心计算公式
obj1.property1 =（obj2.property2 * multiplier）+ constant value
规则：
- 1）对于两个同层级view之间的约束关系，添加到它们的父view上
- 2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
- 3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
三：Size Class：屏幕适配－－－－必须熟练
四：VFL语言－－－－了解
VFL全称是Visual Format Language，翻译过来是“可视化格式语言”
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
基本语法：
- 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来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
- format ：VFL语句
- opts ：约束类型
- metrics ：VFL语句中用到的具体数值
- views ：VFL语句中用到的控件
// 1.创建一个红色View, 并且添加到父控件 UIView *blueVeiw = [[UIView alloc] init]; blueVeiw.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueVeiw]; UIView *redVeiw = [[UIView alloc] init]; redVeiw.backgroundColor = [UIColor redColor]; [self.view addSubview:redVeiw]; // 2.禁止红色View的Autgoresizing blueVeiw.translatesAutoresizingMaskIntoConstraints = NO; redVeiw.translatesAutoresizingMaskIntoConstraints = NO; // 3.利用VFL添加约束 /* VisualFormat: VFL语句 options: 对齐方式等 metrics: VFL语句中使用到的一些变量 views: VFL语句中使用到的一些控件 */ // 3.1设置蓝色 // 3.1.1水平方向 NSArray *blueHCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueVeiw]-20-|" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw}]; [self.view addConstraints:blueHCos]; // 3.1.2垂直方向 NSArray *blueVCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueVeiw(==50)]" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw}]; [self.view addConstraints:blueVCos]; // 3.2设置红色 // 3.2.1垂直方向 NSArray *redVCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueVeiw]-20-[redVeiw(==50)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueVeiw":blueVeiw, @"redVeiw":redVeiw}]; [self.view addConstraints:redVCos]; // 3.2.2水平方向 // NSArray *redHCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redVeiw(==blueVeiw * 0.5)]" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw, @"redVeiw":redVeiw}]; // [self.view addConstraints:redHCos]; #warning VFL不支持乘除法 NSLayoutConstraint *redHCos =[NSLayoutConstraint constraintWithItem:redVeiw attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueVeiw attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0]; [self.view addConstraint:redHCos];
注：不支持乘除法
五：牛逼框架：Masonry框架的使用＝＝＝＝＝＝熟悉使用
简介：
- 目前最流行的Autolayout第三方框架
- 用优雅的代码方式编写Autolayout
- 省去了苹果官方恶心的Autolayout代码
- 大大提高了开发效率
框架地址：
https://github.com/SnapKit/Masonry
导入
// 1.创建两个View, 并且添加到父控件 UIView *blueVeiw = [[UIView alloc] init]; blueVeiw.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueVeiw]; self.blueVeiw = blueVeiw; UIView *redVeiw = [[UIView alloc] init]; redVeiw.backgroundColor = [UIColor redColor]; [self.view addSubview:redVeiw]; // 2.禁止红色View的Autgoresizing blueVeiw.translatesAutoresizingMaskIntoConstraints = NO; redVeiw.translatesAutoresizingMaskIntoConstraints = NO; // 3.添加蓝色的约束 [blueVeiw makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view.left).offset(); make.right.equalTo(self.view.right).offset(-); make.top.equalTo(self.view.top).offset(); make.height.equalTo(); }]; // 4.添加红色的约束 [redVeiw makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(blueVeiw.bottom).offset(); make.height.equalTo(blueVeiw.height); make.right.equalTo(blueVeiw.right); make.width.equalTo(blueVeiw.width).multipliedBy(0.5); }];
注意: 在Storyboard中约束是可以重复添加的, 通过Masonry添加约束也是可以重复的, 要注意重复添加导致的错误和冲突
使用makeConstraints, 每次都会添加新的约束, 也就是会导致重复添加
[self.blueVeiw makeConstraints:^(MASConstraintMaker *make) { make.height.equalTo(100); }];
要更新约束使用updateConstraints
updateConstraints特点: 如果没有设置过, 就添加一个新的
如果已经设置过了, 就更新以前设置的那一个
[self.blueVeiw updateConstraints:^(MASConstraintMaker *make) { make.height.equalTo(); }];
清空约束 remakeConstraints
[self.blueVeiw remakeConstraints:^(MASConstraintMaker * }];
注：#define MAS_SHORTHAND
只要添加这个宏, 就可以去掉Masonry框架中对象访问对象属性前面的mas_属性, 和方法前的mas_前缀
例如添加前的写法
- make.left.equalTo(self.view.mas_left).with.offset(20);
例如添加后的写法
- make.left.equalTo(self.view.left).with.offset(20);
#define MAS_SHORTHAND_GLOBALS
- 只要添加上这个宏, 给equalTo传递参数的时候, 就可以直接传递基本数据类型 ,系统会自动包装
- 如果没有添加上面这个宏, 那么给equalTo传递参数的时候, 必须传递对象
- 如果要传递基本数据类型必须使用mas_equalTo
只需要在导入Masonry.h之前, 添加上一上两个宏, 就可以简化代码
#import “Masonry.h”
现在实际iOS项目开发中，80%以上都是使用AutorLayout结合SizeClass来实现的，除非部分特殊情况，所以基本上是要熟悉使用AutorLayout和SizeClass久可以，再就是关于框架的使用，除非苹果在后期害处更好的技术。
关于Masonery详细介绍请查看：iCocos博客园（iOS梦工厂）
