最輕巧的自動布局--ZXPAutoLayout框架

jopen 10年前發布 | 8K 次閱讀 CocoaPods 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。如有問題或者寫的不好地方留言即可~!

來自： http://www.cocoachina.com/ios/20160113/14974.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1452698700105.html

CocoaPods iOS開發移動開發

最輕巧的自動布局--ZXPAutoLayout框架

什么是ZXPAutoLayout?

下載ZXPAutoLayout!

如何使用它?

總結

相關經驗

相關資訊

相關文檔

目錄