最近一段時(shí)間項(xiàng)目沒(méi)有那么近，發(fā)現(xiàn)Github上有個(gè)關(guān)于iOS的使用純代碼的布局庫(kù)MyLayout（github地址:MyLayout地址），下載下來(lái)發(fā)現(xiàn)還不錯(cuò)，故就把自己使用的一些經(jīng)驗(yàn)分享給大家。
iOS中有個(gè)很重的控件叫做UIView，該控件也就是iOSUIKit框架中的一個(gè)類，簡(jiǎn)稱視圖控件。自從蘋(píng)果推出了iPhone6/iPhone 6Plus以后，iOS開(kāi)發(fā)屏幕適配的問(wèn)題也變得越來(lái)越重要了，單純的用frame去進(jìn)行布局來(lái)達(dá)到適配所有的屏幕尺寸，經(jīng)常會(huì)出現(xiàn)大量的判斷語(yǔ)句以及常數(shù)計(jì)算，因此一套強(qiáng)大的UI布局庫(kù)的出現(xiàn)是必然的。
MyLayout布局庫(kù)十分強(qiáng)大，該庫(kù)擁有：
線性布局TGLinearLayout：
線性布局里面的所有子視圖都按照添加的順序依次從上到下或者依次從左到右進(jìn)行排列。
框架布局TGFrameLayout:?
框架布局里面的所有子視圖布局時(shí)和添加的順序無(wú)關(guān)，而是按照設(shè)定的位置停靠在布局視圖的：左上、左中、左下、中上、中中、中下、右上、右中、右下、填充這個(gè)10個(gè)方位中的任何一個(gè)位置上。
表格布局TGTableLayout：
表格布局里面的子視圖可以進(jìn)行多行多列的排列。在使用時(shí)要先添加行，然后再在行里面添加列，每行的列數(shù)可以隨意確定。
相對(duì)布局TGRelativeLayout:?
相對(duì)布局里面的子視圖和添加的順序無(wú)關(guān)，而是按照子視圖之間設(shè)定的尺寸約束依賴和位置約束依賴進(jìn)行布局排列。
流式布局TGFlowLayout:?
流式布局里面的子視圖按照添加的順序依次從某個(gè)方向排列，而當(dāng)遇到了這個(gè)方向上的排列數(shù)量限制或者容器的尺寸限制后將會(huì)另起一行，而重新按照原先的方向依次排列。
浮動(dòng)布局TGFloatLayout：
浮動(dòng)布局里面的子視圖按照添加的順序，并且按照每個(gè)子視圖自身設(shè)定的浮動(dòng)規(guī)則向某個(gè)方向進(jìn)行浮動(dòng)停靠。
路徑布局TGPathLayout:?
路徑布局里面的子視圖按照一個(gè)提供的數(shù)學(xué)函數(shù)得到的曲線路徑等距離的根據(jù)添加的順序依次排列。
接下來(lái)我們就來(lái)看看MyLayout是怎么使用的。
1.下載官方的MyLayout庫(kù)地址
demo主要文件目錄如下
2.新建自己的一個(gè)練習(xí)工程
導(dǎo)入示例工程中的Lib庫(kù)，在自己新建的控制器中導(dǎo)入MyLayout.h文件就可以進(jìn)行UI布局的開(kāi)發(fā)了。
今天主要講的是MyLayout中的線性布局，那么什么是線性布局呢？
線性布局里面的所有子視圖都按照添加的順序依次從上到下或者依次從左到右進(jìn)行排列。根據(jù)排列的方向可以分為垂直線性布局和水平線性布局。
也就是說(shuō)線性布局是根據(jù)視圖加入的順序進(jìn)行先后順序進(jìn)行排列的。在MyLayout布局庫(kù)中的線性布局中有垂直線性布局和水平線性布局。
垂直線性布局：
MyLinearLayout *vertLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];
對(duì)于垂直線性布局里面的子視圖來(lái)說(shuō):
1 如果不設(shè)置任何邊距則每個(gè)子視圖的左邊距都跟父視圖左對(duì)齊，而上下則一次按加入的順序排列。
2 myLeftMargin, myRightMargin的意義是子視圖距離父視圖的左右邊距。
3 myTopMargin, myBottomMargin的意義是子視圖和兄弟視圖之間的上下間距。
4 如果同時(shí)設(shè)置了myLeftMargin,myRightMargin則除了能確定左右邊距，還能確定子視圖的寬度。
5 如果同時(shí)設(shè)置了myTopMargin,myBottomMargin則只能確定和其他兄弟視圖之間的上下間距，但不能確定子視圖的高度。
6 myCenterXOffset表示子視圖的水平中心點(diǎn)再父視圖的水平中心點(diǎn)上的偏移。
7 myCenterYOffset的設(shè)置沒(méi)有意義。
水平線性布局：
MyLinearLayout *horzLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Horz];
對(duì)于水平線性布局里面的子視圖來(lái)說(shuō):
1 如果不設(shè)置任何邊距則每個(gè)子視圖的上邊都跟父視圖上對(duì)齊，而左右則依次按加入的順序排列。
2 myTopMargin,myBottomMargin的意義是子視圖距離父視圖的上下邊距
3 myLeftMargin,myRightMargin的意義是子視圖和兄弟視圖之間的左右間距
4 如果同時(shí)設(shè)置了myTopMargin,myBottomMargin則除了能確定上下邊距，還能確定子視圖的高度。
5 如果同時(shí)設(shè)置了myLeftMargin,myRightMargin則只能確定和其他兄弟視圖之間的左右間距，但不能確定子視圖的寬度。
6 myCenterYOffset表示子視圖的垂直中心點(diǎn)再父視圖的垂直中點(diǎn)上的偏移
7 myCenterXOffset的設(shè)置表示沒(méi)有意義
運(yùn)行Demo中的示例
從運(yùn)行的結(jié)果來(lái)看模擬器中的上部分是一個(gè)垂直布局視圖，視圖的顯示按照子視圖的添加的順序依次排序。
下部是一個(gè)水平布局視圖，視圖的顯示按照子視圖的添加順序依次排列。
需要注意的是：在垂直布局視圖中，我們?nèi)绻O(shè)置了子視圖的左邊距和右邊距可以確定視圖的寬度，而同時(shí)設(shè)置了上下邊距是不能確定子視圖的高度的，因此我們要指定子視圖的高度才能確定子視圖的高度。
同理水平布局視圖中，我們?nèi)缭O(shè)置了子視圖的上下邊距可以確定子視圖的高度，同時(shí)設(shè)置了左右邊距卻不可以確定子視圖的寬度，需要明確指明子視圖的寬度。
在線性布局中，也可以設(shè)置frame屬性，它與myLeftMargin,myRightMargin,myTopMargin,myBottomMargin等屬性不同的是，frame設(shè)置以后會(huì)立即生效，后者是等布局完成以后才會(huì)生效。但是都是可以通過(guò)frame獲取布局完成以后的origin和size屬性值。
這是對(duì)于線性布局的牛刀小試，詳細(xì)信息請(qǐng)參考iOS界面布局的核心以及TangramKit介紹。
