安卓開發進階之彈性佈局FlexboxLayout--Part1(翻譯)

原文鏈接
安卓開發進階之彈性佈局FlexboxLayout–Part2(翻譯)
安卓開發進階之彈性佈局FlexboxLayout–Part3(翻譯)
app在Google Play Store(需要翻牆,也可自己導入Github上的工程後自己運行)
Github上的地址
源碼下載地址

2016年5月，谷歌在Github 上發佈了其官方支持的工具flexbox-layout(Github上的地址)。這是一個安卓佈局管理器，它類似於CSS中的彈性box佈局模塊。這個系列將研究FlexboxLayout 的使用與原理。
在我們開始之前，需要注意的是此係列文章的格式與之前有點不同。一般我喜歡寫代碼註釋，但是現在需求有點不同。雖然我們是通過修改XML 佈局文件屬性來看效果，但是代碼改變幅度並不是很大。而且爲了達到能看到效果，我在Google Play Store上發佈了一個app，該app通過設置不同的屬性來顯示不同的效果。源碼在文章末尾，你可以先下載該app查看相關效果。
還有一點需要注意的是，我將從安卓的角度來解釋，即我將使用標準的安卓佈局作爲參考點，對能顯示類似結果的FlexboxLayout 進行高亮。

爲了使用 FlexboxLayout ，在build.gradle中添加依賴：

dependencies {
    compile 'com.google.android:flexbox:0.1.2'
}

然後在XML中引用，也可以在代碼中引用，這裏我不作過多描述，因爲Github 上足夠多了。
FlexboxLayout 與LinearLayout 很相似，都是將子佈局一個一個的排列。使用LinearLayout 的時候需要設置orientation屬性，FlexboxLayout 中對應的屬性爲flexDirection。

flexDirection：
該屬性控制排列子佈局流(flow)的方向，正如上面所言，與LinearLayout中的orientation 類似。該屬性的值row和column等價於horizontal 和vertical。然而，還有另外兩個值，row_reverse 和column_reverse ，它們作用相同而僅僅是方向相反。比如說，row從左邊往右，依次排列。

Flex Direction: Row

Flex Direction: Row Reverse

Flex Direction: Column

Flex Direction: Column Reverse

我們需要先定義一些術語，在後文中會用到它們。
主軸(main axis)指的是被flexDirection定義的流的方向，橫軸(cross axis)垂直於主軸。所以對於row 和row_reverse 來說，主軸就是水平軸，橫軸就是豎直軸。記住這，因爲後面會用到。

flexWrap：
FlexboxLayout和LinearLayout的第一個主要差別表現在當一連串的子佈局到達其父佈局的邊界的時候。對於LinearLayout ，一旦超過了佈局邊界，子佈局被簡單的截斷。對於FlexboxLayout ，我們可以通過flexWrap 屬性來控制其表現。假如我們將該屬性設置爲nowrap ，當我們沿着主軸用子佈局填滿父佈局的時候，子佈局會被添加到父佈局的末尾，之前的子佈局會被壓縮以騰出空間。這裏可以進行細粒度的控制，當我們觀察子佈局的屬性的時候我們再討論這個話題。

Flex Wrap: No Wrap

Flex Wrap: Wrap

Flex Wrap: Wrap Reverse

justifyContent：
該屬性用來控制沿着主軸放置子項的方式。粗略一看，該屬性與flexDirection相似。實際上，flexDirection控制子項的順序，而justifyContent控制 子項的相對位置。該屬性可能的值有flex_start, flex_end, center, space_between和space_around:

Justify Content: Flex Start

Justify Content: Flex End

Justify Content: Center

Justify Content: Space Between

Justify Content: Space Around

alignItems：
該屬性控制子項在橫軸( cross axis)的位置和大小。可能的值有are stretch, flex_start, flex_end, center和 baseline。

Align Items: Flex Start

Align Items: Flex End

Align Items: Center

Align Items: Baseline

Align Items: Stretch

alignContent：
由於alignContent 與alignItems 看起來一樣，所以它們很容易讓人混淆。但是實際上，它們之間有微小的區別，卻對最後效果有很大影響。alignItems 控制子項沿着自己的線如何放置，而alignContent則控制那條線。在安卓裏面的術語就是，類似於TableLayout裏面的TableRow：使用alignContent 類似於給TableRow設置屬性，使用alignItems 類似於給代表單個單個的table cell的子View設置屬性。其可能的值有 stretch, flex_start, flex_end, center, space_between和 space_around。

Align Content: Flex Start

Align Content: Flex End

Align Content: Center

Align Content: Space Between

Align Content: Space Around

Align Content: Stretch

理解alignItems & alignContent的最好方式就是自己去實踐。在我的app中，設置flexDirection爲row，Flex wrap爲wrap，增加其他的單元(通過點擊Add)直到轉到第二行，設置alignContent 爲stretch來讓線條可見，然後好好玩玩alignItems吧。

嗯，這確實是一篇強大而又有彈性的文章！但是還有很多東西。我們將在下一篇文章討論如何控制單獨的子項。

原文鏈接
安卓開發進階之彈性佈局FlexboxLayout–Part2(翻譯)
安卓開發進階之彈性佈局FlexboxLayout–Part3(翻譯)

app在Google Play Store(需要翻牆，也可自己導入Github上的工程後自己運行)
Github上的地址
源碼下載地址