最轻巧的自动布局--ZXPAutoLayout框架

什么是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。如有问题或者写的不好地方留言即可~!