iOS_AutoLayout自動布局

目錄：

一、什么是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上

　　2)對於兩個不同層級view之間的約束關系，添加到他們最近的共同父view上

　　3）對於有層次關系的兩個view之間的約束關系，添加到層次較高的父view上

　

　二、創建autoLayout的方法

　　1、手動布局

　　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

　　運行效果圖，如下所示：

　　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]

　　

　　2.[button(>=50)]

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

　　

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

　　5.[maroonView][blueView]

　　6.[button(100@20)]

　　7.[button(==button2)]

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

　　

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

　　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