UIKit框架（8）屏幕適配（二）

• AutoLayout介紹

AutoLayout的功能要比AutoResizing強大的多。

     當對一個UIView對象使用了AutoLayout布局后，意味著放棄了通過對象的frame進行修改視圖的位置、尺寸。

     AutoLayout使約束條件，通過自動布局引擎，計算view對象的frame。

     可以認為在AutoLayout中view對象的frame是一個只讀的屬性。

約束的核心公式：

     view1.attr1 = (view2.attr2 * multiplier) + constraint

     其中obj2可以是nil

     除了=關系外，還可以是>= <=的關系

• 代碼適配

添加約束的步驟：

1）禁止被適配view的AutoResizing功能

- (BOOL)translatesAutoresizingMaskIntoConstraints
- (void)setTranslatesAutoresizingMaskIntoConstraints:(BOOL)flag

2）創建約束對象NSLayoutConstraint

+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c

     參數即約束的核心公式

     NSLayoutRelation枚舉：

enum {
   NSLayoutRelationLessThanOrEqual = -1,
   NSLayoutRelationEqual = 0,
   NSLayoutRelationGreaterThanOrEqual = 1,
};
typedef NSInteger NSLayoutRelation;

     NSLayoutAttribute枚舉：

typedef enum: NSInteger {
   NSLayoutAttributeLeft = 1,
   NSLayoutAttributeRight,
   NSLayoutAttributeTop,
   NSLayoutAttributeBottom,
   NSLayoutAttributeLeading,
   NSLayoutAttributeTrailing,
   NSLayoutAttributeWidth,
   NSLayoutAttributeHeight,
   NSLayoutAttributeCenterX,
   NSLayoutAttributeCenterY,
   NSLayoutAttributeBaseline,
   NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
   NSLayoutAttributeFirstBaseline,
   NSLayoutAttributeLeftMargin,
   NSLayoutAttributeRightMargin,
   NSLayoutAttributeTopMargin,
   NSLayoutAttributeBottomMargin,
   NSLayoutAttributeLeadingMargin,
   NSLayoutAttributeTrailingMargin,
   NSLayoutAttributeCenterXWithinMargins,
   NSLayoutAttributeCenterYWithinMargins,
   
   NSLayoutAttributeNotAnAttribute = 0} NSLayoutAttribute;

3）在UIView對象上添加約束對象

- (void)addConstraint:(NSLayoutConstraint *)constraint
- (void)addConstraints:(NSArray *)constraints

將約束添加到哪個view對象上應按照以下規則：

     對于同級view之間的約束關系，添加到它們的父控件上

     對于不同級view之間的約束關系，添加到最近的共同父控件上

     對于有層級關系的兩個view之間約束關系，添加到層次較高的的空間上

注意：約束不能重復添加，不能缺少必要的約束

     添加約束的過程中非常容易出現無法計算出frame的情況

UIView的其他操作約束的方法：

- (NSArray *)constraints
- (void)removeConstraint:(NSLayoutConstraint *)constraint
- (void)removeConstraints:(NSArray *)constraints

• AutoLayout的補充

AutoLayout的動畫：

     代碼中如果修改了約束的數值，則執行下面的代碼，就能產生相應的動畫效果。  

[UIView animateWithDuration:1.0 animations:^{
    [view layoutIfNeeded];
}];

     哪個view中的約束變化了，哪個view對象調用layoutIfNeed方法

     約束的變化應在動畫之前完成。

UILabel、UIButton這類顯示文字的控件使用AutoLayout的好處：

     使用了恰當的約束，能夠使其尺寸自動匹配。

     如設置了UILabel對象的上、左、右的規定邊距，則UILabel的尺寸會根據文字自動適應。

• 約束的VFL方式

     Visual Format Language，可視化格式語言，是蘋果公司為了簡化AutoLayout的編碼而推出的抽象語言。

     其實不能稱之為“語言”，可以認為這僅僅是一種“語法”，其目的是減少代碼使用AutoLayout的編程量

     但實際減少的程度有限，有些約束的功能使用VFL也無法完成，但在實現一些簡單約束時非常有效。

NSLayoutConstraint的另一個創建方法：

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

     format參數：VFL語句

     views參數：VFL中出現的對象“鍵值對”

     metrics：占位符

     返回一組約束對象

VFL語句示意：

如：

canelButton寬72，acceptButton寬50，它們之間間距12

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

wideView寬度大于等于60point，該約束條件優先級為700（優先級最大值為1000，優先級越高的約束越先被滿足）

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

豎直方向上，先有一個redBox，其下方緊接一個高度等于redBox高度的yellowBox

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

水平方向上，Find距離父view左邊緣默認間隔寬度，之后是FindNext距離Find間隔默認寬度；再之后是寬度不小于20的FindField，它和FindNext以及父view右邊緣的間距都是默認寬度。（豎線“|” 表示superview的邊緣）

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

• ZXPAutoLayout

號稱最輕巧的自動布局，簡化了NSLayoutConstraint的繁瑣，采用新穎的鏈式語法，可擴展性強，維護成為低。

使用 zxp_addAutoLayout添加布局， 如：

[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {

}];

單個view的布局關系：

    在superview中的內邊距：

@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^topSpace)(CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^leftSpace)(CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^bottomSpace)(CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^rightSpace)(CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^edgeInsets)(UIEdgeInsets insets);

    如：

[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
        //layout.topSpace(20);
        //layout.bottomSpace(30);
        //layout.leftSpace(40);
        //layout.rightSpace(50);
        layout.edgeInsets(UIEdgeInsetsMake(20, 30, 40, 50));
}];

居中操作：

@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^xCenterByView)(UIView *view,CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^yCenterByView)(UIView *view,CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^centerByView)(UIView *view,CGFloat value);

    參數view應為superview

寬高操作：

@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^widthValue)(CGFloat value);
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^heightValue)(CGFloat value);

     如：

[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
    layout.xCenterByView(self.view, 0);
    layout.yCenterByView(self.view, -100);
    layout.widthValue(100);
    layout.heightValue(100);
}];

兩個view的布局關系：

//與另一個view的內邊距相等
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^edgeEqualTo)(UIView *view);       
//當前的top距離view為value點坐標距離
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^topSpaceByView)(UIView *view,CGFloat value); 
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^leftSpaceByView)(UIView *view,CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^bottomSpaceByView)(UIView *view,CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^rightSpaceByView)(UIView *view,CGFloat value);
//當前top內邊距值與view的相等
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^topSpaceByView)(UIView *view,CGFloat value); 
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^leftSpaceByView)(UIView *view,CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^bottomSpaceByView)(UIView *view,CGFloat value);
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^rightSpaceByView)(UIView *view,CGFloat value);
//與view等寬
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^widthEqualTo)(UIView *view,CGFloat value); 
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^heightEqualTo)(UIView *view, CGFloat value);

     如：

[self.redView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
    layout.xCenterByView(self.view, 0);
    layout.yCenterByView(self.view, -100);
    layout.widthValue(100);
    layout.heightValue(100);
}];
[self.blueView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
    layout.topSpaceByView(self.redView, 100);
    layout.heightEqualTo(self.redView, 0);
    layout.widthEqualTo(self.redView, 0);
    layout.leftSpaceEqualTo(self.redView, 0);
}];

自適應操作：（對UILabel有效）

@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoHeight)();
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoHeightByMin)(CGFloat value);
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoWidth)();
@property (copy,nonatomic,readonly) ZXPAutoLayoutMaker *(^autoWidthByMin)(CGFloat value);

其他操作：

@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^priority)(UILayoutPriority priority); //優先級
@property (copy, nonatomic, readonly) ZXPAutoLayoutMaker *(^multiplier)(CGFloat multiplier); //約束的倍數

     如：

[self.blueView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
    layout.topSpaceByView(self.redView, 100);
    layout.heightEqualTo(self.redView, 0).multiplier(0.5);
    layout.widthEqualTo(self.redView, 0);
    layout.leftSpaceEqualTo(self.redView, 0);
}];