Android FlexboxLayout 佈局詳解

笑葉林發表於2018-10-23
AndroidFlex

FlexboxLayout 是16年 Google I/O 上開源的一個佈局控制元件，使得 Android 裡的 CSS Flexible Layout 模組也能擁有同樣強大的功能。同時還發布了強大的ConstraintLayout，感興趣的同學可以去看看 Android ConstraintLayout 詳解。FlexboxLayout 可以理解為高階的 LinearLayout ，因為這兩個佈局都將其子檢視按序排列。二者之間的重要差異在於 FlexboxLayout 具有 換行 的特性。同時 FlexboxLayout 還為 RecycleView 提供了管理器 FlexboxLayoutManager，使得 FlexboxLayout 更加強大了。

FlexboxLayout 專案開源地址：flexbox-layout

本篇文章demo原始碼地址：FlexboxLayoutDemo

匯入依賴

dependencies {
    //FlexboxLayout
    implementation 'com.google.android:flexbox:1.0.0'
}
複製程式碼

注意：從1.1.0開始，這個庫將與AndroidX一起使用。如果您使用1.1.0或以上版本，請遷移到AndroidX。 如果您還沒有遷移到AndroidX，請使用1.0.0。

示例

XML佈局檔案

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/flexbox_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="120dp"
        android:layout_height="20dp"
        android:layout_margin="2dp"
        android:background="#43eeff"
        android:gravity="center"
        android:text="1"/>

    <TextView
        android:id="@+id/textview2"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_margin="2dp"
        android:background="#ef3344"
        android:gravity="center"
        android:text="2"/>

    <TextView
        android:id="@+id/textview3"
        android:layout_width="120dp"
        android:layout_height="90dp"
        android:layout_margin="2dp"
        android:background="#ee998f"
        android:gravity="center"
        android:text="3"/>

    <TextView
        android:id="@+id/textview4"
        android:layout_width="120dp"
        android:layout_height="100dp"
        android:layout_margin="2dp"
        android:background="#eeff22"
        android:gravity="center"
        android:text="4"/>

    <TextView
        android:id="@+id/textview5"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_margin="2dp"
        android:background="#3322ff"
        android:gravity="center"
        android:text="5"/>

</com.google.android.flexbox.FlexboxLayout>
複製程式碼

執行後的效果如下圖：

Android FlexboxLayout 佈局詳解

我們可以看到並沒有換行，和我們使用 LinearLayout 並沒有區別，接下來我們看下 FlexboxLayout 的一些常用屬性。

FlexboxLayout 常用屬性

flexDirection

flexDirection 屬性決定主軸專案排列方向。類似 LinearLayout 的 vertical 和 horizontal，但是 FlexboxLayout 更加強大，不僅支援橫向和縱向還可以設定不同的排列的起點。

  • row（預設值）：主軸為水平方向，起點在左端。
  • row_reverse：主軸為水平方向，起點在右端。
  • column：主軸為垂直方向，起點在上沿。
  • column_reverse：主軸為垂直方向，起點在下沿。

下面我們在xml中新增 flexDirection 屬性，並設定起點在下端：

app:flexDirection="column_reverse"
複製程式碼

執行後的效果如下圖：

Android FlexboxLayout 佈局詳解

可以看到專案是從底部開始由下而上排列的。

flexWrap

預設 FlexboxLayout 和 LinearLayout 一樣是不帶換行屬性的，但是 flexWrap 屬性可以支援換行排列。這就是 FlexboxLayout 方便的地方了。換行方式有兩種，一種是按專案排列方向換行，一種是反方向換行。

  • nowrap （預設）：不換行。

  • wrap：按正常方向換行。

  • wrap_reverse：按反方向換行。

下面我們在xml中新增 flexWrap 屬性，按照正常方向換行：

app:flexWrap="wrap"
複製程式碼

執行後的效果如下圖：

Android FlexboxLayout 佈局詳解

justifyContent

justifyContent 屬性定義了專案在主軸上的對齊方式。

  • flex_start（預設值）：左對齊。

  • flex_end ：右對齊。

  • center ： 居中。

  • space_between ：兩端對齊，專案之間的間隔都相等。

  • space_around ：每個專案兩側的間隔相等。專案之間的間隔比專案與邊框的間隔大一倍。

下面我們在xml中新增 justifyContent 屬性，設定右對齊：

app:justifyContent="flex_end"
複製程式碼

執行後的效果如下圖：

Android FlexboxLayout 佈局詳解

如果需要在專案的排列方向上均分剩餘的空間怎麼辦呢？很簡單space_around屬性就是這樣的，效果如下圖

Android FlexboxLayout 佈局詳解

alignItems

alignItems 屬性定義專案在副軸軸上如何對齊，我們通過一張圖來了解這個屬性比較直觀一點。

  • flex_start：交叉軸的起點對齊。

  • flex_end：交叉軸的終點對齊。

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

  • baseline: 專案的第一行文字的基線對齊。

  • stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

Android FlexboxLayout 佈局詳解

這也是為什麼我們的每一個專案的高度都是不相同的，但是可以看到前面每個專案的高度都是一樣的，因為預設屬性 stretch 讓每個專案的高度設定為了填滿容器的高度（這裡的高度是指同一軸上的最高高度） 現在我們設定對齊方式為中心對齊，新增屬性:

app:alignItems="center"
複製程式碼

執行後的效果如下圖：

Android FlexboxLayout 佈局詳解

可以看到是根據每個專案的中心對齊，這裡單獨說一下baseline屬性，熟悉ConstraintLayout的同學應該比較好理解這個屬性，其實就是按照專案內的文字線來對齊專案。效果如下

Android FlexboxLayout 佈局詳解

可以看到專案對齊是按照專案內的文字基線來對齊的。很好理解！需要注意的是專案中如果有的沒有文字基線，那麼預設他的基線就是左上角也就是起點左右位置。

Android FlexboxLayout 佈局詳解

alignContent

alignContent 屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

  • flex_start：與交叉軸的起點對齊。

  • flex_end：與交叉軸的終點對齊。

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

  • space_between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

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

  • stretch（預設值）：軸線佔滿整個交叉軸。

alignContent 和 justifyContent 其實裡面的屬性值都是一樣的 ，一個是設定主軸的對齊方式，一個是設定多個軸的對齊方式，通俗的講可以理解為比如是專案是水平換行，justifyContent就是設定垂直方向的對齊方式，如果專案是垂直方向對齊方式，那麼justifyContent就是設定水平方向的對齊方式。現在我們想讓每個專案距離上右下左的距離是一樣的，需要把alignContent和justifyContent都設定為space_around就可以了。

app:alignContent="space_around"
app:justifyContent="space_around"
複製程式碼

執行後的效果如下圖:

Android FlexboxLayout 佈局詳解

showDividerHorizontal

showDividerHorizontal 控制顯示水平方向的分割線，值為none | beginning | middle | end其中的一個或者多個。

dividerDrawableHorizontal

dividerDrawableHorizontal 設定Flex 軸線之間水平方向的分割線。

showDividerVertical

showDividerVertical 控制顯示垂直方向的分割線，值為none | beginning | middle | end其中的一個或者多個。

dividerDrawableVertical

dividerDrawableVertical 設定子元素垂直方向的分割線。

showDivider

showDivider 控制顯示水平和垂直方向的分割線，值為none | beginning | middle | end其中的一個或者多個。

dividerDrawable

dividerDrawable 設定水平和垂直方向的分割線，但是注意,如果同時和其他屬性使用，比如為 Flex 軸、子元素設定了justifyContent="space_around" 、alignContent="space_between" 等等。可能會看到意料不到的空間，因此應該避免和這些值同時使用。

子元素屬性

除以上之外，FlexboxLayout 不僅有自身的屬性，還可以設定子元素的屬性。這也是 FlexboxLayout 能完成聰明佈局的原因之一。

layout_order

預設情況下子元素的排列方式按照文件流的順序依次排序，而 order 屬性可以控制排列的順序，負值在前，正值在後，按照從小到大的順序依次排列。簡而言之就是你可以定義子元素的排列順序。

我們給子元素加上 order 屬性並且自定義他們的順序。

Android FlexboxLayout 佈局詳解

layout_flexGrow

layout_flexGrow 屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。其實就是 LinearLayout 中的weight屬性，如果所有專案的layout_flexGrow 屬性都為1，則它們將等分剩餘空間。如果一個專案的layout_flexGrow 屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。

layout_flexShrink

layout_flexShrink 屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小（設定了換行則無效）。如果所有專案的 layout_flexShrink 屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的 flex-shrink 屬性為0，其他專案都為1，則空間不足時，前者不縮小。負值對該屬性無效。

layout_alignSelf

layout_alignSelf 屬性允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋 alignItems 屬性。預設值為auto，表示繼承父元素的 alignItems 屬性，如果沒有父元素，則等同於stretch。

  • auto (default)

  • flex_start

  • flex_end

  • center

  • baseline

  • stretch

該屬性可能取6個值，除了auto，其他都與align_items屬性完全一致，我們設定alignItems為flex_start屬性，其中一個子元素設定layout_alignSelf屬性為baseline。

baseline的基線是第一個元素的 baseline基線。

layout_flexBasisPercent

layout_flexBasisPercent 屬性定義了在分配多餘空間之前，子元素佔據的主軸空間的百分比。它的預設值為auto，即子元素的本來大小。

我們設定第一個和第三個都佔據的主軸空間的80%，給子元素新增屬性

app:layout_flexBasisPercent
複製程式碼

Android FlexboxLayout 佈局詳解

FlexboxLayout 的屬性基本講解完了，如果一臉懵逼那麼請 看第二遍。FlexboxLayout 能幫你完成各種你需要的佈局，可謂 LinearLayout 的加強版。比如我們需要做一個類似於Tag標籤的佈局，那麼 FlexboxLayout 能幫你輕輕鬆鬆實現。這裡需要用到 FlexboxLayoutManager,也就是 FlexboxLayout 對 RecycleView 提供的佈局管理器 佈局中新增RecycleView。

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
複製程式碼

程式碼中對RecycleView新增布局管理器，並設定 FlexboxLayout 的主屬性

RecyclerView recyclerView = findViewById(R.id.recyclerView);
    FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
    flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);
    flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);
    flexboxLayoutManager.setAlignItems(AlignItems.STRETCH);
    flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);
    recyclerView.setLayoutManager(flexboxLayoutManager);
複製程式碼

執行後的效果如下圖：

Android FlexboxLayout 佈局詳解

輕輕鬆鬆實現了Tag標籤的效果，是不是很簡單，同樣的方式我們還可以實現一個圖片流佈局。

FlexboxLayout的使用現在已經講解完了，相信各位對這個控制元件的強大已經有所瞭解了，不妨親自動手感受下這個控制元件的強大。Google開放了越來越多的控制元件和開發輔助工具，對於開發者的我們來說當然是好的。當然我們自己也要保持一顆熱愛學習的心，不要抗拒新的東西，不斷學習 充實自己！ 知行合一。



reference

相關文章