- 欢迎同样喜欢动效的工程师／UI设计师／产品加入我们
- iOS动效特攻队–>QQ群：547897182
- iOS动效特攻队–>熊熊：648070256
浅谈一下
关于iOS兼容布局一直都是开发者经常面对的问题，随着代码量的增加，很多人也有了一套自己的布局理论。本人也做了不少项目，开始用的Storyboard，xib，约束布局。因为是做的大多是应用型App，对于横竖屏的切换不是很多，所以约束的优点我们用的很少。
随着项目变的越来越大，每次需求变动改动或者复用界面时都会有无必要的触碰到之前设置好的约束，结果很容易导致约束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 iOS客户端的好友界面的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个按钮，这个界面当然也可以用collectionView搭建。不过还是说下我这里的布局思路。把四个按钮放入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。欢迎大家多多交流。