Autolayout

《[一个程序猿的秘密基地](http://www.jianshu.com/collection/7b76c71b2d73?utm_campaign=maleskine&utm_content=collection&utm_medium=reader_share&utm_source=weibo)》专题

前言：本文章第一时间出现在一个程序猿的秘密基地专题中，如果您喜欢类似的文章，请您点击一个程序猿的秘密基地进行关注，在以后的日子里与小编共同成长！

.

1.什么是Autolayout？
2.StoryBoard/NIB使用Autolayout面板介绍
3.代码添加Autolayout约束的规则以及注意事项
4.添加约束的代码指令
5.Demo
6.可以用StoryBoard试试这个小练习

---

1.什么是Autolayout？

Autolayout是AutoResizing的升级版，可以进行界面的动态布局适配，是专门用来布局UI界面的。
它有两个核心概念，一个是参照，一个是约束。

2.StoryBoard/NIB使用Autolayout面板介绍

AutoLayout约束图解.png

3.代码添加Autolayout约束的规则以及注意事项

●每个控件的translatesAutoresizingMaskIntoConstraints属性要设NO（意思是不要将AutoresizingMask转为Autolayout约束，避免跟我们添加的约束产生冲突）；
● 在创建约束之后,需要将其添加到作用的view上
● 在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上

同层级view之间的约束

2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上

两个不同层级view之间的约束

3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上

有层次关系的两个view之间的约束

● 代码实现Autolayout的注意点
● 要先禁止autoresizing功能,设置view的下⾯属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
● 添加约束之前,一定要保证相关控件都已经在各自的父控件上
● 不⽤再给view设置frame

4.添加约束的代码指令

● 一个NSLayoutConstraint对象就代表一个约束
● 创建约束对象的常用方法
+(id)constraintWithItem:(id)view1 
                         attribute:(NSLayoutAttribute)attr1
                         relatedBy:(NSLayoutRelation)relation
                         toItem:(id)view2 
                         attribute:(NSLayoutAttribute)attr2 
                         multiplier:(CGFloat)multiplier 
                         constant:(CGFloat)c;
●  view1 :要约束的控件
●  attr1 :约束的类型(做怎样的约束)
●  relation :与参照控件之间的关系
●  view2 :参照的控件
●  attr2 :约束的类型(做怎样的约束)
●  multiplier :乘数
●  c:常量

5.Demo

Demo竖屏效果图

Demo横屏效果图

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self demo];
}

-(void)demo{
    UIView *blueView=[[UIView alloc]init];
    blueView.backgroundColor=[UIColor blueColor];
    [self.view addSubview:blueView];
    //不要将AutoresizingMask转为Autolayout约束
    blueView.translatesAutoresizingMaskIntoConstraints=NO;
    //宽度约束
    //以高度为例，你可以这么读Autolayout添加约束的代码：谁 的 高 等于 谁 的 高 乘于几 再加上几
    NSLayoutConstraint *widthConstraint=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:300];
    //添加宽度约束给blueView
    [blueView addConstraint:widthConstraint];
    //高度约束
    NSLayoutConstraint *heightConstraint=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:300];
    //添加高度约束给blueView
    [blueView addConstraint:heightConstraint];
    //右边约束
    NSLayoutConstraint *rightConstraint=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
    //添加右边约束给blueView
    [self.view addConstraint:rightConstraint];
    //底部约束
    NSLayoutConstraint *bottomConstraint=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10];
    //添加底部约束给blueView
    [self.view addConstraint:bottomConstraint];
    
}
@end

6.可以用StoryBoard试试这个小练习

StoryBoard界面

竖屏效果图

横屏效果图