Auto Layout

自动布局

• 对齐矩形
• ios设备的屏幕尺寸
• xib
• 代码实现
  • 示例1:苹果原生示例
  • 示例2:第三方库Masonry简单示例
  • 示例3:第三方库Masonry混合示例

对齐矩形

自动布局系统为视图定义了一个新的矩形区域，可以称之为对齐矩形，它提供了若干布局属性，如下图所示：

这里写图片描述

iOS设备的屏幕尺寸

设备	屏幕尺寸	分辨率	坐标点
iPhone 3和3s	3.5英寸	320*480	320*480
iPhone 4和4s(支持Retina)	3.5英寸	640*960	320*480
iPhone 5和5s(支持Retina)	4英寸	640*1136	320*568
iPhone 6	4.7英寸	750*1334	375*667
iPhone 6 Plus	5.5英寸	1080*1920	414*736
iPad 1和2(不支持Retina)	9.7英寸	768*1024	768*1024
iPad 3和4(支持Retina)	9.7英寸	1536*2048	768*1024
iPad Air	9.7英寸	1536*2048	768*1024
iPad Mini(不支持Retina)	7.9英寸	768*1024	768*1024
iPad Mini2(支持Retina)	7.9英寸	1536*2048	768*1024

xib

• 右下角有三个图标
• 第1个可以设置各种对齐居中，不认识英文可以看图标。
• 第2个可以设置本身的宽高要选中，距离主视图的x，y轴要去掉去掉边框。
• 第3个有很多警告要修复全部可以用update Frames。

注意设置约束条件以后是否显示约束条件有那么多个，如果少了可能是选择了但是虚线没有变实需要点击变成实线

• 也可以自即拖动选择，比方说一个视图是另一个视图的的多少倍，就可以拖动选择宽高

• 单元格中关联xib示例

// 创建视图的时候就写
// 注册单元格 通过xib方式 nib是xib编译后的二进制数据
[单元格名称 registerNib:[UINib nibWithNibName:@"xib名称" bundle:nil] forCellReuseIdentifier:@"复用单元格标识"];
// 创建单元格的时候写
 AppListCell *cell = [tableView dequeueReusableCellWithIdentifier:@"复用单元格标识" forIndexPath:indexPath];

代码实现

在苹果引入自动布局以前，iOS开发很多地方都使用了自动缩放掩码来适配屏幕，这种做法不能说很糟糕，但始终显得不尽如人意，也比较的笨拙。在默认情况下，视图会将自动缩放掩码转换为对应的约束，这类约束会和手动添加的约束产生冲突，通常需要将视图的translatesAutoresizingMaskIntoConstraints属性设置为NO来避免。

苹果官方提供了一种视觉格式化语言(VFL)来通过代码为视图添加约束。我们用例子来加以说明。

示例1:苹果原生示例

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    UIView *view1 = [[UIView alloc] init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor blueColor];
    
    UIView *view2 = [[UIView alloc] init];
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    view2.backgroundColor = [UIColor yellowColor];
    
    
    [self.view addSubview:view1];
    [self.view addSubview:view2];
    
    NSDictionary *views = @{@"view1":view1, @"view2":view2};
    
    NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(==120)]-10-[view2]-20-|" options:0 metrics:nil views:views];
    
    NSArray *vConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-200-[view1]-100-|" options:0 metrics:nil views:views];
    NSArray *vConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-200-[view2]-120-|" options:0 metrics:nil views:views];
    
    [self.view addConstraints:hConstraints];
    [self.view addConstraints:vConstraints1];
    [self.view addConstraints:vConstraints2];
}

@end

示例2:第三方库Masonry简单示例

可以使用第三方库Masonry来简化基于代码的自动布局。由于Masonry使用了函数式编程风格，因此代码书写会相对简单。

#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIView *superview = self.view;
    
    UIView *view1 = [[UIView alloc] init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor greenColor];
    [superview addSubview:view1];
    
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(superview.mas_top).with.offset(50);
        make.left.equalTo(superview.mas_left).with.offset(50);
        make.width.mas_equalTo(200).height.mas_equalTo(200);
    }];

}

@end

示例3:第三方库Masonry混合示例

不可编译

#import "SubjectAppView.h"
#import "StarView.h"

@implementation SubjectAppView
{
    UIImageView *_appImageView;
    UILabel *_appNameLabel;
    UILabel *_commentLabel;
    UILabel *_downloadLabel;
    StarView *_starView;
}

-(instancetype)init
{
    if (self = [super init]) {
        [self createViews];
    }
    return self;
}

-(instancetype) initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self createViews];
    }
    return self;
}

-(instancetype)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self createViews];
    }
    return self;
}

// 创建视图
// 1.使用代码实现AutoLayout 需要将视图作为某个视图的子视图
// 2.将translatesAutoresizingMaskIntoConstraints设为NO
 -(void) createViews
{
    _appImageView = [[UIImageView alloc] init];
    [self addSubview:_appImageView];
    
    _appNameLabel = [[UILabel alloc] init];
    [self addSubview:_appNameLabel];
    
    _commentLabel = [[UILabel alloc] init];
    [self addSubview:_commentLabel];
    _downloadLabel = [[UILabel alloc] init];
    [self addSubview:_downloadLabel];
    
    _starView = [[StarView alloc] init];
    [self addSubview:_starView];
    
    
    // 将所有视图的关闭停靠模式
    // 自动缩放掩码（translatesAutoresizingMaskIntoConstraints）默认为YES
    for (UIView *view in self.subviews) {
        view.translatesAutoresizingMaskIntoConstraints = NO;
    }
    
    
    // 重新建立拘束
    // _appImageView mas_remakeConstraints:
    
    // 建立约束 通过mas_makeConstraints建立约束
    [_appImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        // make表示当前视图的约束
        // 左 上 底部和父视图间距为3
        make.left.top.bottom.equalTo(self).offset(3);
        // 宽度和高度相等
        make.width.equalTo(_appImageView.mas_height);
    }];
    [_appNameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        // 顶部对齐
        make.top.equalTo(_appImageView.mas_top);
        // 水平间距为5
        make.left.equalTo(_appImageView.mas_right).offset(5);
    }];
    
    [_commentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        // 左对齐
        make.left.equalTo(_appNameLabel.mas_left);
        // 中心点Y相等
        make.centerY.equalTo(_appImageView.mas_centerY);
    }];
    
    [_downloadLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        // 同一水平线
        make.centerY.equalTo(_appImageView.mas_centerY);
        
        // 注意视图谁在前 谁在后
        make.right.equalTo(self.mas_right).offset(-10);
    }];
    
    [_starView mas_makeConstraints:^(MASConstraintMaker *make) {
        // 左对齐
        make.left.equalTo(_appNameLabel.mas_left);
        // 底部对齐
        make.bottom.equalTo(_appImageView.mas_bottom);
        // 设置确定的高度和宽度 是对象加@
        make.width.equalTo(@65);
        make.height.equalTo(@23);
    }];
}