自動布局神器 -- ZXPAutoLayout框架的使用

jopen 8年前發布 | 8K 次閱讀 iOS開發 移動開發

什么是ZXPAutoLayout ?


iOS原生的自動布局(NSLayoutConstraint)非常繁瑣, 影響開發進度和可讀性也不利于維護, 正所謂工欲善其事必先利其器 , 有一個良好的自動布局框架, 則會讓我們事半功倍. 而ZXPAutoLayout則是解決這一問題和誕生 . 采用新穎的鏈式語法, 擴展性,可讀性,維護成本也較低.并致力打造最好用,最簡潔,最方便,最輕巧的自動布局.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://blog.csdn.net/biggercoffee/article/details/50136839

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！