iOS開發NSLayoutConstraint代碼自動布局

標籤：適配   block   否則   metrics   ted   pac   方式   mask   cin   

1、NSLayoutConstraint簡介

　　適配介面大多用Masonry工具，也是基於NSLayoutConstraint寫的！通過使用兩個類方法實現自動布局：

+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format                                                                options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics                                                                  views:(NSDictionary<NSString *, id> *)views;+(instancetype)constraintWithItem:(id)view1                        attribute:(NSLayoutAttribute)attr1                        relatedBy:(NSLayoutRelation)relation                           toItem:(nullable id)view2                        attribute:(NSLayoutAttribute)attr2                       multiplier:(CGFloat)multiplier                         constant:(CGFloat)c;

　　1》使用自動布局之前設定view的自動布局約束為NO（view.translatesAutoresizingMaskIntoConstraints = NO）

　　2》UIViewController有個方法- (void)updateViewConstraints;

　　　 UIView有個方法- (void)updateConstraints；在對應的方法中設定自動布局；

 

2、如何使用constraintsWithVisualFormat和VFL語言

　　2.1》constraintsWithVisualFormat方法說明：

+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format                                                                options:(NSLayoutFormatOptions)opts                                                                metrics:(nullable NSDictionary<NSString *,id> *)metrics                                                                  views:(NSDictionary<NSString *, id> *)views;

　　方法說明：此方法通過VFL語言進行適配

　　format：VFL語句字串形式　　opts：枚舉參數 NSLayoutFormatOptions　　metrics：字典 放置VFL語言用到的參數（例如height）對應key　　views：字典 放置VFL語言用到的view對應key

　　2.2》VFL語言簡介

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

具體表示方法：水平方向        H:       　　 垂直方向     V:  　　  Views      [view]關係   　　 >=,==,<=         SuperView    |  　　  空間，間隙-    -優先順序   　　 @value        

　　2.3》簡單使用

　　　　建立一個藍色view，離父視圖上左右距離為20px、高為20：

    UIView *blueView = [[UIView alloc] init];    blueView.backgroundColor = [UIColor blueColor];    blueView.translatesAutoresizingMaskIntoConstraints = NO;    [self.view addSubview:blueView];    NSArray *arr = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[blueView]-|"                                                           options:0                                                           metrics:nil                                                             views:NSDictionaryOfVariableBindings(blueView)];    NSArray *arrV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[blueView(==height)]"                                                            options:0                                                            metrics:@{@"height":@"20"}                                                              views:NSDictionaryOfVariableBindings(blueView)];    [self.view addConstraints:arr];    [self.view addConstraints:arrV];

　　　　在藍色view下方建立一個黃色view，左右距離父視圖40px、上邊離藍色view8px、高度為20px：

    UIView *yellowView = [[UIView alloc] init];    yellowView.backgroundColor = [UIColor yellowColor];    yellowView.translatesAutoresizingMaskIntoConstraints = NO;    [self.view addSubview:yellowView];    NSArray *arr2 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-40-[yellowView]-40-|"                                                           options:0                                                           metrics:nil                                                             views:NSDictionaryOfVariableBindings(yellowView)];    NSArray *arr2V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView]-[yellowView(==height)]"                                                            options:0                                                            metrics:@{@"height":@"20"}                                                              views:NSDictionaryOfVariableBindings(blueView,yellowView)];    [self.view addConstraints:arr2];    [self.view addConstraints:arr2V];

　　　　注意：-：在父視圖中表示20px，同級視圖表示8px；

　　　　　　　參數metrics和views要和VFL語言的參數對應，否則會崩潰；　　

 

3、如何使用constraintWithItem方法

　　3.1》constraintWithItem方法說明：

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

view1：設定的視圖attr1：view1設定的屬性relation：視圖view1和view2的屬性關聯性view2：參照視圖attr2：view2設定的屬性multiplier：視圖view1指定屬性是view2指定屬性的多少倍c：view1指定屬性需要添加的浮點數

　　3.2》簡單使用

　　　　添加一個view位於父視圖中心、寬度相等、高度為父視圖一半：

    UIView *blueView = [[UIView alloc] init];    blueView.backgroundColor = [UIColor blueColor];    blueView.translatesAutoresizingMaskIntoConstraints = NO;    [self.view addSubview:blueView];    NSMutableArray *constraints = [NSMutableArray array];    [constraints addObject:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];    [constraints addObject:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:.5 constant:0.0]];    [constraints addObject:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];    [constraints addObject:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];    [self.view addConstraints:constraints];

 

4、NSLayoutRelation、NSLayoutAttribute、NSLayoutFormatOptions枚舉說明

　　4.1》NSLayoutRelation說明：

typedef NS_ENUM(NSInteger, NSLayoutRelation) {    NSLayoutRelationLessThanOrEqual = -1, //視圖關係小於或等於    NSLayoutRelationEqual = 0,//視圖關係等於    NSLayoutRelationGreaterThanOrEqual = 1,//視圖關係大於或等於};

　　4.2》NSLayoutAttribute說明：

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {    NSLayoutAttributeLeft = 1,//視圖的左邊    NSLayoutAttributeRight,//視圖的右邊    NSLayoutAttributeTop,//視圖的上邊    NSLayoutAttributeBottom,//視圖的下邊    NSLayoutAttributeLeading,//視圖的前邊    NSLayoutAttributeTrailing,//視圖的後邊    NSLayoutAttributeWidth,//視圖的寬度    NSLayoutAttributeHeight,//視圖的高度    NSLayoutAttributeCenterX,//視圖中心的X值    NSLayoutAttributeCenterY,//視圖中心的Y值    NSLayoutAttributeLastBaseline,//視圖的下基準線    NSLayoutAttributeBaseline NS_SWIFT_UNAVAILABLE("Use ‘lastBaseline‘ instead") = NSLayoutAttributeLastBaseline,    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),//視圖的上基準線    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),//視圖的左邊距    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),//視圖的右邊距    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),//視圖的上邊距    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),//視圖的下邊距    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),//視圖的前邊距    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),//視圖的後邊距    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),//視圖的中心X邊距    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),//視圖的中心Y邊距    NSLayoutAttributeNotAnAttribute = 0//無屬性};

　　注意：NSLayoutAttributeLeading和NSLayoutAttributeTrailing表示前、後邊，因為中國書寫是從左向右。如果從右向左則表示後、前邊；

　　　　   NSLayoutAttributeLastBaseline和NSLayoutAttributeFirstBaseline表示基準線，舉例UILabel的上下基準線就是文字的上下邊線；

　　4.3》NSLayoutFormatOptions說明

typedef NS_OPTIONS(NSUInteger, NSLayoutFormatOptions) {    NSLayoutFormatAlignAllLeft = (1 << NSLayoutAttributeLeft),//所有視圖左邊緣對齊。    NSLayoutFormatAlignAllRight = (1 << NSLayoutAttributeRight),//所有視圖右邊緣對齊    NSLayoutFormatAlignAllTop = (1 << NSLayoutAttributeTop),//所有視圖頂部對齊    NSLayoutFormatAlignAllBottom = (1 << NSLayoutAttributeBottom),//所有視圖底部對齊    NSLayoutFormatAlignAllLeading = (1 << NSLayoutAttributeLeading),//視圖目前範圍文字開始的邊緣對齊（英文：左邊，希伯來語：右邊）    NSLayoutFormatAlignAllTrailing = (1 << NSLayoutAttributeTrailing),//視圖目前範圍文字結束的邊緣對齊（英文：右邊，希伯來語：左邊）    NSLayoutFormatAlignAllCenterX = (1 << NSLayoutAttributeCenterX),//視圖中心點x對齊    NSLayoutFormatAlignAllCenterY = (1 << NSLayoutAttributeCenterY),//視圖中心點y對齊    NSLayoutFormatAlignAllLastBaseline = (1 << NSLayoutAttributeLastBaseline),//視圖內容底部基準對齊、有文字就是文字底部    NSLayoutFormatAlignAllBaseline NS_SWIFT_UNAVAILABLE("Use ‘alignAllLastBaseline‘ instead") = NSLayoutFormatAlignAllLastBaseline,    NSLayoutFormatAlignAllFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0) = (1 << NSLayoutAttributeFirstBaseline),,//視圖內容定部基準對齊、有文字就是文字頂部    //根據編輯內容和編寫方向方式進行對齊    NSLayoutFormatAlignmentMask = 0xFFFF,    NSLayoutFormatDirectionLeadingToTrailing = 0 << 16, // default    NSLayoutFormatDirectionLeftToRight = 1 << 16,    NSLayoutFormatDirectionRightToLeft = 2 << 16,    NSLayoutFormatDirectionMask = 0x3 << 16,    NSLayoutFormatSpacingEdgeToEdge API_AVAILABLE(ios(11.0),tvos(11.0)) = 0 << 19, // default    NSLayoutFormatSpacingBaselineToBaseline API_AVAILABLE(ios(11.0),tvos(11.0)) = 1 << 19,    NSLayoutFormatSpacingMask API_AVAILABLE(ios(11.0),tvos(11.0)) = 0x1 << 19,};

 

iOS開發NSLayoutConstraint代碼自動布局