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容器

然后在代码中添加子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

分别添加不同的内容

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。（强烈推荐）