## 屏幕适配的发展历史

  • 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需要遵从一下规则:

  1. 对于两个同层级view之间的约束关机,添加到他们的父view上
  2. 对于不同层级view之间的约束关系,添加到最接近的共同父view上
  3. 对于有层次关系的两个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语言
  1. VFL全称是Visual Format Language,翻译是“可视化格式语言”
  2. 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

返回
顶部