autolayout

UIViewAutoresizing只能控制父子视图之间的布局

首先父视图要允许子视图自动伴随父视图变化而变化

然后子视图自己设置怎么伴随变化

 

//父视图设置父子视图自适应/停靠模式

    _redView.autoresizesSubviews = YES;//允许子视图伴随父视图自动变化

//子视图设置子视图的自适应模式

    blueView.autoresizingMask

 

 

autolayout  iOS6的时候出来的

 

sizeclass  iOS8的时候出来的

 

github

 

一.自动布局(多屏适配)

1.为什么使用自动布局

iphone手机的分辨率越来越多,有320*480,   640*960,  640*1136,  750*1334,  1080*1920

使用代码控制frame坐标和大小的化,会花费大量时间精力.

为了解决适配问题,苹果推出了自动布局

 

2.自动布局原理

通过给视图添加约束的方式,使视图在任何屏幕上都可以正常显示

 

autolayout 用 constraints(约束) 来控制 控件的大小和位置 

 

auto layout 加约束条件 问题1:要么加少了 起不到作用，2.加多了产生了冲突 有可能崩溃

 

3.如何给视图添加约束

Xcode—>Editor—>Pin

 

4.有哪些约束

 

1).Width     //设置视图固定宽度

2).Height //设置视图固定高度

 

3).Horizontal Spacing     //同级视图之间的横向间距

4).Vertical Spacing //同级视图之间的纵向间距

 

5).Leading Space to SuperView       //与父视图的左间距

6).Trailing Space to SuperView         //与父视图的右间距

7).Top Space to SuperView              //与父视图的上间距

8).Botton Space to SuperView        //与父视图的下间距

 

9).Widths Equally                               //设置同级视图宽度比例

10).Height Equally //设置同级视图高度比例  

 

    NSLayoutConstraint *constraint =

    [NSLayoutConstraint

     constraintWithItem:self.contentView

              attribute:NSLayoutAttributeWidth

              relatedBy:NSLayoutRelationEqual

                 toItem:nil

              attribute:0

             multiplier:1.0

               constant:1000];

    

    NSLayoutConstraint *constraint2 =

    [NSLayoutConstraint

     constraintWithItem:self.contentView

     attribute:NSLayoutAttributeHeight

     relatedBy:NSLayoutRelationEqual

     toItem:nil

     attribute:0

     multiplier:1.0

     constant:200];

    

    [self.contentView addConstraint:constraint];

    [self.contentView addConstraint:constraint2];

    

    NSDictionary *views = NSDictionaryOfVariableBindings(_contentView);

    

//    NSDictionary *dict = @{@"_contentView": _contentView};

    

    NSArray *constraints =

    [NSLayoutConstraint constraintsWithVisualFormat:@"H:[_contentView(1000)]" options:0 metrics:nil views:views];

    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[_contentView(200)]" options:0 metrics:nil views:views];

    

    [_contentView addConstraints:constraints];

    [_contentView addConstraints:constraints2];

 

===================================================

VFL 语言添加约束

 

UIView *redView = [[UIView alloc] initWithFrame:CGRectZero];

    redView.backgroundColor = [UIColor redColor];

    // 通常都设置成NO

    redView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:redView];

    

    UIView *blueView = [[UIView alloc] initWithFrame:CGRectZero];

    blueView.backgroundColor = [UIColor blueColor];

    // 通常都设置成NO

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:blueView];

    

    NSDictionary *views = NSDictionaryOfVariableBindings(redView, blueView);

    //NSDictionary *dict = @{@“redView”:redView,@“blueView”: blueView};

 

 

    NSArray *constraints =

    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[redView(100)]" options:0 metrics:nil views:views];

    [self.view addConstraints:constraints];

    

    NSArray *constraints2 =

    [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[redView(50)]" options:0 metrics:nil views:views];

    [self.view addConstraints:constraints2];

    

    NSArray *constraints3 =

    [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView]-50-[blueView(==redView)]" options:0 metrics:nil views:views];

    [self.view addConstraints:constraints3];

    

    NSArray *constraints4 =

    [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView]-50-[blueView(==redView)]" options:0 metrics:nil views:views];

    [self.view addConstraints:constraints4];

 

 

 

5.用代码做自动布局

 

使用第三方Masonry库

 

[topView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(self.view.mas_top).with.offset(0); //topView上边距与self.view上边距为0

        make.left.equalTo(self.view.mas_left).with.offset(0); //topView左边距与self.view左边距为0

        make.right.equalTo(self.view.mas_right).with.offset(0); //topView右边距与self.view右边距为0

        make.height.equalTo(@64); //topView宽度固定为64个像素

    }];

 

 

[tableView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(topView.mas_bottom).with.offset(0); //tableView上边距与self.view下边距为0

         make.bottom.equalTo(bottomView.mas_top).with.offset(0); //tableView下边距与self.view上边距为0

         make.left.equalTo(self.view.mas_left).with.offset(0); //tableView左边距与self.view左边距为0

         make.right.equalTo(self.view.mas_right).with.offset(0); //tableView右边距与self.view右边距为0

    }];

//从下往上,从右往左,都是倒推,是负数.

UIButton *topButton  = [UIButton buttonWithType:UIButtonTypeSystem];

    topButton.backgroundColor = [UIColor grayColor];

    [topView addSubview:topButton];

    [topButton mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(topView.mas_top).with.offset(20);

        //从下往上,从右往左,都是倒推,是负数.

        make.bottom.equalTo(topView.mas_bottom).with.offset(-5);

        make.right.equalTo(topView.mas_right).with.offset(-20);

        make.width.equalTo(@100);

    }];

[table mas_makeConstraints:^(MASConstraintMaker *make) {

        make.left.equalTo(self.view.mas_left).with.offset(0);

        make.right.equalTo(self.view.mas_right).with.offset(0);

        //table的上边距和topView的下边距为0

        make.top.equalTo(topView.mas_bottom).with.offset(0);

         //table的下边距和bottomView的上边距为0

        make.bottom.equalTo(bottomView.mas_top).with.offset(0);

    }];