AutoLayout屏幕适配

## 屏幕适配的发展历史

  • 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

推荐阅读更多精彩内容