Android 彈性佈局 FlexboxLayout（一） ：flexDirection,flexWrap,justifyContent ,alignItems ,alignContent

簡介：

• Flex是 Flexible Box 的縮寫，意爲「彈性佈局」，

• 在前端css樣式中應用甚爲廣泛，之前做過React-Native和微信小程序，頁面佈局大多使用flex彈性佈局，可以在不同屏幕尺寸上提供一致的佈局結構，
  可以簡便、完整、響應式地實現各種頁面佈局

今天爲大家打開Android移動端的flex佈局大門–FlexboxLayout，在android中我們經常所見的標籤、流式佈局等都可以用FlexboxLayout來實現。

引入：

github : google / flexbox-layout

implementation 'com.google.android:flexbox:2.0.1'

//未用AndroidX
//implementation 'com.google.android:flexbox:1.0.0'

FlexboxLayout主要5大布局屬性，分別是flexDirection,flexWrap,justifyContent ,alignItems ,alignContent

flexDirection : 主軸方向

flex-direction 屬性決定主軸的方向（即內部子元素的排列方向）。

• row（默認值）：水平顯示，起點在左端

• row_reverse：水平顯示，起點在右端，與row相反的順序

• column：垂直顯示，起點在頂部

• column_reverse：垂直顯示，起點在底部，與column相反的順序

xml中使用app:flexDirection=“row”，代碼中使用flexboxLayout.setFlexDirection(FlexDirection.ROW)

flexWrap ：是否換行

flexWrap 決定是否換行

• nowrap（默認值）：不換行

• wrap：按正常方向換行，第一行在上方

• wrap_reverse：按反方向換行，第一行在下方

xml中使用app:flexWrap=“nowrap”，代碼中使用flexboxLayout.setFlexWrap(FlexWrap.NOWRAP)

justifyContent ：主軸對齊

justifyContent決定元素在主軸上的對齊方式

justify
英 [ˈdʒʌstɪfaɪ]
美 [ˈdʒʌstɪfaɪ]
v. 證明…正確(或正當、有理); 對…作出解釋; 爲…辯解(或辯護); 調整使全行排滿; 使每行排齊; 使齊行;

• flex_start（默認值）：主軸方向起點對齊

• flex_end：主軸方向終點對齊

• center： 主軸方向居中對齊

• space_between：主軸方向兩端對齊，元素之間的間隔都相等。

• space-around：每個元素兩側的間隔相等。所以，元素之間的間隔比元素與佈局邊框的間隔大一倍。

xml中使用app:justifyContent=“flex_start”，代碼中使用flexboxLayout.setJustifyContent(JustifyContent.FLEX_START)
注意這裏是 主軸方向 上的對齊方式即flexDirection屬性，例如主軸如果是row水平方向的，那麼center屬性就是水平居中，如果是column，那麼就是垂直方向居中。

alignItems ： 交叉軸對齊

alignItems決定元素在交叉軸方向上的對齊方式，「交叉軸」 我理解的就是 與主軸交叉垂直的方向，比如主軸是水平的，那麼交叉軸就是垂直方向的

• stretch（默認值）：交叉軸方向佔滿整個父佈局。

• flex_start交叉軸的起點對齊

• flex_end交叉軸的終點對齊。

• center交叉軸的居中對齊

• baseline元素第一行文字的基線對齊

alignContent ： 多根軸線對齊

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

• stretch（默認值）：軸線佔滿整個交叉軸。

• flex_start 交叉軸方向起點對齊

• flex_end 交叉軸方向終點對齊

• center 交叉軸方向居中對齊

• space_between 交叉軸方向兩端對齊，元素之間的間隔都相等

• space_around 每個元素兩側的間隔相等。所以，元素之間的間隔比元素與佈局邊框的間隔大一倍

alignContent是在多行的情況下起作用。也就是控制多行，如果子元素只有一行，則不起作用。
justifyContent設置主軸方向的對齊方式，
alignContent是設置交叉軸方向的對齊方式。
例如元素是水平方向換行，justifyContent設置center屬性就是水平居中，alignContent設置center屬性就是垂直居中。

測試：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexboxLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/black">

        <TextView
            android:id="@+id/tv0"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@android:color/holo_purple"
            android:gravity="center"
            android:text="tv0"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv1"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="#fd0202"
            android:gravity="center"
            android:text="tv1"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="50dp"
            android:layout_height="90dp"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:text="tv2"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="#38fd02"
            android:gravity="center"
            android:text="tv3"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv4"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="#02bafd"
            android:gravity="center"
            android:text="tv4"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv5"
            android:layout_width="30dp"
            android:layout_height="80dp"
            android:background="#020afd"
            android:gravity="center"
            android:text="tv5"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv6"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@android:color/holo_orange_light"
            android:gravity="center"
            android:text="tv6"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv7"
            android:layout_width="40dp"
            android:layout_height="70dp"
            android:background="#00ffff"
            android:gravity="center"
            android:text="tv7"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv8"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:background="#ff6699"
            android:gravity="center"
            android:text="tv8"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv9"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@android:color/holo_red_light"
            android:gravity="center"
            android:text="tv9"
            android:textColor="#ffffff" />

    </com.google.android.flexbox.FlexboxLayout>

    <TextView
        android:id="@+id/flexDirection0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="flexDirection: 主軸方向" />

    <!--   flexDirection  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/flexDirection1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ff00ff"
            android:gravity="center"
            android:text="ROW"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/flexDirection2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#8BC34A"
            android:gravity="center"
            android:text="ROW_REVERSE"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/flexDirection3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00BCD4"
            android:gravity="center"
            android:text="COLUMN"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/flexDirection4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#F44336"
            android:gravity="center"
            android:text="COLUMN_REVERSE"
            android:textColor="@android:color/white" />

    </LinearLayout>

    <TextView
        android:id="@+id/flexWrap0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="flexWrap: 是否換行" />

    <!--   flexWrap  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/flexWrap1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="NOWRAP"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/flexWrap2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="WRAP"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/flexWrap3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#03A9F4"
            android:gravity="center"
            android:text="WRAP_REVERSE"
            android:textColor="@android:color/white" />

    </LinearLayout>


    <TextView
        android:id="@+id/justifyContent0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="justifyContent: 主軸對齊" />

    <!--   justifyContent  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/justifyContent1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF5722"
            android:gravity="center"
            android:text="FLEX_START"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/justifyContent2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#8BC34A"
            android:gravity="center"
            android:text="FLEX_END"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/justifyContent3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#009688"
            android:gravity="center"
            android:text="CENTER"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/justifyContent4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="SPACE_BETWEEN"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/justifyContent5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="SPACE_AROUND"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/justifyContent6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#3F51B5"
            android:gravity="center"
            android:text="SPACE_EVENLY"
            android:textColor="@android:color/white" />

    </LinearLayout>


    <TextView
        android:id="@+id/alignItems0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="alignItems: 交叉軸對齊" />

    <!--   alignItems  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/alignItems1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#E91E63"
            android:gravity="center"
            android:text="FLEX_START"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignItems2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="FLEX_END"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignItems3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#52405E"
            android:gravity="center"
            android:text="CENTER"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignItems4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#509E20"
            android:gravity="center"
            android:text="BASELINE"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignItems5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#E91E63"
            android:gravity="center"
            android:text="STRETCH"
            android:textColor="@android:color/white" />

    </LinearLayout>

    <TextView
        android:id="@+id/alignContent0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="alignContent: 多根軸線對齊" />

    <!--   alignContent  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/alignContent1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF5722"
            android:gravity="center"
            android:text="FLEX_START"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignContent2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="FLEX_END"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignContent3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#03A9F4"
            android:gravity="center"
            android:text="CENTER"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignContent4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="SPACE_AROUND"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignContent5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#03091E"
            android:gravity="center"
            android:text="SPACE_BETWEEN"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/alignContent6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="STRETCH"
            android:textColor="@android:color/white" />

    </LinearLayout>
</LinearLayout>

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.test2)

        //flexDirection
        flexDirection0.text = "FlexDirection : " + flexboxLayout.flexDirection
        flexDirection1.setOnClickListener {
            flexboxLayout.flexDirection = FlexDirection.ROW   //默認
            flexDirection0.text = "FlexDirection.ROW"
        }
        flexDirection2.setOnClickListener {
            flexboxLayout.flexDirection = FlexDirection.ROW_REVERSE
            flexDirection0.text = "FlexDirection.ROW_REVERSE"
        }
        flexDirection3.setOnClickListener {
            flexboxLayout.flexDirection = FlexDirection.COLUMN
            flexDirection0.text = "FlexDirection.COLUMN"
        }
        flexDirection4.setOnClickListener {
            flexboxLayout.flexDirection = FlexDirection.COLUMN_REVERSE
            flexDirection0.text = "FlexDirection.COLUMN_REVERSE"
        }

        //flexWrap
        flexWrap0.text = "FlexWrap : " + flexboxLayout.flexWrap
        flexWrap1.setOnClickListener {
            flexboxLayout.flexWrap = FlexWrap.NOWRAP  //默認
            flexWrap0.text = "FlexWrap.NOWRAP"
        }
        flexWrap2.setOnClickListener {
            flexboxLayout.flexWrap = FlexWrap.WRAP
            flexWrap0.text = "FlexWrap.WRAP"
        }
        flexWrap3.setOnClickListener {
            flexboxLayout.flexWrap = FlexWrap.WRAP_REVERSE
            flexWrap0.text = "FlexWrap.WRAP_REVERSE"
        }

        //justifyContent
        justifyContent0.text = "JustifyContent: " + flexboxLayout.justifyContent
        justifyContent1.setOnClickListener {
            flexboxLayout.justifyContent = JustifyContent.FLEX_START  //默認
            justifyContent0.text = "JustifyContent.FLEX_START"
        }
        justifyContent2.setOnClickListener {
            flexboxLayout.justifyContent = JustifyContent.FLEX_END
            justifyContent0.text = "JustifyContent.FLEX_END"
        }
        justifyContent3.setOnClickListener {
            flexboxLayout.justifyContent = JustifyContent.CENTER
            justifyContent0.text = "JustifyContent.CENTER"
        }
        justifyContent4.setOnClickListener {
            flexboxLayout.justifyContent = JustifyContent.SPACE_BETWEEN
            justifyContent0.text = "JustifyContent.SPACE_BETWEEN"
        }
        justifyContent5.setOnClickListener {
            flexboxLayout.justifyContent = JustifyContent.SPACE_AROUND
            justifyContent0.text = "JustifyContent.SPACE_AROUND"
        }
        justifyContent6.setOnClickListener {
            flexboxLayout.justifyContent = JustifyContent.SPACE_EVENLY
            justifyContent0.text = "JustifyContent.SPACE_EVENLY"
        }


        //alignItems
        alignItems0.text = "AlignItems: " + flexboxLayout.alignItems
        alignItems1.setOnClickListener {
            flexboxLayout.alignItems = AlignItems.FLEX_START  //默認
            alignItems0.text = "AlignItems.FLEX_START"
        }
        alignItems2.setOnClickListener {
            flexboxLayout.alignItems = AlignItems.FLEX_END
            alignItems0.text = "AlignItems.FLEX_END"
        }
        alignItems3.setOnClickListener {
            flexboxLayout.alignItems = AlignItems.CENTER
            alignItems0.text = "AlignItems.CENTER"
        }
        alignItems4.setOnClickListener {
            flexboxLayout.alignItems = AlignItems.BASELINE
            alignItems0.text = "AlignItems.BASELINE"
        }
        alignItems5.setOnClickListener {
            flexboxLayout.alignItems = AlignItems.STRETCH
            alignItems0.text = "AlignItems.STRETCH"
        }

        //alignContent
        alignContent0.text = "AlignContent: " + flexboxLayout.alignContent
        alignContent1.setOnClickListener {
            flexboxLayout.alignContent = AlignContent.FLEX_START  //默認
            alignContent0.text = "AlignContent.FLEX_START"
        }
        alignContent2.setOnClickListener {
            flexboxLayout.alignContent = AlignContent.FLEX_END
            alignContent0.text = "AlignContent.FLEX_END"
        }
        alignContent3.setOnClickListener {
            flexboxLayout.alignContent = AlignContent.CENTER
            alignContent0.text = "AlignContent.CENTER"
        }
        alignContent4.setOnClickListener {
            flexboxLayout.alignContent = AlignContent.SPACE_AROUND
            alignContent0.text = "AlignContent.SPACE_AROUND"
        }
        alignContent5.setOnClickListener {
            flexboxLayout.alignContent = AlignContent.SPACE_BETWEEN
            alignContent0.text = "AlignContent.SPACE_BETWEEN"
        }
        alignContent6.setOnClickListener {
            flexboxLayout.alignContent = AlignContent.STRETCH
            alignContent0.text = "AlignContent.STRETCH"
        }
    }

}

效果圖：

默認

換行

flexDirection 切換

justifyContent .start

justifyContent .end

alignItems .start

alignItems .end

alignContent .start

alignContent .end

全居中