《[一个程序猿的秘密基地](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界面
竖屏效果图
横屏效果图
