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的宽度

总结

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