Android FlexboxLayout使用方式

官方demo 地址

FlexboxLayout是一个Library，将CSS Flexible Box Layout Module的类似功能 引入了Android。

安装

将以下依赖项添加到build.gradle文件中：

dependencies {
    implementation 'com.google.android:flexbox:2.0.1'
}

从1.1.0版开始，该库与AndroidX一起使用。如果使用的是1.1.0或更高版本，请迁移到AndroidX。
如果尚未迁移到AndroidX，请使用1.0.0。

用法

FlexboxLayout 可以理解为高级的 LinearLayout，因为这两个布局都将其子视图按序排列。二者之间的重要差异在于 FlexboxLayout 具有 “换行” 的特性。同时 FlexboxLayout 还为 RecycleView 提供了管理器 FlexboxLayoutManager。

<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="wrap_content"
    android:layout_height="match_parent"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:alignContent="stretch" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="1"
        app:layout_flexGrow="1.0" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="2"
        app:layout_wrapBefore="true" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="3" />
com.google.android.flexbox.FlexboxLayout>

也可以通过代码设置排列方向等：

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);

属性

1. flexDirection 主轴项目排列方向。类似 LinearLayout 的 vertical 和 horizontal，但是 FlexboxLayout 更加强大，还可以设置不同的排列的起点。

• row：默认值，主轴为水平方向，起点在左端
• row_reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column_reverse：主轴为垂直方向，起点在下沿

2. flexWrap 换行方式

• nowrap ：默认值，不换行
• wrap：按正常方向换行
• wrap_reverse：按反方向换行

3. justifyContent 在主轴上的对齐方式

• flex_start：默认值，左对齐
• flex_end：右对齐
• center： 居中
• space_between：两端对齐，项目之间的间隔都相等
• space_around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

4. alignItems 在副轴轴上如何对齐

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐，如果没有文本基线，那么默认基线就是左上角
• stretch：默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度
  

子元素属性

• layout_order（整数）

  此属性可以更改子级视图的顺序布局。默认情况下，子级的显示和布局顺序与布局XML中的显示顺序相同。如果未指定，1则设置为默认值。

• layout_flexGrow（浮动）

  此属性确定如果相对于同一弹性行中包含的其他弹性项目分配正的可用空间，则此子代将增长多少。如果flex项目的layout_flexGrow值为正，则该项目将占用flex行中的剩余空间。如果同一弹性行中的多个弹性项目具有正值layout_flexGrow ，则剩余可用空间将根据其声明layout_flexGrow值的比例进行分配 。（类似于中的layout_weight属性LinearLayout）如果未指定，0则设置为默认值。

• layout_flexShrink（浮动）

  此属性确定如果相对于同一伸缩行中包含的其余其他伸缩项分配负的可用空间，则此子级将收缩多少。如果未指定，1则设置为默认值。

• layout_alignSelf

  该属性确定沿横轴（垂直于主轴）的对齐方式。相同方向上的对齐方式可以由alignItems父级中的来确定 ，但是如果将其设置为以外的值 auto，则此子级的交叉轴对齐方式将被覆盖。

• layout_flexBasisPercent（分数）

  弹性项目的初始长度（相对于其父项的分数格式）。试图将此子视图的初始主尺寸扩展为相对于父主尺寸的指定分数。如果设置了此值，则layout_width （或layout_height）指定的长度将被此属性的计算值所覆盖。仅当父级的长度是确定的（MeasureSpec模式为MeasureSpec.EXACTLY）时，此属性才有效 。默认值为-1，表示未设置。

• layout_minWidth / layout_minHeight（尺寸）

  这些属性对FlexboxLayout的子代施加最小大小限制。子视图的收缩程度不会小于这些属性的值（基于属性的变化 flexDirection，即哪个属性沿主轴施加了大小约束），而与layout_flexShrink属性无关。

• layout_maxWidth / layout_maxHeight（尺寸）

  这些属性对FlexboxLayout的子代施加最大大小限制。子视图的扩展范围不会超过这些属性的值（基于属性的变化 flexDirection，即哪个属性沿主轴施加了大小约束），而与该layout_flexGrow属性无关。

• layout_wrapBefore（布尔值）

  此属性强制进行换行，默认值为false。即，如果将其设置true为弹性项目，则该项目将成为弹性行的第一项。（不管上一个flex行中正在处理的flex项目如何，都会发生换行。）如果该flex_wrap属性设置为，则忽略此属性nowrap。原始CSS Flexible Box Module规范中未定义等效属性，但是具有此属性对Android开发人员很有用。例如，在构建类似网格的布局时或在开发人员想要放置新的伸缩线以使其与先前的布局产生语义差异的情况下，使布局变平。

和 RecyclerView 配合

RecyclerView mRecyclerView = (RecyclerView)findViewById(R.id.test_recyclerView);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexWrap(FlexWrap.WRAP); //设置是否换行        
layoutManager.setFlexDirection(FlexDirection.ROW); // 设置主轴排列方式
layoutManager.setAlignItems(AlignItems.STRETCH);
layoutManager.setJustifyContent(JustifyContent.FLEX_START);
mRecyclerView.setLayoutManager(layoutManager);

Adapter 中绑定 View 的时候，设置子元素的属性

if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
    flexboxLp.setFlexGrow(1.0f);
    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}