Android自动换行的流式布局

我们在开发过程中经常会遇到列表item宽度不定的情况，当显示不下时需要自动换行，常见的例子如一些热门话题标签、搜索热词等展示，今天我们就梳理出几种常用自动换行的流式布局来解决。

1.RecyclerView+自定义布局管理器

先自定义一个布局管理器：

/**
 * 自动换行布局管理
 */
public class WrapLayoutManager extends RecyclerView.LayoutManager {
    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(
                RecyclerView.LayoutParams.WRAP_CONTENT,
                RecyclerView.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        // super.onLayoutChildren(recycler, state);
        detachAndScrapAttachedViews(recycler);
        int sumWidth = getWidth();

        int curLineWidth = 0;
        int curLineTop = 0;
        int lastLineMaxHeight = 0;
        for (int i = 0; i < getItemCount(); i++) {
            View view = recycler.getViewForPosition(i);

            addView(view);
            measureChildWithMargins(view, 0, 0);
            int width = getDecoratedMeasuredWidth(view);
            int height = getDecoratedMeasuredHeight(view);

            curLineWidth += width;
            if (curLineWidth <= sumWidth) {//不需要换行
                layoutDecorated(view, curLineWidth - width, curLineTop, curLineWidth, curLineTop + height);
                //比较当前行多个item的最大高度
                lastLineMaxHeight = Math.max(lastLineMaxHeight, height);
            } else {//换行
                curLineWidth = width;
                if (lastLineMaxHeight == 0) {
                    lastLineMaxHeight = height;
                }
                //记录当前行top
                curLineTop += lastLineMaxHeight;

                layoutDecorated(view, 0, curLineTop, width, curLineTop + height);
                lastLineMaxHeight = height;
            }
        }
    }
}

RecyclerView设置此布局管理

WrapLayoutManager wrapLayoutManager = new WrapLayoutManager();
wrapLayoutManager.setAutoMeasureEnabled(true);
mRv.setLayoutManager(wrapLayoutManager);
WrapRecycleViewAdapter adapter = new WrapRecycleViewAdapter(mNameList, this);
mRv.setAdapter(adapter);

2. RecyclerView+原生流式布局管理FlexBoxLayoutManager

//设置布局管理器
FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
//flexDirection 属性决定主轴的方向（即项目的排列方向）。类似 LinearLayout 的 vertical 和 horizontal。
flexboxLayoutManager.setFlexDirection(FlexDirection.ROW); //主轴为水平方向，起点在左端。
//flexWrap 默认情况下 Flex 跟 LinearLayout 一样，都是不带换行排列的，但是flexWrap属性可以支持换行排列。
flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP); //按正常方向换行
//justifyContent 属性定义了项目在主轴上的对齐方式。
flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START); //交叉轴的起点对齐。
mRv.setLayoutManager(flexboxLayoutManager);
WrapRecycleViewAdapter adapter = new WrapRecycleViewAdapter(mNameList, this);
mRv.setAdapter(adapter);

需要注意：需设置flexWrap=FlexWrap.WRAP才能实现换行效果，不设置默认是换不了行的

3.原生FlexBoxLayout添加子view

直接xml布局文件里写一个FlexboxLayout容器

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flex_box_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:flexDirection="row"
        app:flexWrap="wrap"
        android:background="#979797"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后在代码中添加子view

for (int i = 0; i < mNameArray.length; i++) {
    View view = LayoutInflater.from(this).inflate(R.layout.item_wrap_rv, null);
    TextView switchName = view.findViewById(R.id.txt_switch_name);
    switchName.setText(mNameArray[i]);
    mFlexboxLayout.addView(view);
}

4.原生FlexBoxLayout添加子view+可滑动的父view（ScrollView、NestedScrollView等）

之所以会提出这种方式，是方式3中仅用原生FlexBoxLayout添加子view不支持滑动，在全部内容超过一屏时，超出部分不会显示，无法查看。

这里布局包含两个不同的FlexboxLayout容器，并各自配有title

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_switch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="switch" />

        <com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flex_box_layout_switch"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#979797"
            app:flexDirection="row"
            app:flexWrap="wrap" />

        <TextView
            android:id="@+id/tv_step"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="step" />

        <com.google.android.flexbox.FlexboxLayout
            android:id="@+id/flex_box_layout_step"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#979797"
            app:flexDirection="row"
            app:flexWrap="wrap" />
    </LinearLayout>

</androidx.core.widget.NestedScrollView>

分别添加不同的内容

for (int i = 0; i < mSwitchArray.length; i++) {
    View view = LayoutInflater.from(this).inflate(R.layout.item_wrap_rv, null);
    TextView switchName = view.findViewById(R.id.txt_switch_name);
    switchName.setText(mSwitchArray[i]);
    mFlexboxLayoutSwitch.addView(view);
}

for (int i = 0; i < mStepArray.length; i++) {
    View view = LayoutInflater.from(this).inflate(R.layout.item_wrap_rv, null);
    TextView switchName = view.findViewById(R.id.txt_switch_name);
    switchName.setText(mStepArray[i]);
    mFlexboxLayoutStep.addView(view);
}

下面来说说四种方式的优缺点：

方式1：需要自定义一个布局管理器，里面还要有各种计算，比较复杂繁琐，而且不支持滑动。（不推荐）

方式2：方式1的演进，而且还是谷歌自己开发的，适用性更好，支持滑动。（强烈推荐）

方式3：原生控件，使用较为方便，但不支持滑动。（在数据量小确保不会超出一屏时使用，一般推荐）

方式4：原生控件，使用更加灵活，适用性也强，同时支持滑动，担心滑动冲突时可以使用NestedScrollView。（强烈推荐）