iOS_AutoLayout自動佈局

目錄：

1、什麼是AutoLayout?

2、建立autoLayout的方法

3、VFL語言

 

 

1、什麼是AutoLayout?

　　Autolayout是一種「自動佈局」技術，專門用來佈局UI界面的，Autolayout自iOS6開始引入，因爲Xcode 4的不給力，當時並無獲得很大推廣。自iOS 7（Xcode 5）開始，Autolayout的開發效率獲得很大的提高，Autolayout能很輕鬆地解決屏幕適配的問題。蘋果官方也推薦開發者儘可能使用Autolayout來佈局UI界面。

　　一、Autolayout的2個核心概念

　　（1）參照：將某個UI控件做爲參照標示，進行肯定該控件的位置；

　　（2）約束：爲控件的佈局進行加入限定，實現不管在ipad、iPhone設備上都能按照限定的格式、位置進行顯示。

　　二、添加約束的規則

　　在添加時要注意目標view須要遵循如下規則：

　　1）對於兩個同層級view之間的約束關係，添加到它們的父view上

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

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

　

　2、建立autoLayout的方法

　　一、手動佈局

　　二、純代碼方式

　　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 ：常量

3、VFL語言

　　VFL全稱是Visual Format Language，翻譯過來是「可視化格式語言」，VFL是蘋果公司爲了簡化Autolayout的編碼而推出的抽象語言。

　　一、簡單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