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

2016-01-16 19:20:16 | 来源：玩转帮会 | 投稿：佚名 | 编辑：小柯

原标题：最轻巧的自动布局–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=[UIViewnew];
[self.viewaddSubview:bgView];
bgView.backgroundColor=[[UIColorredColor]colorWithAlphaComponent:.5];
[bgViewzxp_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=[UIViewnew];
[self.viewaddSubview:bgView];
bgView.backgroundColor=[[UIColorredColor]colorWithAlphaComponent:.5];
[bgViewzxp_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=[UIViewnew];
[bgViewaddSubview:blueView];
blueView.backgroundColor=[UIColorblueColor];
[blueViewzxp_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=[UIViewnew];
[bgViewaddSubview:grayView];
grayView.backgroundColor=[UIColorgrayColor];
[grayViewzxp_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=[UILabelnew];
[self.viewaddSubview:label];
label.backgroundColor=[UIColorpurpleColor];
label.textColor=[UIColorwhiteColor];
label.text=@"这是文字自适应,这是文字自适应,这是文字自适应.这是文字自适应";
[labelzxp_addConstraints:^(ZXPAutoLayoutMaker*layout){
//设置上边距在grayView的下边,并且加10的距离
layout.leftSpaceEqualTo(grayView,10);
layout.bottomSpace(20);//设置在superview里的下边距
layout.widthValue(100);//设置宽度
layout.autoHeight();//自适应高度,只针对UILabel有效
}];

等宽并水平对齐第一种方式

UIView*view1=[UIViewnew];
[self.viewaddSubview:view1];
view1.backgroundColor=[UIColorblueColor];
UIView*view2=[UIViewnew];
[self.viewaddSubview:view2];
view2.backgroundColor=[UIColorblackColor];
UIView*view3=[UIViewnew];
[self.viewaddSubview:view3];
view3.backgroundColor=[UIColorblueColor];
[view1zxp_addConstraints:^(ZXPAutoLayoutMaker*layout){
layout.topSpaceByView(grayView,10);
layout.leftSpace(20);
layout.heightValue(40);
layout.widthEqualTo(view2);
}];
[view2zxp_addConstraints:^(ZXPAutoLayoutMaker*layout){
layout.topSpaceEqualTo(view1,0);
layout.leftSpaceByView(view1,20);
layout.heightValue(40);
layout.widthEqualTo(view3);
}];
[view3zxp_addConstraints:^(ZXPAutoLayoutMaker*layout){
layout.topSpaceEqualTo(view1,0);
layout.leftSpaceByView(view2,20);
layout.rightSpace(20);
layout.heightValue(40);
}];

等宽并水平对齐第二种方式 — ZXPStackView的使用

ZXPStackView*stackView=[ZXPStackViewnew];
[self.viewaddSubview:stackView];
stackView.backgroundColor=[UIColorblackColor];
/只需要设置stackView的宽高和位置即可
[stackViewzxp_addConstraints:^(ZXPAutoLayoutMaker*layout){
layout.topSpaceByView(grayView,20);
layout.leftSpace(0);
layout.rightSpace(0);
layout.heightValue(100);
}];
UIView*view1=[UIViewnew];
[stackViewaddSubview:view1];
view1.backgroundColor=[UIColorblueColor];
UIView*view2=[UIViewnew];
[stackViewaddSubview:view2];
view2.backgroundColor=[UIColoryellowColor];
UIView*view3=[UIViewnew];
[stackViewaddSubview:view3];
view3.backgroundColor=[UIColorredColor];
//stack的内边距
stackView.padding=UIEdgeInsetsMake(10,10,10,10);
//view直接的距离
stackView.space=10;
//调用此方法会给subviews自动添加约束条件,进行等宽或者等高排列
[stackViewlayoutWithType:ZXPStackViewTypeHorizontal];

ZXPStackView之等高垂直对齐

只需要调用ZXPStackView的layoutWithType: 方法，并传入ZXPStackViewTypeVertical即可实现，如以上代码一样。只是布局所传入的类型参数不同而已，内部会根据所传入的布局类型，自动进行约束的添加。

ZXPStackView*stackView=[ZXPStackViewnew];
[self.viewaddSubview:stackView];
stackView.backgroundColor=[UIColorblackColor];
//只需要设置stackView的宽高和位置即可
[stackViewzxp_addConstraints:^(ZXPAutoLayoutMaker*layout){
layout.topSpaceByView(grayView,20);
layout.leftSpace(0);
layout.rightSpace(0);
layout.heightValue(100);
}];
UIView*view1=[UIViewnew];
[stackViewaddSubview:view1];
view1.backgroundColor=[UIColorblueColor];
UIView*view2=[UIViewnew];
[stackViewaddSubview:view2];
view2.backgroundColor=[UIColoryellowColor];
UIView*view3=[UIViewnew];
[stackViewaddSubview:view3];
view3.backgroundColor=[UIColorredColor];
//stack的内边距
stackView.padding=UIEdgeInsetsMake(10,10,10,10);
//view直接的距离
stackView.space=10;
//调用此方法会给subviews自动添加约束条件,进行等宽或者等高排列
[stackViewlayoutWithType:ZXPStackViewTypeVertical];

注意: ZXPStackView的subview不需要添加约束，在调用layoutWithType:方法的时候，内部会自动进行约束的添加。

总结

本篇文章讲解了ZXPAutoLayout的基本使用和常用api的方法。比如如何设置一个view的约束，或者等宽等高，位置相对于某个view的某一边，宽高又相对于某一个view或者等比例的常用apis。如有问题或者写的不好地方留言即可~!

tags：

相关：

源码推荐(01.11B)：iOS项目分层，Widget手机任务栏

iOS项目分层(上传者：踏浪帅)主项目中的分层主要包含四个模块，Main(主要)、Expand(扩展)、Resource(照片)、

通过Moya+RxSwift+Argo完成网络请求

作者：@请叫我汪二授权本站转载。最近在新项目中尝试使用 Moya+RxSwift+Argo 进行网络请求和解析，感觉还阔

Loading动画外篇·圆的不规则变形

一款Loading动画的实现思路系列已经结束了，非常感谢大家的捧场。看过本系列的同学可能还记得，我对原动效做

MVVM没你想象的那么的好