我们在开发过程中经常会遇到列表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。(强烈推荐)