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。歡迎你們多多交流。