BearSkill纯代码搭建iOS界面

Posted 2020-10-02 lxjshuju

• 欢迎相同喜欢动效的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。欢迎大家多多交流。