（写在开头：本文转自网上一位大神博客，原始文章链接已在下面贴出，感谢作者的无私解答，如有侵权或者其他问题，请及时联系本人）
本文作者信息：
作者：零零圈圈
链接：http://www.cnblogs.com/xjf125/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
目录：

一、什么是AutoLayout?

二、创建autoLayout的方法

三、VFL语言

一、什么是AutoLayout?

Autolayout是一种“自动布局”技术，专门用来布局UI界面的，Autolayout自iOS6开始引入，由于Xcode 4的不给力，当时并没有得到很大推广。自iOS 7（Xcode 5）开始，Autolayout的开发效率得到很大的提升，Autolayout能很轻松地解决屏幕适配的问题。苹果官方也推荐开发者尽量使用Autolayout来布局UI界面。

1、Autolayout的2个核心概念

（1）参照：将某个UI控件作为参照标示，进行确定该控件的位置；

（2）约束：为控件的布局进行加入限定，实现无论在ipad、iPhone设备上都能按照限定的格式、位置进行显示。

2、添加约束的规则

在添加时要注意目标view需要遵循以下规则：

1）对于两个同层级view之间的约束关系，添加到它们的父view上

image

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

image

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

image

　二、创建autoLayout的方法

1、手动布局

image

2、纯代码方式

2.1代码实现Autolayout的步骤

（1）利用NSLayoutConstraint类创建具体的约束对象

（2）添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;

- (void)addConstraints:(NSArray *)constraints;

案例代码：

import "ViewController.h"

@interface ViewController ()
@property(strong,nonatomic)UIView *view1;
@property(strong,nonatomic)UIView *view2;
@end

@implementation ViewController

• (void)viewDidLoad {
  [super viewDidLoad];
  //创建view1
  self.view1 = [[UIView alloc]init];
  self.view1.backgroundColor = [UIColor redColor];
  self.view1.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.view1];

  //创建view2
  self.view2 = [[UIView alloc]init];
  self.view2.backgroundColor = [UIColor yellowColor];
  self.view2.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.view2];

  //创建约束
  //设置view1的左边距
  NSLayoutConstraint *lcLeft = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20];
  //设置view1的下边距
  NSLayoutConstraint *lcBottom = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
  //设置view1与view2等宽
  NSLayoutConstraint *lcEqualWidth = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view2 attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
  //设置view1与view2等高
  NSLayoutConstraint *lcEqualHeight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
  //设置view2的右边距
  NSLayoutConstraint *lcRight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20];
  //设置view2的下边距
  NSLayoutConstraint *lcBottom2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
  //设置view1与view2的间隔
  NSLayoutConstraint *lcGap = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:20];
  //添加约束到组
  [self.view addConstraints:@[lcLeft,lcBottom,lcRight,lcBottom2,lcEqualHeight,lcEqualWidth,lcGap]];
  //设置view的高度
  NSLayoutConstraint *lcFixedHeight = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:200];
  [self.view1 addConstraint:lcFixedHeight];
  }
  @end

运行效果图，如下所示：

image

2.2代码实现Autolayout需要注意以下三点：

（1）要先禁止autoresizing功能，设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints = NO;

（2）添加约束之前，一定要保证相关控件都已经在各自的父控件上

（3）不用再给view设置frame

2.3创建约束对象的常用方法

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(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全称是Visual Format Language，翻译过来是“可视化格式语言”，VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言。

1、简单VFL示例：

1.[button]-[textField]

image

2.[button(>=50)]

image

3.|-50-[purpleBox]-50-|

image

4.V:[topField]-10-[bottomField]

image

5.[maroonView][blueView]

image

6.[button(100@20)]

image

7.[button(==button2)]

image

8.[flexibleButton(>=70,<=100)]

image

9.|-[find]-[findNext]-[findField(>=20)]-|

image

2.复杂示例（带说明）：

H:[cancelButton(72)]-12-[acceptButton(50)]

说明：canelButton宽72，acceptButton宽50，它们之间间距12

H:[wideView(>=60@700)]

说明：wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

V:[redBox]-[yellowBox(==redBox)]

说明：竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

说明：水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|”表示superview的边缘）

3.使用VFL来创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

参数说明：

（1）format ：VFL语句

（2）opts ：约束类型

（3）metrics ：VFL语句中用到的具体数值

（4）views ：VFL语句中用到的控件

案例分析：通过VFL语句实现上个案例

import "ViewController.h"

@interface ViewController ()
@property(strong,nonatomic)UIView *view1;
@property(strong,nonatomic)UIView *view2;

@end

@implementation ViewController

• (void)viewDidLoad {
  [super viewDidLoad];
  //创建view1
  self.view1 = [[UIView alloc]init];
  self.view1.backgroundColor = [UIColor redColor];
  self.view1.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.view1];
  //创建view2
  self.view2 = [[UIView alloc]init];
  self.view2.backgroundColor = [UIColor blueColor];
  self.view2.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.view2];

  //使用VFL语言添加约束
  NSDictionary *metrics = @{@"gap":@20,@"height":@200};
  NSDictionary *viewsDic =@{@"view1":self.view1,@"view2":self.view2};
  NSArray *layoutConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-gap-[view1]-gap-[view2(==view1)]-gap-|" options:NSLayoutFormatDirectionLeftToRight metrics:metrics views:viewsDic];
  NSArray *layoutConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1(height)]-gap-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:viewsDic];
  NSArray *layoutConstraints3 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2(==view1)]-gap-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:metrics views:viewsDic];
  [self.view addConstraints:layoutConstraints1];
  [self.view addConstraints:layoutConstraints2];
  [self.view addConstraints:layoutConstraints3];

}

@end
出处：http://www.cnblogs.com/xjf125/ 本文版权归作者和博客园共有，欢迎转载。 但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。