Android可伸縮布局－FlexboxLayout(支持RecyclerView集成)

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="程序員"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="影視天堂"
    app:layout_flexGrow="1"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_flexGrow="1"
    app:layout_alignSelf="flex_start"
    android:text="美食"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_flexGrow="1"
    app:layout_alignSelf="flex_start"
    android:text="漫畫.手繪"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="廣告圈"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="旅行.在路上"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="娛樂八卦"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="青春"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="談寫作"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="短篇小說"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="散文"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    app:layout_alignSelf="flex_start"
    android:text="攝影"
    app:layout_order="2"
    android:gravity="center"
    android:textColor="@color/text_color"
    android:background="@drawable/label_bg_shape"
    />

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

很簡單，就一個布局文件，以FlexboxLayout為父布局，向容器里面添加子Item 就行了。要是不用這FlexboxLayout，以前要實現這樣的一個界面，需要自定義View，還是有點麻煩，網上也有很多通過自定義View來實現可伸縮變遷界面的，有興趣的可以去搜來看一下。要知道，這只是FlexboxLayout的冰山一角，FlexboxLayout真正強大的是它定義的這些屬性，通過設置不同的值可以得到不同的效果，接下來就看一下它支持哪些屬性。

4 . FlexboxLayout支持的屬性介紹

上面說了FlexboxLayout真正強大的是它定義的屬性，那么這一節我們看一下Flexbox支持哪些屬性,分為2個方面，FlexboxLayout支持的屬性和FlexboxLayout 子元素支持的屬性：

FlexboxLayout 支持的屬性：

flexDirection

flexDirection 屬性決定了主軸的方向，即FlexboxLayout里子Item的排列方向，有以下四種取值：

• row (default)： 默認值，主軸為水平方向，從左到右。
• row_reverse：主軸為水平方向，起點在有端，從右到左。
• column：主軸為豎直方向，起點在上端，從上到下。

• column_reverse：主軸為豎直方向，起點在下端，從下往上。

  文字有點蒼白無力，看一下四種排列的對比，就明白了：

Paste_Image.png

flexWrap

flexWrap 這個屬性決定Flex 容器是單行還是多行，并且決定副軸（與主軸垂直的軸）的方向。可能有以下3個值：

• noWrap: 不換行，一行顯示完子元素。
• wrap: 按正常方向換行。
• wrap_reverse: 按反方向換行。

justifyContent

justifyContent 屬性控制元素主軸方向上的對齊方式，有以下5種取值：

• flex_start (default): 默認值，左對齊
• flex_end: 右對齊
• center: 居中對齊
• space_between: 兩端對齊，中間間隔相同
• space_around: 每個元素到兩側的距離相等。

alignItems

alignItems 屬性控制元素在副軸方向的對齊方式，有以下5種取值：

• stretch (default) ：默認值，如果item沒有設置高度，則充滿容器高度。
• flex_start：頂端對齊
• flex_end：底部對齊
• center：居中對齊
• baseline：第一行內容的的基線對齊。