iOS布局體系的概覽
? ? ?在我的CSDN博客中的幾篇文章分別介紹MyLayout布局體系中的視圖從一個(gè)方向依次排列的線性布局(MyLinearLayout)、視圖層疊且停靠于父布局視圖某個(gè)位置的框架布局(MyFrameLayout)、視圖之間通過約束和依賴實(shí)現(xiàn)布局的相對布局(MyRelativeLayout)、以及多列多行排列的表格布局(MyTableLayout)、以及本文將要介紹的流式布局(MyFlowLayout)這5種布局體系。這些視圖布局的方式都有一些統(tǒng)一的特征，都要求必須將子視圖放入到一個(gè)特殊的視圖中去，我們稱這些特殊的視圖為布局視圖(Layout View)。這些布局視圖都有一個(gè)共同的基類：基礎(chǔ)布局視圖(MyBaseLayout)。同時(shí)我們還為視圖建立了很多擴(kuò)展的屬性來進(jìn)行位置和尺寸的設(shè)置，以及我們還專門建立了服務(wù)某些布局視圖的視圖擴(kuò)展屬性。在這些擴(kuò)展屬性中：用于定位視圖位置的類是MyLayoutPos類，這個(gè)類可以用來決定視圖的上、下、左、右、水平居中、垂直居中六個(gè)方位的具體值；而用于決定視圖尺寸的類是MyLayoutSize類，這個(gè)類可以用來決定視圖的高度和寬度的具體值；用于決定視圖排列布局方向的是枚舉MyLayoutViewOrientation類型，方位類型定義了垂直和水平兩個(gè)方位；用于決定視圖停靠區(qū)域的MyGravity枚舉類型，枚舉類型定義了14種?？康膮^(qū)域類型，這里要分清楚的是MyGravity和MyLayoutPos的區(qū)別，前者是用來描述某個(gè)具體的方位，而后者則是用來某個(gè)方位的具體位置；用于描述子視圖和布局視圖四周內(nèi)邊距的padding屬性，這個(gè)屬性只用于布局視圖；用于描述布局視圖的尺寸大小由子視圖整體包裹的wrapContentWidth,wrapContentHeight的屬性；用于描述蘋果各種屏幕尺寸適配的MySizeClass定義，以及具體的實(shí)現(xiàn)類MyLayoutSizeClass類。這些屬性和類共同構(gòu)建了出了一套完整的iOS界面布局系統(tǒng)。下面是這個(gè)套界面布局體系的類結(jié)構(gòu)圖：
介紹完布局的整個(gè)體系結(jié)構(gòu)后，我們先來理解流的概念，所謂流就是向某個(gè)方向依次的排列，而當(dāng)?shù)竭_(dá)某個(gè)設(shè)定的邊界或者設(shè)定的數(shù)量時(shí)則另起一行并回到原先的起點(diǎn)重新開始繼續(xù)按某個(gè)方向依次排列。一個(gè)最簡單的例子就是假設(shè)我們在寫文章時(shí)，假定每行的文字規(guī)定了80個(gè)字則我們首先在第一行書寫文字，而當(dāng)要書寫的文字超過80個(gè)字時(shí)我們就會(huì)自動(dòng)另起一行重新開始。因此我們可以看出流布局有如下的特點(diǎn)：
1.總是優(yōu)先沿著一個(gè)固定的方向排列，其中沿著的方向一共有兩種： 從先左到右，然后從上到下；或者先從上到下，然后從左到右。我們稱先從左到右然后從上到下的流為垂直流，也稱為縱向流；而先從上到下然后從左到右的流為水平流，也稱為橫向流。
2.當(dāng)流沿著某個(gè)特定方向滿足了某個(gè)特定的要求后才會(huì)進(jìn)行換行重新開始排列，而這個(gè)特定的要求有兩種：一種是容器空間不足以容納要排列的內(nèi)容，一種是內(nèi)容到達(dá)了容器空間的某個(gè)特定方向的數(shù)量限制。前者的一個(gè)具體的實(shí)例就是WEB頁面中CSS中所定義的float布局，或者一些標(biāo)簽流；而后者的一個(gè)具體實(shí)例就是微信或者支付寶里面的錢包功能菜單列表
下面我們就列出一些典型的流式布局：
MyFlowLayout就是一個(gè)用來實(shí)現(xiàn)上述流功能的布局視圖類，他是從MyBaseLayout類派生。支持分別從垂直和水平兩個(gè)方向的進(jìn)行布局，同時(shí)支持子視圖按內(nèi)容填充約束或者填充數(shù)量約束兩種換行或者換列策略的四種布局：
1.垂直內(nèi)容填充約束布局。
這種流式布局的布局機(jī)制是，里面的子視圖按添加的順序每行依次從左排列到右，而當(dāng)布局視圖的剩余寬度容納不下一個(gè)要插入的新的子視圖的寬度時(shí)則會(huì)新起一行，重新從左到右繼續(xù)排列，如果遇到某個(gè)子視圖的寬度甚至比布局視圖還要寬時(shí)則總時(shí)會(huì)壓縮子視圖的寬度和布局視圖的寬度保持一致，這樣最終形成的結(jié)果是子視圖將按從左到右，從上到下的順序依次排列，且每行的數(shù)量不固定。下面就是這種流式布局的效果圖：
2.垂直數(shù)量約束布局。
這種流式布局的布局機(jī)制是，里面的子視圖按添加的順序每行依次從左排列到右，當(dāng)一行內(nèi)的子視圖的數(shù)量到達(dá)布局視圖約定的數(shù)量值時(shí)則會(huì)新起一行，重新從左到右繼續(xù)排列，這樣最終形成的結(jié)果是子視圖將按從左到右，從上到下的順序依次排列，且每行的數(shù)量是固定的。下面就是這種流式布局的效果圖：
3.水平內(nèi)容填充約束布局。
這種流式布局的布局機(jī)制是，里面的子視圖按添加的順序每列依次從上排列到下，而當(dāng)布局視圖的剩余高度容納不下一個(gè)要插入的新的子視圖的高度時(shí)則會(huì)新起一列，重新從上到下繼續(xù)排列，如果遇到某個(gè)子視圖的高度甚至比布局視圖還要高時(shí)則總時(shí)會(huì)壓縮子視圖的高度和布局視圖的高度保持一致，這樣最終形成的結(jié)果是子視圖將按從上到下，從左到右的順序依次排列，且每列的數(shù)量不固定。下面就是這種流式布局的效果圖：
4.水平數(shù)量約束布局。
這種流式布局的布局機(jī)制是，里面的子視圖按添加的順序每列依次從上排列到下，當(dāng)一列內(nèi)的子視圖的數(shù)量到達(dá)布局視圖約定的數(shù)量值時(shí)則會(huì)新起一列，重新從上到下繼續(xù)排列，這樣最終形成的結(jié)果是子視圖將按從上到下，從左到右的順序依次排列，且每列的數(shù)量是固定的。下面就是這種流式布局的效果圖：
MyFlowLayout流式布局類
一、流式布局的建立以及類型的指定
## MyFlowLayout要實(shí)現(xiàn)上面四種不同的布局可以通過初始化方法：
-(id)initWithOrientation:(MyLayoutViewOrientation)orientation arrangedCount:(NSInteger)arrangedCount;
+(id)flowLayoutWithOrientation:(MyLayoutViewOrientation)orientation arrangedCount:(NSInteger)arrangedCount;
中的orientation參數(shù)來指定流式布局的方向，當(dāng)設(shè)置為MyLayoutViewOrientation_Vert時(shí)表示垂直流式布局，而當(dāng)設(shè)置為MyLayoutViewOrientation_Horz時(shí)則表示為水平流式布局；而其中的arrangedCount參數(shù)則是指定布局方向排列的子視圖的數(shù)量約束值，當(dāng)設(shè)置為0時(shí)則表示建立的不是數(shù)量約束布局而是內(nèi)容填充約束布局。如果我們調(diào)用init方法來初始化一個(gè)流式布局的話則默認(rèn)建立的是一個(gè)垂直內(nèi)容填充約束布局。另外我們也可以通過類的兩個(gè)屬性：
@property(nonatomic,assign)MyLayoutViewOrientation orientation;
@property(nonatomic,assign) NSInteger arrangedCount;
來隨時(shí)調(diào)整流式布局的方向和數(shù)量的，也就是說流式布局的種類是隨時(shí)都可以變換的。
二、流式布局對包裹特性的支持
因?yàn)镸yFlowLayout是繼承自MyBaseLayout因此MyFlowLayout類的高度和寬度尺寸也支持由包裹的子視圖來決定，也就是支持wrapContentWidth和wrapContentHeight兩個(gè)屬性設(shè)置為YES的情況，但不是4種流式布局都支持包裹屬性，對于數(shù)量約束布局來說不管是水平的還是垂直都支持包裹屬性，而對于內(nèi)容填充約束布局來說則當(dāng)是垂直布局時(shí)只支持wrapContentHeight為YES的情況，因?yàn)槊啃心芴畛涞淖右晥D的數(shù)量是依賴于布局視圖的寬度決定的，因此是不能支持wrapContentWidth為YES的場景的；同樣的道理對于水平內(nèi)容約束布局來說只支持wrapContentWidth為YES則不支持wrapContentHeight為YES的場景的。
三、流式布局內(nèi)子視圖的尺寸位置和間距
對于流式布局來說，雖然我們總是按約定的規(guī)則來排列定位其中的每個(gè)子視圖的位置，但是我們依然在某種情況下需要設(shè)置每個(gè)子視圖之間的間距，以及子視圖本身的高度和寬度尺寸。我們可以通過設(shè)置子視圖的frame值來指定每個(gè)子視圖的高度或者寬度，我們也可以通過視圖擴(kuò)展的屬性widthSize,heightSize,myWidth,myHeight,mySize來設(shè)置子視圖的布局尺寸。同樣我們也可以通過設(shè)置子視圖的擴(kuò)展屬性leftPos,rightPos,topPos,bottomPos,myLeft,myRight,myTop,myBottom來設(shè)置每個(gè)子視圖的外邊距值，對于流式布局來說外邊距值的設(shè)置具有特別的意義，就拿myLeft和myTop的設(shè)置為例子，子視圖所在的位置不同其所代表的意義是不同的。在一個(gè)垂直布局的情況下，如果子視圖是第一行一列則myLeft,myTop的值是這個(gè)子視圖離父布局視圖的邊距值；而當(dāng)子視圖是第二行一列時(shí)則myLeft是指定的離父布局視圖的左邊距值，而myTop則是離第一行整體子視圖的頂部邊距值；而當(dāng)子視圖是第一行二列是則myLeft是指定離前一個(gè)子視圖的左邊距值，而myTop則是離父布局視圖的頂部邊距值；而當(dāng)子視圖是二行二列時(shí)則myLeft和myTop則分別是前一個(gè)子視圖的左邊距值和第一行整體子視圖的頂部邊距值。下面的圖形可以很清楚的描述出這些設(shè)置的意義：
上面的圖表顯示了布局視圖的內(nèi)邊距padding設(shè)置，以及每個(gè)子視圖的外邊距設(shè)置值，以及可以很清楚的看到流式布局的每一行是如何確定出來的，以及當(dāng)另起一行時(shí)處于新行的子視圖的垂直位置是如何計(jì)算出來的。同時(shí)我們在圖中還看到了兩個(gè)間距：subviewHSpace和subviewVSpace的設(shè)置。這兩是布局的三個(gè)屬性：
@property(nonatomic ,assign)CGFloat subviewVSpace;
@property(nonatomic,assign) CGFloat subviewHSpace;
@property(nonatomic,assign) CGFloat subviewSpace;
其中的subviewSpace是上面兩個(gè)的整體設(shè)置值，這三個(gè)屬性的意義是設(shè)置所有視圖之間的行間距和列間距，其中subviewVSpace用于設(shè)置行間距，而subviewHSpace則是用于設(shè)置列間距，這兩個(gè)屬性的默認(rèn)值都是0。有時(shí)候我們不想為每個(gè)子視圖都設(shè)置四周的外邊距值，而希望所有的子視圖之間的行間距和列間距都是某個(gè)固定的值，這時(shí)候我們就可以通過直接設(shè)置這兩個(gè)屬性的值來進(jìn)行所有子視圖之間的間距的設(shè)置，而不用分別為每個(gè)子視圖都去設(shè)置四周的邊距值。
對于數(shù)量約束流式布局來說，因?yàn)槲覀兿拗屏艘粋€(gè)方向上的子視圖的數(shù)量，有時(shí)候我們希望這個(gè)方向上的所有子視圖的尺寸都是一樣且平分這個(gè)方向上的布局視圖的尺寸，而不需要我們依次為所有子視圖指定尺寸，就像通過subviewVSpace和subviewHSpace設(shè)置視圖的行間距和列間距一樣，你可以設(shè)置gravity的屬性為MyGravity_Horz_Fill或者M(jìn)yGravity_Vert_Fill這樣設(shè)置表示流式布局視圖里面的所有子視圖的尺寸都相等并且值是等于布局視圖的尺寸除以布局視圖指定的數(shù)量值或者拉伸所有子視圖的尺寸填滿整個(gè)布局視圖。
如果流式布局的方向是MyLayoutViewOrientation_Vert則表示每行的子視圖的寬度會(huì)被均分，這樣子視圖不需要指定寬度，但是布局視圖必須要指定一個(gè)明確的寬度值。
如果流式布局的方向是MyLayoutViewOrientation_Horz則表示每列的子視圖的高度會(huì)被均分，這樣子視圖不需要指定高度，但是布局視圖必須要指定一個(gè)明確的高度值，下面是屬性gravity設(shè)置為MyGravity_Horz_Fill(注意averageArrange已經(jīng)過期已經(jīng)被gravity替代)的兩種布局效果圖：
在一些場景中我們可以通過設(shè)置gravity為MyGravity_Fill，并且同時(shí)設(shè)置subviewVSpace和subviewHSpace的值來減少分別為每個(gè)子視圖設(shè)置位置和尺寸的工作量。另外在一些布局場景中我們還可以做如下的設(shè)置：
1.在垂直內(nèi)容填充約束布局中，我們可以設(shè)置某個(gè)子視圖的寬度和布局視圖的寬度建立約束關(guān)系，以及讓某個(gè)子視圖的高度同子視圖的寬度建立約束關(guān)系，也就是說可以設(shè)置子視圖.widthSize.equalTo(flowLayout.widthSize),以及子視圖.heightSize.equalTo(子視圖.widthSize)
2.在水平內(nèi)容填充約束布局中，我們可以設(shè)置某個(gè)子視圖的高度和布局視圖的高度建立約束關(guān)系，以及讓某個(gè)子視圖的寬度同子視圖的高度建立約束關(guān)系，也就是說可以設(shè)置子視圖.heightSize.equalTo(flowLayout.heightSize),以及子視圖.widthSize.equalTo(子視圖.heightSize)
3.在垂直數(shù)量約束布局中，我們可以設(shè)置某個(gè)子視圖的高度同子視圖的寬度建立約束關(guān)系，也就是說可以設(shè)置子視圖.heightSize.equalTo(子視圖.widthSize)
4.在水平數(shù)量約束布局中，我們可以設(shè)置某個(gè)子視圖的寬度同子視圖的高度建立約束關(guān)系，也就是說可以設(shè)置子視圖.widthSize.equalTo(子視圖.heightSize)
四、流式布局內(nèi)子視圖的?？吭O(shè)置
在線性布局中我們可以讓所有的子視圖整體的停靠在布局視圖的一個(gè)特定的區(qū)域，這個(gè)可以通過線性布局的gravity屬性來設(shè)置。同樣在流式布局中我們也可以通過gravity屬性來設(shè)置流式布局中的所有子視圖都整體?？吭诓季忠晥D的某個(gè)特定的區(qū)域。在有的時(shí)候我們的布局視圖設(shè)置有明確的高度和寬度值，同時(shí)我們又希望布局視圖里面的所有子視圖整體的?？吭诓季忠晥D的某個(gè)區(qū)域，我們可以設(shè)置布局視圖的屬性：
@property(nonatomic,assign)MyGravity gravity;
屬性的默認(rèn)值是MyGravity_None表示不進(jìn)行停靠處理，也就是默認(rèn)的從左上角開始進(jìn)行子視圖的整體布局。
如果布局視圖方向?yàn)镸yLayoutViewOrientation_Vert時(shí)可以為垂直布局視圖設(shè)置整體水平方向上的左，中，右整體?？亢蛯挾瘸叽缋?；而總是可以設(shè)置整體垂直方向上的上、中、下整體?？?。
如果布局視圖方向?yàn)镸yLayoutViewOrientation_Horz時(shí)可以為水平布局視圖設(shè)置整體垂直方向上的上、中、下整體?？亢透叨瘸叽绲睦?；而總是可以設(shè)置整體水平方向上的左、中、右整體停靠。
gravity屬性是用來設(shè)置所有子視圖的整體?？刻匦缘模趯?shí)際的應(yīng)用場景中我們還想進(jìn)一步設(shè)置一行內(nèi)或者一列內(nèi)的視圖之間的停靠對齊方式。對于垂直布局來說，在一行內(nèi)的視圖之間的高度是可以不經(jīng)相同的。在一行之內(nèi)的視圖總是會(huì)存在有一個(gè)高度最高的子視圖，因此我們也希望這行內(nèi)的其他子視圖能以這個(gè)子視圖為基礎(chǔ)來進(jìn)行垂直方向的對齊?？吭O(shè)置（水平布局則是水平方向的對齊?？吭O(shè)置）。因此我們可以通過屬性：
@property(nonatomic,assign)MyGravity arrangedGravity;
屬性來進(jìn)行設(shè)置行內(nèi)或者列內(nèi)的視圖之間的對齊停靠方式，這個(gè)屬性默認(rèn)設(shè)置為MyGravity_None，表示不處理行內(nèi)?？?，也就是總是按左邊或者頂部對齊方式來布局行內(nèi)的子視圖。這個(gè)屬性的設(shè)置是依賴于布局的方向的。如果方向是MyLayoutViewOrientation_Vert則只用于表示每行子視圖的上中下?？繉R位置，這個(gè)屬性只支持MyGravity_Vert_Top，MyGravity_Vert_Center,MyGravity_Vert_Bottom，MyGravity_Vert_Fill四種停靠對齊方式 這里的對齊基礎(chǔ)是以每行中的最高的子視圖為基準(zhǔn)；如果方向是MyLayoutViewOrientation_Horz則只用于表示每列子視圖的左中右?？繉R位置，這個(gè)屬性只支持MyGravity_Horz_Left，MyGravity_Horz_Center,MyGravity_Horz_Right，MyGravity_Horz_Fill四種?？繉R方式 這里的對齊基礎(chǔ)是以每列中的最寬的子視圖為基準(zhǔn)。
這里需要注意的是arrangedGravity描述的所有的行內(nèi)或者列內(nèi)的停靠對齊方式，而不是只針對于某個(gè)一行或者一列，而gravity則用來描述所有子視圖整體的停靠位置。您可以通過流式布局庫的DEMO例子來調(diào)整具體的值來查看設(shè)置的結(jié)果。
五、流式布局和表格布局以及UICollectionView的區(qū)別以及應(yīng)用
在前面的文章中我們介紹了表格布局MyTalbeLayout，表格布局也可以用來建立多行多列布局的應(yīng)用場景。但在實(shí)際使用中還是有一些差別的。表格布局需要明確的指定建立一個(gè)新的行操作，同時(shí)又要明確的指定建立列的操作，同時(shí)表格布局的行和列的指定都是可以單獨(dú)指定的，而流失布局則沒有明確的行和列的概念，流失布局總是按一個(gè)方向進(jìn)行排列，只要在遇到數(shù)量的約束和內(nèi)容的空間的約束時(shí)就是自動(dòng)的進(jìn)行換行處理，因此流時(shí)布局在建立子視圖時(shí)簡單而且方便。而針對UICollectionView來說也跟表格布局一樣需要明確的指定一共有多少行，每行有多少列，并且所有設(shè)置都是通過委托的形式來完成的，代碼量多而且操作起來麻煩。在實(shí)際的應(yīng)用中流式布局更加適合于用來建立那些標(biāo)簽流、九宮格菜單功能、枚舉功能等方面的布局。下面的圖片展示了流式布局的幾個(gè)DEMO效果：
六、總結(jié)
關(guān)于流式布局的功能就介紹到這了，流式布局是MyLayout布局系統(tǒng)里面的5大布局視圖之一，主要用于建立那些有規(guī)律排列和對齊的視圖的應(yīng)用場景，而且通過使用流式布局來建立界面布局使用的代碼量是最少而且最靈活的，視圖之間的排列順序的調(diào)整只需要調(diào)整其布局視圖中的順序就可以完成了。通過流式布局可以很簡單的來建立一套瀑布流風(fēng)格展示的界面，以及文字標(biāo)簽等功能。如果您想了解更多的關(guān)于流式布局的功能請您訪問我的github站點(diǎn)來了解更多：
https://github.com/youngsoft/MyLinearLayout
如果您覺得庫還不錯(cuò)，記得為我點(diǎn)贊哦。
