Android 彈性佈局 FlexboxLayout （三）：flex-item子view相關屬性

一、layout_order ： 排列順序

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="@android:color/black">

    <!--
        默認：  int ORDER_DEFAULT = 1;
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_order="2" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_order="-2" />

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

二、flex-shrink ： 縮小比例，超出空間怎麼壓縮

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="500dp"
    android:background="@android:color/black">

    <!--
        flex-shrink （縮小比例，超出空間怎麼壓縮）
        默認： float FLEX_SHRINK_DEFAULT = 1f;

        計算方法：
        孩子寬度和 = 150 * 3 = 450
        450 - 300 = 150 即超出父佈局寬度150
        tv1最終寬度 = 自身寬度150 - 超出寬度所佔比例的寬度150 * (2 / 4)  = 75
        tv2最終寬度 = 自身寬度150 - 超出寬度所佔比例的寬度150 * (1 / 4)  = 112.5
        tv3最終寬度 = 自身寬度150 - 超出寬度所佔比例的寬度150 * (1 / 4)  = 112.5
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexShrink="2" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexShrink="1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexShrink="1" />

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

三、flex-grow ： 放大比例，剩餘空間怎麼分配

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="@android:color/black">

    <!--
         flex-grow（放大比例，剩餘空間怎麼分配) : 權重
         float FLEX_GROW_DEFAULT = 0f;

         剩餘寬度 = 300 - (0 +  0 + 0) = 300
         tv1寬度 = 0 + 300 * (2 / 4) = 150
         tv2寬度 = 0 + 300 * (1 / 4) = 75
         tv3寬度 = 0 + 300 * (1 / 4) = 75
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexGrow="2" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexGrow="1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexGrow="1" />

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

四、align-self ： 子元素對齊

(對齊方式，取值和align相同，覆蓋align-items)

layout_alignSelf 屬性可以給子元素設置對齊方式，這個屬性的功能和alignItems一樣，

只不過alignItems作用於所有子元素，而 layout_alignSelf 作用於單個子元素。

默認值爲auto, 表示繼承alignItems屬性，如果爲auto以外的值，則會覆蓋alignItems屬性。有以下6種取值：

• auto (default)
• flex_start
• flex_end
• center
• baseline
• stretch

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout 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:background="#000000">


    <TextView
        android:id="@+id/tv6"
        android:layout_width="150dp"
        android:layout_height="300dp"
        android:background="#9C27B0"
        android:gravity="center"
        android:text="baseline"
        android:textColor="#ffffff"
        app:layout_alignSelf="baseline" />

    <TextView
        android:id="@+id/tv5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00BCD4"
        android:gravity="center"
        android:text="stretch"
        android:textColor="#ffffff"
        app:layout_alignSelf="stretch" />

    <TextView
        android:id="@+id/tv4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff8041"
        android:gravity="center"
        android:text="flex_start"
        android:textColor="#ffffff"
        app:layout_alignSelf="flex_start" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#05f20d"
        android:gravity="center"
        android:padding="5dp"
        android:text="auto"
        android:textColor="#ffffff"
        app:layout_alignSelf="auto" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0534f2"
        android:gravity="center"
        android:text="center"
        android:textColor="#ffffff"
        app:layout_alignSelf="center" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#f20505"
        android:gravity="center"
        android:text="flex_end"
        android:textColor="#ffffff"
        app:layout_alignSelf="flex_end" />


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

五、layout_flexBasisPercent (fraction) ： 子元素佔父元素百分比

layout_flexBasisPercent的值爲一個百分比，表示設置子元素的長度爲它父容器長度的百分比，如果設置了這個值，那麼通過這個屬性計算的值將會覆蓋layout_width或者layout_height的值。

但是需要注意，這個值只有設置了父容器的長度時纔有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默認值時-1。

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="@android:color/black">

    <!--
        layout_flexBasisPercent 
        決定了在分配多餘空間之前，子元素佔據的主軸空間的百分比。
        默認爲自身大小     
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexBasisPercent="40%" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexBasisPercent="30%" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexBasisPercent="20%" />

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