Android上的Flexbox佈局

這篇文章主要參考了官方文檔和阮老師的Flex 佈局教程：語法篇

github地址

簡介

最近Google開源了一個叫flex-box的庫，它的思路是參照的CSS的Flex佈局設計的，因此屬性基本都是和CSS上的Flex佈局保持一致，但由於是兩個不一樣的平臺，因此減小了幾個不適用於Android的屬性，新增了幾個屬性，具體咱們下面會說到。

關於CSS的Flex佈局

在瞭解Google開源的flex-box，我以爲有必要先了解下CSS的Flex佈局，這有助於咱們理解那些屬性定義。關於這方面的知識，能夠閱讀這篇博客。下面咱們只是簡要的瞭解下，具體屬性咱們放到講解Google的flex-box中去說明。

//這段文字說明，來源於上面說到的博客
採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。複製代碼

概念

關於Google的flexbox-layout

注意：如下文中用到的flexbox-layout指的是Google開源的庫，Flex指的是CSS中的Flex佈局。

首先咱們須要知道的是，flexbox-layout的基本概念和Flex是同樣的，最外面的這層佈局稱爲容器，在flexbox-layout指的是com.google.android.flexbox.FlexboxLayout，裏面的子元素稱爲項目。容器默認存在兩條軸，其中水平(這裏是就上面的概念圖而言，由於主軸的方向是能夠指定的)的這條軸稱爲主軸(我的理解，能夠存在多條，具體緣由後面講)，垂直的這條稱爲交叉軸。其餘屬性好比start，end等等也是同樣的，具體能夠看上面的基本概念圖。

下面咱們着重講下flexbox-layout支持的屬性，由於它既支持容器屬性，也支持項目屬性，因此咱們分紅兩個篇幅來講明。

注意：如下屬性設置的具體效果請參照說明文檔和Demo，github地址

容器屬性

• flexDirection

  這個屬性用於肯定主軸方向，可選的值有：

  1. row 水平方向，起點在左邊。默認值
  2. row_revers 水平方向，起點在右邊。
  3. column 垂直方向，起點在上邊。
  4. column_reverse 垂直方向，起點在下邊。

  

  flexDirection

• flexWrap

  這個屬性控制容器是單行仍是自動換行，以及主軸的方向，可選的值有：

  1. nowrap 單行。默認值
  2. wrap 自動換行，第一行在上方
  3. wrap-reverse 自動換行，第一行在下方

  關於wrap和wrap-reverse的區別：

  

  wrap

  

  wrap-reverse

• justifyContent

  這個屬性控制項目在主軸上的對齊方式，可選的值有：

  注意：具體的對齊方式與主軸的方向有關，下面的說明是基於默認值

  1. flex_start 左對齊，默認值
  2. flex_end 右對齊
  3. center 居中對齊
  4. space_between 兩端對齊，項目之間的間隔相等
  5. space_around 每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍

  關於space_between和space_around的樣式以下：

  

  space_between

  

  space_around

• alignItems

  這個屬性定義項目在交叉軸上的對齊方式，可選的值有：

  注意：具體的對齊方式與主軸的方向有關

  1. stretch 佔滿整個容器高度，默認值
  2. flex_start 交叉軸的起點對齊
  3. flex_end 交叉軸的終點對齊
  4. center 居中對齊
  5. baseline 項目的第一行文字的基線對齊

  關於stretch和baseline的樣式以下：

  

  stretch

  

  baseline

• alignContent

  這個屬性控制容器的多條主軸的對齊方式，這也是咱們前面提到的主軸能夠有多條，當flexWrap:wrap|wrapreverse。可選的值有：

  注意：只有一條主軸，該屬性不起做用

  1. stretch 佔滿整個交叉軸，默認值
  2. flex_start 與交叉軸的起點對齊
  3. flex_end 與交叉軸的終點對齊
  4. center 與交叉軸的中心對齊
  5. space_between 與交叉軸兩端對齊，軸線之間的間隔平均分佈
  6. space_around 每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍

  這裏須要注意區別下和alignItems的區別，alignContent是多條主軸基於交叉軸的對齊方式，然後者是項目基於交叉軸的對齊方式，一個是軸，一個是項目。

• showDividerHorizontal

• dividerDrawableHorizontal

• showDividerVertical

• dividerDrawableVertical

• showDivider

• dividerDrawable

  這幾個屬性都是跟分隔符有關，具體用法能夠看文檔。

項目屬性

• layout_order(integer)

  這個屬性能夠改變項目的排列順序，默認值爲1。

• layout_flexGrow(float)

  這個屬性定義項目基於當前行的放大比例，默認值爲0。這個屬性相似LinearLayout中的layout_weight屬性，若是當前行只有一個項目的layout_flexGrow爲正值，則該項目將佔滿當前行剩餘的空間，下面的效果是三個相同大小的項目，其中一個layout_flexGrow爲正值的效果：

  

  layout_flexGrow1

  若是存在多個layout_flexGrow爲正值的狀況，則這幾個項目則會按設置的值爲比例佔用當前行剩餘的空間，下面的效果是三個相同大小的項目，其中兩個項目設置layout_flexGrow:1的效果：

  

  layout_flexGrow2

• layout_flexShrink (float)

  這個屬性定義了項目的縮小比例，默認爲1，即若是當前行空間不足，該項目縮小的方式。

  若是全部項目的layout_flexShrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的layout_flexShrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

  我的理解，注意：要設置flexWrap:nowrap爲單行

• layout_alignSelf

  該屬性容許單個項目與其餘項目不同的基於交叉軸的對齊方式。默認值爲auto，即按照容器的alignItems屬性，設置其餘值，則會覆蓋容器的值，可選的值：

  1. auto 默認值
  2. flex_start
  3. flex_end
  4. center
  5. baseline
  6. stretch

• layout_flexBasisPercent (fraction)

  這個屬性設置項目長度相對於容器的百分比，若是設置了這個值，則從layout_width或layout_height指定的長度會被覆蓋，須要注意的是，這個屬性只在容器長度肯定的狀況下有效，即MeasureSpec.EXACTLY。默認值爲-1，表示不設置。

• layout_minWidth / layout_minHeight (dimension)

• layout_maxWidth / layout_maxHeight (dimension)

  這些屬性設置對項目的最大最小限制

• layout_wrapBefore (boolean)

  這個屬性默認值爲false，若是設置爲true，則該項目將強制成爲當前行的第一個項目，會忽略flex_wrap:nowrap設置。

應用實例

1. 底部按鈕

   

   底部按鈕

2. 流式佈局

   

   流式佈局

TODO