- 歡迎同樣喜歡動效的工程師／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。歡迎大家多多交流。