最輕巧的自動布局
編輯：IOS開發基礎
什麼是ZXPAutoLayout?
iOS原生的自動布局(NSLayoutConstraint)非常繁瑣，影響開發進度和可讀性也不利於維護，正所謂工欲善其事必先利其器，有一個良好的自動布局框架，則會讓我們事半功倍。而ZXPAutoLayout則是解決這一問題和誕生。采用新穎的鏈式語法，可擴展，可讀性強，維護成本也較低。（github地址）
ps : autolayout簡單來說就是 適配iPhone機型並且是0數學布局和兼容橫豎屏,如不懂童鞋, 請自尋網上查閱。
舉個例子:
在使用ZXPAutoLayout之前,也就是原生的iOS布局,要添加一個約束是這樣的:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view //第一個view attribute:NSLayoutAttribute //約束屬性, 比如上下左右寬高等間距 relatedBy:NSLayoutRelationEqual //相等,或者大於等於,小於等於 toItem:secondView //第二個view,也就是第一個view是要參照第二個view的 attribute:NSLayoutAttribute //參照第二個view的屬性 multiplier:multiplier //比例0--1 constant:0]; //約束值
就這樣隨便加一個約束就如此的繁瑣，更何況一個view最起碼有上邊距，左邊距和寬高，也就是所謂的x、y、width、height四個基本屬性。就相當於以上那復雜的代碼就要最少寫四次。
而現在用ZXPAutoLayout來給一個view添加上邊距、左邊距以及寬高。
//設置一個背景為半透明紅色的view,上下左右四邊都距離superview的距離為10
UIView *bgView = [UIView new];
[self.view addSubview:bgView];
bgView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.5];
[bgView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
//上下左右四邊都距離superview的距離為10
layout.edgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));
//也可以如下這行代碼來設置,但要同時設置top,left,bottom,right.推薦以上寫法,比較簡潔.
//layout.topSpace(10).leftSpace(10).bottomSpace(10).rightSpace(10);
}];下載ZXPAutoLayout!
第一種方式：直接去github上下載https://github.com/biggercoffee/ZXPAutoLayout
第二種方式: 直接在Cocoapods裡搜索ZXPAutoLayout (不知道什麼是cocoapods或者使用方法者請自行百度和Google，網上一大堆資料)。搜索命令: pod search zxpautolayout 然後在安裝到你的cocoapods裡。
注意：有些用Cocoapods搜索出來的版本不是最新或者無法搜索到的，請升級一下cocoapods即可。
如何使用它?
在需要的地方導入ZXPAutoLayout.h頭文件即可
設置一個紅色的view，與self.view保持一致，並適配各個iPhone機型和橫豎屏。
//設置一個背景為半透明紅色的view
UIView *bgView = [UIView new];
[self.view addSubview:bgView];
bgView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.5];
[bgView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.edgeEqualTo(self.view); //位置和寬度等於self.view
//也可以如下兩種寫法
//上下左右四邊都距離superview的距離為0
//layout.edgeInsets(UIEdgeInsetsMake(0, 0, 0, 0));
//也可以如下這行代碼來設置,但要同時設置top,left,bottom,right.推薦以上寫法,比較簡潔.
//layout.topSpace(10).leftSpace(10).bottomSpace(10).rightSpace(10);
}];設置一個藍色view，設置在superview裡的距離和設置自身的寬高。
UIView *blueView = [UIView new];
[bgView addSubview:blueView];
blueView.backgroundColor = [UIColor blueColor];
[blueView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpace(20); //設置在superview裡的上邊距
layout.leftSpace(20); //設置在superview裡的左邊距
layout.rightSpace(20); //設置在superview裡的右邊距
layout.heightValue(100); //設置高度
// 注意:
// 1.設置了左邊距和右邊距, 會自動拉升寬度,所以如上代碼並沒有設置寬度.
// 2.如上代碼可以寫成一行,比如layout.topSpace(20).leftSpace(20)
// 3.但是不推薦全部寫在一行, 閱讀性太差 , 而且在一行代碼裡寫了諸多屬性也不利於DEBUG
}];設置一個灰色view , 設置參照於其他view的距離和等寬等距離屬性
UIView *grayView = [UIView new];
[bgView addSubview:grayView];
grayView.backgroundColor = [UIColor grayColor];
[grayView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
/*
上邊距參照blueview, 並加10的距離.
意思就是說上邊距在blueView的下邊,並加上10的間距.
如果只是想在blueview的下邊沒有距離的話, 第二個參數寫為0即可
*/
layout.topSpaceByView(blueView,10);
/*
左邊距等同於blueView的左邊距
第二個參數是距離的值, 如果為0就代表左邊距和blueview相等
如果不為0,則先相等於blueview的距離,然後在加上第二參數的距離
*/
layout.leftSpaceEqualTo(blueView,0);
/*
寬度等同於bluewView
multiplier是倍數, 可選屬性,如果不寫此屬性寬度就是等同於blueview
如果寫了此屬性,如下示例, 則寬度等同於blueview的 0.5 倍
*/
layout.widthEqualTo(blueView,0).multiplier(0.5);
layout.heightValue(40); //設置高度
}];UILabel的文字自適應,只需要設置autoHeight屬性即可
UILabel *label = [UILabel new];
[self.view addSubview:label];
label.backgroundColor = [UIColor purpleColor];
label.textColor = [UIColor whiteColor];
label.text = @"這是文字自適應, 這是文字自適應 ,這是文字自適應 .這是文字自適應";
[label zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
//設置上邊距在grayView的下邊,並且加10的距離
layout.leftSpaceEqualTo(grayView,10);
layout.bottomSpace(20); //設置在superview裡的下邊距
layout.widthValue(100);//設置寬度
layout.autoHeight(); //自適應高度,只針對UILabel有效
}];等寬並水平對齊第一種方式
UIView *view1 = [UIView new];
[self.view addSubview:view1];
view1.backgroundColor = [UIColor blueColor];
UIView *view2 = [UIView new];
[self.view addSubview:view2];
view2.backgroundColor = [UIColor blackColor];
UIView *view3 = [UIView new];
[self.view addSubview:view3];
view3.backgroundColor = [UIColor blueColor];
[view1 zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpaceByView(grayView,10);
layout.leftSpace(20);
layout.heightValue(40);
layout.widthEqualTo(view2);
}];
[view2 zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpaceEqualTo(view1,0);
layout.leftSpaceByView(view1,20);
layout.heightValue(40);
layout.widthEqualTo(view3);
}];
[view3 zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpaceEqualTo(view1,0);
layout.leftSpaceByView(view2,20);
layout.rightSpace(20);
layout.heightValue(40);
}];等寬並水平對齊第二種方式 -- ZXPStackView的使用
ZXPStackView *stackView = [ZXPStackView new];
[self.view addSubview:stackView];
stackView.backgroundColor = [UIColor blackColor];
/只需要設置stackView的寬高和位置即可
[stackView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpaceByView(grayView,20);
layout.leftSpace(0);
layout.rightSpace(0);
layout.heightValue(100);
}];
UIView *view1 = [UIView new];
[stackView addSubview:view1];
view1.backgroundColor = [UIColor blueColor];
UIView *view2 = [UIView new];
[stackView addSubview:view2];
view2.backgroundColor = [UIColor yellowColor];
UIView *view3 = [UIView new];
[stackView addSubview:view3];
view3.backgroundColor = [UIColor redColor];
//stack的內邊距
stackView.padding = UIEdgeInsetsMake(10, 10, 10,10);
//view直接的距離
stackView.space = 10;
//調用此方法會給subviews自動添加約束條件,進行等寬或者等高排列
[stackView layoutWithType:ZXPStackViewTypeHorizontal];ZXPStackView之等高垂直對齊
只需要調用ZXPStackView的layoutWithType: 方法，並傳入ZXPStackViewTypeVertical即可實現，如以上代碼一樣。只是布局所傳入的類型參數不同而已，內部會根據所傳入的布局類型，自動進行約束的添加。
ZXPStackView *stackView = [ZXPStackView new];
[self.view addSubview:stackView];
stackView.backgroundColor = [UIColor blackColor];
//只需要設置stackView的寬高和位置即可
[stackView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {
layout.topSpaceByView(grayView,20);
layout.leftSpace(0);
layout.rightSpace(0);
layout.heightValue(100);
}];
UIView *view1 = [UIView new];
[stackView addSubview:view1];
view1.backgroundColor = [UIColor blueColor];
UIView *view2 = [UIView new];
[stackView addSubview:view2];
view2.backgroundColor = [UIColor yellowColor];
UIView *view3 = [UIView new];
[stackView addSubview:view3];
view3.backgroundColor = [UIColor redColor];
//stack的內邊距
stackView.padding = UIEdgeInsetsMake(10, 10, 10,10);
//view直接的距離
stackView.space = 10;
//調用此方法會給subviews自動添加約束條件,進行等寬或者等高排列
[stackView layoutWithType:ZXPStackViewTypeVertical];注意: ZXPStackView的subview不需要添加約束，在調用layoutWithType:方法的時候，內部會自動進行約束的添加。
總結
本篇文章講解了ZXPAutoLayout的基本使用和常用api的方法。比如如何設置一個view的約束，或者等寬等高，位置相對於某個view的某一邊，寬高又相對於某一個view或者等比例的常用apis。如有問題或者寫的不好地方留言即可~!
