## 屏幕适配的发展历史
- iPhone3GS\iPhone4 - 没有屏幕适配可言 - 全部用frame、bounds、center进行布局 - 很多这样的现象:坐标值、宽度高度值全部写死
objc
UIButton *btn1 = [[UIButton alloc] init];
btn1.frame = CGRectMake(0, 0, 320 - b, 480 - c);
复制代码
iPad出现、iPhone横屏 - 出现Autoresizing技术 - 让横竖屏适配相对简单 - 让子控件可以跟随父控件的行为自动发生相应的变化 - 前提是:关闭Autolayout功能 - 局限性 - 只能解决子控件跟父控件的相对关系问题 - 不能解决兄弟控件的相对关系问题
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
复制代码
转载于:https://juejin.im/post/5b3cb9fc5188251aa91d8daa