AutoLayout之代碼實現

AutoLayout官方文檔

:fa-crosshairs:注意：

:fa-bomb:若是使用autoLayout則意味着 View的frame爲0

:fa-bomb:並且不能經過改變frame來實現動畫效果，動畫方案參照3

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

:fa-crosshairs:在使用AutoLayout時須要如下兩個準備

:fa-hand-o-right:[view setTranslatesAutoresizingMaskIntoConstraints:NO]; //關閉自動伸縮

:fa-hand-o-right:適配位置選擇

- UIViewController：**[- (void)updateViewConstraints]**
- UIView：**[- (void)updateConstraints]**

好處：能夠集中將一個controller和view的約束適配在一個方法中

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

:fa-crosshairs:約束分爲三類：

①設置Size

②位置間約束

③對齊約束

1.經過NSLayoutConstraint + VFL-Visual Format Language來設置

1.1 VFL-Visual Format Language語法簡介

V： 表示垂直方向或者高度

    H： 表示水平方向或者寬度

    |  表示父視圖

    [view]  表示一個名字爲view的視圖

    —  用來間隔視圖

    ==、<=、>=、

    @"H:|-10-[view]-10-|"
    表示view在水平方向左邊距離父視圖10，右邊距離父視圖也是10
	
    
    @"H:|-15-[buttonOne(80)]-5-[buttonTwo(90)]|" 
    表示buttonOne在水平方向左邊距離父視圖是15，自己寬度是80，
    右邊與buttonTwo的距離爲5，buttonTwo的寬度爲90
	
    @"V:|-(>=15)-[buttonOne(20)]"

1.2 建立約束

NSArray *array = [NSLayoutConstraint constraintsWithVisualFormat:(NSString*)format
											options:(NSLayoutFormatOptions)opts
											metrics:(nullable NSDictionary<NSString,id> *)metrics
											  views:(NSDictionary<NSString*,id> *)views];

參數說明:

format ：VFL語句

opts ：約束類型

metrics ：VFL語句中用到的具體數值

views ：VFL語句中用到的控件,NSDictionaryOfVariableBindings(...)

例子：

NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSArray *conts2 = [NSLayoutConstraint 
	constraintsWithVisualFormat:@"V:[blueView(==blueHeight)]-margin-|" 
							options:0 
							metrics:@{@"blueHeight" : @40, @"margin" : @20}
							  views:views];

//設置高度、垂直約束
[NSLayoutConstraint constraintsWithVisualFormat:@"V:[imagevew(60)]"
                                            options:0
                                            metrics:nil
                                              views:views];
//如下只適合view沒有寬度和高度的場合，不然會報錯
[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[prgrssView]-|" 
										options:NSLayoutFormatAlignAllCenterY 
										metrics:nil 
										  views:views]];

1.3 例子(距離父View上下左右邊距爲0)

-(void)addSubviewAndFit:(UIView*)parentView child:(UIView*)childView
{
    parentView.translatesAutoresizingMaskIntoConstraints = NO;
    childView.translatesAutoresizingMaskIntoConstraints = NO;
    [parentView addSubview:childView];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(childView);
    NSArray *vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[childView]-0-|"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:views];
    [parentView addConstraints:vConstraints];
    NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[childView]-0-|"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:views];
    [parentView addConstraints:hConstraints];
    
    [parentView layoutIfNeeded];
}

2. 經過NSLayoutConstraint類自帶函數設置

NSLayoutConstraint *constant = [NSLayoutConstraint constraintWithItem:(id)item
							 attribute:(NSLayoutAttribute)attribute
							 relatedBy:(NSLayoutRelation)relation
                                toItem:(id)otherItem
							 attribute:(NSLayoutAttribute)otherAttribute
							multiplier:(CGFloat)multiplier
							  constant:(CGFloat)constant]

參數說明:

Item:被約束對象

attribute:被約束對象的關係

relatedBy:約束描述

toItem:約束源

attribute:約束源對象的關係

multiplier:約束係數

constant:約束常數

對照公式：view1.attr1 <relation> view2.attr2 * multiplier + constant

例子：

[NSLayoutConstraint constraintWithItem:view1
                        attribute:NSLayoutAttributeLeft
                        relatedBy:NSLayoutRelationEqual
                           toItem:view2
                        attribute:NSLayoutAttributeRight
                       multiplier:1
                         constant:10]

等價於 ： "H:[view2]-10-[view1]"

//垂直居中約束

[NSLayoutConstraint constraintWithItem:imagevew 
							 attribute:NSLayoutAttributeCenterY
							 relatedBy:NSLayoutRelationEqual 
								toItem:self.view 
							 attribute:NSLayoutAttributeCenterY 
							multiplier:1 
							  constant:0];

//水平居中約束

[NSLayoutConstraint constraintWithItem:imagevew 
							 attribute:NSLayoutAttributeCenterX 
							 relatedBy:NSLayoutRelationEqual 
							    toItem:self.view 
							 attribute:NSLayoutAttributeCenterX 
							multiplier:1 
							  constant:0];
[self.view addConstraint: constraint];

3.LayoutAnchors－IOS9新增API：

3.1 簡介

比NSLayoutConstraint更加簡介，方便的API

:fa-bomb:12種約束

@property(readonly, strong) NSLayoutXAxisAnchor *leadingAnchor;
@property(readonly, strong) NSLayoutXAxisAnchor *trailingAnchor;
@property(readonly, strong) NSLayoutXAxisAnchor *leftAnchor;
@property(readonly, strong) NSLayoutXAxisAnchor *rightAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *topAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *bottomAnchor;

@property(readonly, strong) NSLayoutDimension   *widthAnchor;
@property(readonly, strong) NSLayoutDimension   *heightAnchor;

@property(readonly, strong) NSLayoutXAxisAnchor *centerXAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *centerYAnchor;

@property(readonly, strong) NSLayoutYAxisAnchor *firstBaselineAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *lastBaselineAnchor;

:fa-bomb:NSLayoutAnchor方法

//等於
- (NSLayoutConstraint *)constraintEqualToAnchor:(NSLayoutAnchor<AnchorType> *)anchor constant:(CGFloat)c;

//大於等於
- (NSLayoutConstraint *)constraintGreaterThanOrEqualToAnchor:(NSLayoutAnchor<AnchorType> *)anchor constant:(CGFloat)c;

//小於等於
- (NSLayoutConstraint *)constraintLessThanOrEqualToAnchor:(NSLayoutAnchor<AnchorType> *)anchor constant:(CGFloat)c;

:fa-bomb: NSLayoutDimension方法(只適用於width，height)

//等於
- (NSLayoutConstraint *)constraintEqualToAnchor:(NSLayoutDimension *)anchor multiplier:(CGFloat)m constant:(CGFloat)c;

//大於等於
- (NSLayoutConstraint *)constraintGreaterThanOrEqualToAnchor:(NSLayoutDimension *)anchor multiplier:(CGFloat)m constant:(CGFloat)c;

//小於等於
- (NSLayoutConstraint *)constraintLessThanOrEqualToAnchor:(NSLayoutDimension *)anchor multiplier:(CGFloat)m constant:(CGFloat)c;

3.2使用方法Demo

[redView.leadingAnchor constraintEqualToAnchor:blueView.trailingAnchor constant:8];

4.AutoLayout模式實現動畫

實現動畫效果傳統的作法是改變它的一些屬性，在平移動畫中主要是改變它的frame座標。

可是在AutoLayout中frame都是0應該如何處理呢。這裏筆者由難到易提供三種解決方案

:fa-bomb:1.使用[self.viewlayoutIfNeeded]方法動態刷新約束

:fa-bomb:2.改變view的bounds屬性

:fa-bomb:3.改變view的transform屬性 ｜－好比說網上平移10個距離：self.transform = CGAffineTransformMakeTranslation(0, -10);

5. UIView+AutoLayout的實現

UIView＋AutoLayout是一個第三方的開源庫: https://github.com/smileyborg/UIView-AutoLayout