Android FlexboxLayout 简单介绍

FlexboxLayout简介

FlexboxLayout是Google出的一个类似CSS Flexible Box Layout的控件，GitHub地址为：GitHub地址

它是一个ViewGroup，类似于LinearLayout和RelativeLayout，可以直接在XML里面使用。

介绍一下FlexboxLayout的主要五个属性

• flexDirection

• flexWrap

• justifyContent

• alignItems

• alignContent

---

flexDirection

设置子View的排列方式，可选项为：

属性值	意义
row	按行排列
row_reverse	按行从相反方向排列
column	按列排列
column_reverse	按倒叙排列

为了更直观的看出4种不同的排列方式，测试代码如下：

<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flexbox_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexDirection="row_reverse"
    app:flexWrap="nowrap"
    app:alignContent="stretch">

    <TextView
        android:id="@+id/text1"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="1" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="2" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="3" />
    <TextView
        android:id="@+id/text4"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="4" />
</com.google.android.flexbox.FlexboxLayout>

row为子View从左到右排列，row_reverse是从右到左排列，同理，colomn是从上到下排列，colomn_reverse是从下到上排列，子View的顺序是根据XML中定义的先后顺序为准。

flexWrap

flexWrap是一个针对于FlexboxLayou子View的属性，属性值如下：

属性名称	意义
nowrap	忽略子View的大小，所有的子View都排在一行或一列，空间不够则自动缩小子View的大小
wrap	保持子View的大小，空间不够，则换行或者换列
wrap_reverse	和wrap规则一样，但是按照相反的方向排列，类似于flexDirection的reverse

justifyContent

justifyContent是一个所有子View相对于父布局的对齐方式，作用于每一个子View

属性名称	意义
flex_start	从FlexboxLayout的Start方向开始排列
flex_end	从FlexboxLayout的end方向开始排列
center	从FlexboxLayout的中心排列
space_between	第一个和最后一个排列到FlexboxLayout的Start和End方向，中间的View规则为:（空白 View 空白） 空白的宽度（高度）计算公式为 以按行排列举例：所余宽度减去中间所有View的宽度再除以（中间所有View的个数+1）。
space_around	如果只有一个子View，则显示在FlexboxLayout中间，如果有一个以上，则在FlexboxLayout两边留一些空白，View之间也留有空白。View之间的空白 =（FlexboxLayout的宽度 - 所有子View的宽度）/ 子View的个数； FlexboxLayout左右的空白 = View之间的空白 / 2。

alignItems

子View的对齐方式，以按行排列为例

属性值	意义
flex_start	从FlexboxLayout的Start方向对齐，第一行不留空白，如果空间足够，则第一行以后空白，空白高度计算公式为：所余高度减去中间所有View的高度再除以（中间所有View的个数+1）；空间正好，则不留空白，空间不足，不留空白，顺序排列。
flex_end	从FlexboxLayout的End方向对齐，留白方式同上
center	从FlexboxLayout的Center方向对齐，留白方式和justifyContent的space_around相同
baseline	和flex_start相同
stretch	按行，占用完FlexboxLayout的高度，按列，占用完FlexboxLayout的宽度

可以使用冒号来定义对齐方式：

项目	价格	数量
Computer	1600 元	5
Phone	12 元	12
Pipe	1 元	234

alignContent

子View的内容对齐方式

属性名称	意义
flex_start	从FlexboxLayout的Start方向开始排列
flex_end	从FlexboxLayout的end方向开始排列
center	从FlexboxLayout的中心排列
space_between	第一个和最后一个排列到FlexboxLayout的Start和End方向，中间的View规则为:（空白 View 空白） 空白的宽度（高度）计算公式为 以按行排列举例：所余宽度减去中间所有View的宽度再除以（中间所有View的个数+1）。
space_around	如果只有一个子View，则显示在FlexboxLayout中间，如果有一个以上，则在FlexboxLayout两边留一些空白，View之间也留有空白。View之间的空白 =（FlexboxLayout的宽度 - 所有子View的宽度）/ 子View的个数； FlexboxLayout左右的空白 = View之间的空白 / 2。
stretch	按行，占用完FlexboxLayout的高度，按列，占用完FlexboxLayout的宽度

总结

先介绍到这里，如果有不对或者疑问请指出。。