BearSkill纯代码搭建iOS界面

• 欢迎相同喜欢动效的project师／UI设计师／产品增长咱们
• iOS动效特攻队–>QQ群：547897182
• iOS动效特攻队–>熊熊：648070256

浅谈一下

关于iOS兼容布局一直都是开发人员常常面对的问题，随着代码量的增长，很是多人也有了一套本身的布局理论。本人也作了很多项目。開始用的Storyboard，xib。约束布局。因为是作的大可能是应用型App。对于横竖屏的切换不是很是多。因此约束的长处咱们用的很是少。
随着项目变的愈来愈大，每次需求变更修改或者复用界面时都会有无必要的触碰到以前设置好的约束，结果很是easy致使约束crash。布局乱的一塌糊涂。找了半天也不必定能完美解决反而常常浪费了很多时间。
后来就開始基于约束布局的理念，本身整理了一套布局方式。

并且整理了一些常用的布局方法。上传到本身的Pod里面。

Pods里面另外一些其它方法，本文暂不讨论。仅仅说布局这一块。

BearSkill方法展现

BearSkillPod名称：BearSkill

演示Demo下载地址：https://github.com/BearRan/BearSkillDemo
这是关于布局的方法

咱们先来看一下BearSkill里面有哪些布局方法。

多个子类view布局方法

项目中常常会有多个子类view依照某个方向等间距布局这样的状况。针对这样的状况。特有例如如下四种方法。

一切尽在gif和demo中，你们本身理解下。

demo的界面上也有方法名称和适用场景说明。

1，

/** * 依据子view本身主动布局 本身主动计算:起始点，结束点。间距（三值相等） * 说明： 在父类view尺寸不等于需求尺寸时。会显示日志并且取消布局 */
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center;

2，

/** * 依据子view本身主动布局 需要设置:起始点，结束点; 本身主动计算:间距 * 说明： 在父类view尺寸不等于需求尺寸时，会显示日志并且取消布局 */
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd;

3，

/** * 依据子view本身主动布局 需要设置:间距; 本身主动计算:起始点，结束点 * 说明： 在父类view尺寸不等于需求尺寸时，会显示日志并且取消布局 */
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center gapDistance:(CGFloat)gapDistance;

4，

/** * 依据子view本身主动布局 需要设置:起始点，结束点，间距 * 说明： 在父类view尺寸不等于需求尺寸时。会本身主动变化 */
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd gapDistance:(CGFloat)gapDistance;

View与View之间的相对布局

在同一图层或者父子类的关系的view中。view之间的位置关系也是咱们常常需要设置的，来看demo

假设仍是不太清楚怎么使用，每个代码的最后都有最简使用代码演示样例

常用的其它布局參数Set和Get

不一一解释了。都是看了名字就知道的參数

// Getter

- (CGFloat)x; - (CGFloat)y; - (CGFloat)maxX; - (CGFloat)maxY; - (CGFloat)width; - (CGFloat)height; - (CGPoint)origin; - (CGSize)size; 
- (CGFloat)centerX; - (CGFloat)centerY;  //Setter

- (void)setX:(CGFloat)x; - (void)setMaxX:(CGFloat)maxX; - (void)setMaxX_DontMoveMinX:(CGFloat)maxX; 
- (void)setY:(CGFloat)y; - (void)setMaxY:(CGFloat)maxY; - (void)setMaxY_DontMoveMinY:(CGFloat)maxY; 
- (void)setWidth:(CGFloat)width; - (void)setHeight:(CGFloat)height; - (void)setOrigin:(CGPoint)point; - (void)setOrigin:(CGPoint)point sizeToFit:(BOOL)sizeToFit; - (void)setSize:(CGSize)size; 
- (void)setCenterX:(CGFloat)x; - (void)setCenterY:(CGFloat)y; 
- (void)setWidth_DonotMoveCenter:(CGFloat)width; - (void)setHeight_DonotMoveCenter:(CGFloat)height; - (void)setSize_DonotMoveCenter:(CGSize)size; - (void)sizeToFit_DonotMoveSide:(kDIRECTION)dir centerRemain:(BOOL)centerRemain;  /**
 *  和父类view剧中
 *
 *  当前view和父类view的 X轴／Y轴／中心点 对其
 */
- (void)BearSetCenterToParentViewWithAxis:(kAXIS)axis;  /**
 *  和指定的view剧中
 *
 *  当前view和指定view的 X轴／Y轴／中心点 对其
 */
- (void)BearSetCenterToView:(UIView *)destinationView withAxis:(kAXIS)axis;

布局逻辑分析

咱们来分析下常用App的界面

这是QQ iOSclient的好友界面的cell，
1，view3用BearSetCenterToView:(UIView *)destinationView withAxis:(kAXIS)axis这种方法，设置为与cell Y轴居中
2。view1里的两个Label用BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd gapDistance:(CGFloat)gapDistance;这种方法，本身主动在view1中布局。并且view1会本身主动修改本身的尺寸，
3，view1用BearSetCenterToView:(UIView *)destinationView withAxis:(kAXIS)axis这种方法，设置为与左边的图片居中
4，view2里的两个label和view1同理
5。固然。view2也可以直接用“14:28”这个label设置与view3的右上角的相对位置，经过- (void)setMaxX:(CGFloat)maxX;和- (void)setY:(CGFloat)y;方法

支付宝口碑界面

1，view1中是4个button，这个界面固然也可以用collectionView搭建。

只是仍是说下我这里的布局思路。把四个button放入subviewArray中，设置offStart和offEnd距离，经过+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd;这种方法就能够实现本身主动布局。是否是很是方便呢？后期修改也方便删减代码。
2。view3在view2中，并且view3和view2垂直方向居中。

view3经过- (void)BearSetRelativeLayoutWithDirection:(kDIRECTION)direction destinationView:(UIView *)destinationView parentRelation:(BOOL)parentRelation distance:(CGFloat)distance center:(BOOL)center;一句代码搞定布局位置！

1,这样的界面有多种布局思路。但是基本都仍是几乎相同的。左边的图片就不说了。view1和左边图片设置边距。顶部对其。view1内部用+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd;直接搞定
2。view2这样的思路无非就是把如下的label单独分离出来。view2高度设置为和左側图片高度同样。- (void)setHeight:(CGFloat)height;可以直接设置view的高度

总结 本身一我的整理的，以前也看过别人写的，可能个人这套方法命名规范。代码规范什么的不是很是好。欢迎你们一块儿来增长，帮忙优化个人这套布局方法。只是这套方法，能知足通常的App中70%以上的界面布局。有什么好的想法或者思路的可以私聊我。QQ：648070256。欢迎你们多多交流。