【iOS開發-113】在storyboard上用AutoLayout，純程式碼實現AutoLayout布局方法以及簡單動畫，ios開發autolayout

【iOS開發-113】在storyboard上用AutoLayout，純程式碼實現AutoLayout布局方法以及簡單動畫，ios開發autolayout

（1）在storyboard中使用AutoLayout。這個AutoLayout和autoResizing是衝突的，只能選其一。

——不同級的控制項的相互約束是添加在高層級上。

——同層級的控制項的相互約束是添加在它們的父控制項上。

——不同分支控制項的相互約束是添加在它們向上追溯到的第一個共同父控制項。

這3條規則在代碼建立時有用。利用storyboard時系統自動幫我們添加好了。

（2）用代碼實現AutoLayout。步驟就是先建立布局約束對象，然後把這個對象添加到需要約束的控制項中。

——需要先禁止需要約束的控制項的autoresizing功能。

——添加約束對象之前，得保證該控制項已經添加到各自的父控制項中。

- (void)viewDidLoad {    [super viewDidLoad];    //保證需要約束的控制項已有父控制項    UIView *blueView=[[UIView alloc]init];    blueView.backgroundColor=[UIColor blueColor];    [self.view addSubview:blueView];        //關閉需要約束的控制項的autoresizing    blueView.translatesAutoresizingMaskIntoConstraints=NO;        //定義約束對象，並添加（注意添加到哪裡），寬高100，置中    NSLayoutConstraint *width=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];    [blueView addConstraint:width];        NSLayoutConstraint *height=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];    [blueView addConstraint:height];        NSLayoutConstraint *centerX=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];    [self.view addConstraint:centerX];        NSLayoutConstraint *centerY=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];    [self.view addConstraint:centerY];}

（3）兩個控制項互相約束的代碼，和上面單個控制項的寫法一樣，只不過需要注意的是：控制項是相對於誰計算的；約束添加在自己身上還是父控制項上等。

- (void)viewDidLoad {    [super viewDidLoad];    //保證需要約束的控制項已有父控制項    UIView *blueView=[[UIView alloc]init];    blueView.backgroundColor=[UIColor blueColor];    [self.view addSubview:blueView];        UIView *redView=[[UIView alloc]init];    redView.backgroundColor=[UIColor redColor];    [self.view addSubview:redView];        //關閉需要約束的控制項的autoresizing    blueView.translatesAutoresizingMaskIntoConstraints=NO;    redView.translatesAutoresizingMaskIntoConstraints=NO;        //先調整blueView    NSLayoutConstraint *height=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40];    [blueView addConstraint:height];        NSLayoutConstraint *left=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];    [self.view addConstraint:left];    //注意-20    NSLayoutConstraint *right=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];    [self.view addConstraint:right];        NSLayoutConstraint *top=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];    [self.view addConstraint:top];        //調整redView    NSLayoutConstraint *heightR=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];    [self.view addConstraint:heightR];        NSLayoutConstraint *widthR=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];    [self.view addConstraint:widthR];        NSLayoutConstraint *rightR=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];    [self.view addConstraint:rightR];    //注意redView的top是相對於blueView的bottom定位的    NSLayoutConstraint *topR=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];    [self.view addConstraint:topR];}

（4）利用VFL語言，即visual format language。

——控制項需要用 [ ] 括起來

—— | 表示父控制項的邊界

——乘除法則使用不便，部分還需要使用constraintWithItem:輔助

- (void)viewDidLoad {    [super viewDidLoad];    //保證需要約束的控制項已有父控制項    UIView *blueView=[[UIView alloc]init];    blueView.backgroundColor=[UIColor blueColor];    [self.view addSubview:blueView];        UIView *redView=[[UIView alloc]init];    redView.backgroundColor=[UIColor redColor];    [self.view addSubview:redView];        //關閉需要約束的控制項的autoresizing    blueView.translatesAutoresizingMaskIntoConstraints=NO;    redView.translatesAutoresizingMaskIntoConstraints=NO;        //利用VFL語言，但是有的不能實現，比如寬度的倍數，因為不能用乘除    NSArray *cons0=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}];    [self.view addConstraints:cons0];        NSArray *cons1=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(40)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView,@"redView":redView}];    [self.view addConstraints:cons1];        NSArray *cons2=[NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView)]" options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];    [self.view addConstraints:cons2];}

——其中option的選項，是用在有兩個控制項，需要對齊時用，可以用 | 符號使用多個。

——其中metrics一個存放預留位置號和值得字典。比如如下，當然，我們可以另寫一個NSDictionary字典來存放：

NSArray *cons0=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-|" options:0 metrics:@{@"margin":@20} views:@{@"blueView":blueView}];

——其中views可以有簡便的寫法，如下，用NSDictionaryOfVariableBindings()建立一個鍵值對。

NSArray *cons0=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-|" options:0 metrics:@{@"margin":@20} views:NSDictionaryOfVariableBindings(blueView,redView)];

（5）AutoLayout可以讓Label實現根據內容多少自動增加高度。當然label的行數需要設定為0，即可換行。

（6）AutoLayout也可以做動畫，即改變約束的值。

——動畫效果還需要UIView的animationWithDuration配合。需要注意的是，此處需要先修改好約束值，然後在動畫方法中調用布局方法即layoutIfNeeded。

——其中只有常量constant可以修改，其他的基本都是readonly唯讀，不能修改。

#import "ViewController.h"@interface ViewController ()@property(nonatomic,strong) NSLayoutConstraint *con3;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    .....    NSLayoutConstraint *con3=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];    [self.view addConstraint:con3];    self.con3=con3;}-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{    self.con3.constant=100;    [UIView animateWithDuration:1.0 animations:^{        [self.view layoutIfNeeded];    }];}