前言

工欲善其事必先利其器，學(xué)習(xí)FlexboxLayout之前，先看看它是用來干嘛的，都有哪些特性，了解之后，再來利用它。先放上項目地址--flexbox-layout的GitHub地址

正文

• 概念
  Flexbox，簡單理解為彈性盒子，就是一個可伸縮的區(qū)域或者空間
  在GitHub上，給出的介紹是一個將CSS Flexible Box Layout Module的類似功能帶入Android的庫，關(guān)于CSS的Flexible Box，這里有一篇介紹比較詳細的文章 ,盡管具體語法不同，但是思想是想通的，可以參考。
  FlexboxLayout可以理解成一個高級版的LinearLayout，因為兩個布局都把子view按順序排列。兩者之間最大的差別在于FlexboxLayout具有換行的特性。

• 引入
  穩(wěn)定版本

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

開發(fā)測試版本 --包含了Recyclerview的集成

dependencies {
    compile 'com.google.android:flexbox:0.3.0-alpha3'
}

根據(jù)個人需求，選擇合適版本

• 用法

  
    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignItems="flex_start">

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/colorAccent" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/blue" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="180dp"
            android:background="@color/little_pink_primary" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:background="@color/black" />

        <TextView
            android:layout_width="120dp"
            android:layout_height="100dp"
            android:background="@color/orange" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="@color/side" />

        <TextView
            android:layout_width="80dp"
            android:layout_height="200dp"
            android:background="@color/reset_check" />
    </com.google.android.flexbox.FlexboxLayout>

布局.png

可以看到類似LinearLayout，子元素是依次排列，唯一設(shè)置了屬性就是app:alignItems="flex_start"，那么FlexboxLayout都有哪些屬性，每個屬性的作用，需要我們一點點梳理，具體分為兩個方面，一方面是FlexboxLayout的屬性，另一方面是FlexboxLayout子元素的屬性

FlexboxLayout屬性

• flexDirecition 子元素在主軸的排列方向
• app:flexDirection="row" 默認(rèn)值，水平方向，起點在左，從左到右。
• app:flexDirection="row_reverse" 和row屬性相反，水平方向，從右到左，起點在右端。
• app:flexDirection="column" 主軸是豎直方向，起點在上端，從上到下。
• app:flexDirection="column_reverse" 和column相反，豎直方向，起點在下方從下到上

通過四張圖的對比，是明顯看出來各個屬性的作用的

row

row_reverse

column

column_reverse

• alignItems 子元素在副軸的排列方向，例如：主軸水平方向--副軸豎直方向
• stretch 默認(rèn)值，如果子元素未設(shè)置高度或設(shè)為auto，將占滿整個父容器的高度
• flex_start：頂端對齊
• flex_end：底部對齊
• center：居中對齊
• baseline：子元素的第一行內(nèi)容的基線對齊
  
  stretch

flex_start

flex_end

Paste_Image.png

根據(jù)圖能很明顯看出baseline的作用

baseline

• flexWrap 默認(rèn) Flex不換行，更改flexWrap可以支持換行
• nowrap不換行
• wrap 換行

• wrap_reverse 反向換行

  
  
  nowrap

wrap

wrap_reverse

• justifyContent 元素在主軸的對齊方式
• flex_start 默認(rèn)，左對齊
• flex_end 右對齊
  -center 居中對齊
• space_around 相鄰元素兩側(cè)間隔相等，兩側(cè)元素和邊框的間隔是兩個元素間隔的一半

• space-between 兩端對齊，相鄰兩元素間隔相等

  
  
  flex_start

flex_end

center

space_around

space-between

• alignContent 存在多條副軸時，副軸軸線時的對齊方式，子元素只有一行時不起作用

• stretch 默認(rèn)值，充滿副軸的高度，只有副軸排列app:alignItems="stretch"時，app:alignContent="stretch"才會生效，即app:alignItems="stretch"且app:alignContent="stretch"

  
  
  alignContent="stretch"且app:alignItems="stretch"

• flex_start 與交叉軸的起點對齊

  
  
  flex_start

• flex_end 與交叉軸的終點對齊

flex_end

• center：與交叉軸的中點對齊。

center

• space_around 每根軸線兩側(cè)間隔相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍

  
  
  space_around

• space_between 兩端對齊，軸線之間的間隔相等

  
  
  space_between

• **showDividerHorizontal **
  控制顯示水平方向的分割線，值為none | beginning | middle | end其中的一個或者多個
• **dividerDrawableHorizontal **
  設(shè)置Flex 軸線之間水平方向的分割線。
• showDividerVertical
  控制顯示垂直方向的分割線，值為none | beginning | middle | end其中的一個或者多個。
• dividerDrawableVertical
  設(shè)置子元素垂直方向的分割線。
• showDivider
  控制顯示水平和垂直方向的分割線，值為none | beginning | middle | end其中的一個或者多個。
• dividerDrawable
  設(shè)置水平和垂直方向的分割線，但是注意,如果同時和其他屬性使用，比如為 Flex 軸、子元素設(shè)置了justifyContent="space_around" 、alignContent="space_between" 等等。可能會看到意料不到的空間，因此應(yīng)該避免和這些值同時使用。

FlexboxLayout子元素屬性

• layout_order
  子元素默認(rèn)是按照元素的位置先后排列的，但是layout_order的值可以控制元素的排列順序，按照數(shù)字的大小排列，例如將第三個元素layout_order 設(shè)置-1

第三個元素出現(xiàn)在第一個的位置

• layout_flexGrow 元素放大比例，默認(rèn)為0，類似于 LinearLayout 中的layout_weight屬性，根據(jù)比例等分，如果有一個子元素的 layout_flexGrow 是一個正值，那么會將全部剩余空間分配給這個Item,如果有多個Item這個屬性都為正值，那么剩余空間的分配按照layout_flexGrow定義的比例等分。

• layout_flexShrink 子元素縮小比例，默認(rèn)為1，當(dāng)子元素多行時無效，
  如果所有子元素的layout_flexShrink 值為1,空間不足時，都等比縮小，如果有一個為0，其他為1，空間不足時，為0的不縮小，負(fù)值無效。

• layout_alignSelf 子元素的對齊方式， 允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋 alignItems 屬性。默認(rèn)值為auto，表示繼承父元素的 alignItems 屬性，如果沒有父元素，則等同于stretch。

• auto (default) 繼承父元素alignItems 屬性，父元素alignItems 屬性不存在則默認(rèn)stretch

• flex_start 同alignItems 的flex_start屬性

• flex_end 同alignItems 的flex_end屬性

• center 同alignItems 的cente屬性

• baseline 同alignItems 的baseline屬性

• stretch 同alignItems 的stretch屬性

• layout_flexBasisPercent 子元素占父容器長度的百分比，覆蓋了子元素自身的layout_width或layout_height，前提是父容器的長度或者寬度設(shè)置了值，否則無效

layout_flexBasisPercent

• **layout_minWidth / layout_minHeight ** 強制限定子元素的最小寬度或者最小高度，即使layout_flexShrink縮小比例，也會保證不小于子元素寬度或者高度的最小值

• **layout_maxWidth / layout_maxHeight ** 強制限定子元素的最大寬度或者最大高度，即使layout_flexGrow放大比例，也會保證不大于子元素寬度或者高度的最大值

• layout_wrapBefore 強制換行，即使父容器設(shè)置了flex_wrap=nowrap,依然將當(dāng)前元素?fù)Q到下一行的第一個元素顯示。

上面講到FlexboxLayout有兩個版本，內(nèi)部測試版，添加了與Recyclerview的結(jié)合。