自定义流式布局FlowLayout(可指定显示行数)
FlowLayout
/**
* Cerated by xiaoyehai
* Create date : 2021/1/11 15:02
* description :自定义流式布局(可指定显示行数)
*/
public class FlowLayout extends LinearLayout {
/**
* 默认间距
*/
public static final int DEFAULT_SPACING = AppUtils.dp2px(10);
/**
* 横向间隔
*/
private int mHorizontalSpacing = DEFAULT_SPACING;
/**
* 纵向间隔
*/
private int mVerticalSpacing = DEFAULT_SPACING;
/**
* 是否需要布局，只用于第一次
*/
boolean mNeedLayout = true;
/**
* 每一行是否平分空间:将剩余空间平均分配给每个子控件
*/
private boolean isAverageInRow = false;
/**
* 当前行已用的宽度，由子View宽度加上横向间隔
*/
private int mUsedWidth = 0;
/**
* 行的集合
*/
private final List<Line> mLines = new ArrayList<>();
/**
* 行对象
*/
private Line mLine = null;
/**
* 最大的行数
*/
private int mMaxLinesCount = Integer.MAX_VALUE;
public FlowLayout(Context context) {
this(context, null);
}
public FlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
* 设置横向间隔
*
* @param spacing
*/
public void setHorizontalSpacing(int spacing) {
if (mHorizontalSpacing != spacing) {
mHorizontalSpacing = spacing;
requestLayoutInner();
}
}
/**
* 设置纵向间隔
*
* @param spacing
*/
public void setVerticalSpacing(int spacing) {
if (mVerticalSpacing != spacing) {
mVerticalSpacing = spacing;
requestLayoutInner();
}
}
/**
* 设置最大行数
*
* @param count
*/
public void setMaxLines(int count) {
if (mMaxLinesCount != count) {
mMaxLinesCount = count;
requestLayoutInner();
}
}
/**
* 每一行是否平分空间
*
* @param isAverageInRow
*/
public void setIsAverageInRow(boolean isAverageInRow) {
if (isAverageInRow != isAverageInRow) {
this.isAverageInRow = isAverageInRow;
requestLayoutInner();
}
}
private void requestLayoutInner() {
AppUtils.runOnUIThread(new Runnable() {
@Override
public void run() {
requestLayout();
}
});
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//获取自定义控件宽度
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingRight() - getPaddingLeft();
//获取自定义控件高度
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
//获取自定义控件的宽高测量模式
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
restoreLine();// 还原数据，以便重新记录
//获取子控件数量
final int count = getChildCount();
//测量每个子控件的大小，决定什么时候需要换行
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == GONE) {
continue;
}
//如果父控件是确定模式，子控件就包裹内容，否则子控件模式和父控件一样
int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(sizeWidth,
modeWidth == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeWidth);
int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(sizeHeight,
modeHeight == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeHeight);
//测量子控件
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
//如果当前行对象为空，初始化一个行对象
if (mLine == null) {
mLine = new Line();
}
//获取子控件宽度
int childWidth = child.getMeasuredWidth();
mUsedWidth += childWidth;// //当前已使用宽度增加一个子控件
//是否超出边界
if (mUsedWidth <= sizeWidth) { //没有超出边界
mLine.addView(child);// //给当前行添加一个子控件
mUsedWidth += mHorizontalSpacing;// 加上间隔
if (mUsedWidth >= sizeWidth) { //增加水平间距后，超出边界，需要换行
if (!newLine()) {
//创建行失败，表示已经100行，不能在创建了，结束循环，不再添加
break;
}
}
} else {///超出边界
if (mLine.getViewCount() == 0) { //1.当前没有控件，一添加控件就超出边界(子控件很长)
mLine.addView(child);//强制添加到当前行
if (!newLine()) {// 换行
break;
}
} else {
//2.当前有控件，一添加控件就超出边界
//先还行，再添加
if (!newLine()) {// 换行
break;
}
// 在新的一行，不管是否超过长度，先加上去，因为这一行一个child都没有，所以必须满足每行至少有一个child
mLine.addView(child);
mUsedWidth += childWidth + mHorizontalSpacing;
}
}
}
//保存最后一行到集合
if (mLine != null && mLine.getViewCount() > 0 && !mLines.contains(mLine)) {
// 由于前面采用判断长度是否超过最大宽度来决定是否换行，则最后一行可能因为还没达到最大宽度，所以需要验证后加入集合中
mLines.add(mLine);
}
//控件整体宽度
int totalWidth = MeasureSpec.getSize(widthMeasureSpec);
// 控件整体高度
int totalHeight = 0;
final int linesCount = mLines.size();
for (int i = 0; i < linesCount; i++) {// 加上所有行的高度
totalHeight += mLines.get(i).mHeight;
}
totalHeight += mVerticalSpacing * (linesCount - 1);// 加上所有间隔的高度
totalHeight += getPaddingTop() + getPaddingBottom();// 加上padding
//根据最新宽高测量整体布局的大小
// 设置布局的宽高，宽度直接采用父view传递过来的最大宽度，而不用考虑子view是否填满宽度，因为该布局的特性就是填满一行后，再换行
// 高度根据设置的模式来决定采用所有子View的高度之和还是采用父view传递过来的高度
setMeasuredDimension(totalWidth, resolveSize(totalHeight, heightMeasureSpec));
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (!mNeedLayout || changed) {// 没有发生改变就不重新布局
mNeedLayout = false;
int left = getPaddingLeft();// 获取最初的左上点
int top = getPaddingTop();
//遍历所以行对象，设置每行位置
final int linesCount = mLines.size();
for (int i = 0; i < linesCount; i++) {
final Line oneLine = mLines.get(i);
oneLine.layoutView(left, top);// 布局每一行
top += oneLine.mHeight + mVerticalSpacing;// 更新top值，为下一行的top赋值
}
}
}
/**
* 还原所有数据
*/
private void restoreLine() {
mLines.clear();
mLine = new Line();
mUsedWidth = 0;
}
/**
* 换行方法
*/
private boolean newLine() {
mLines.add(mLine); //把上一行添加到集合
if (mLines.size() < mMaxLinesCount) {
//如果可以继续添加行
mLine = new Line();
mUsedWidth = 0; //宽度清零
return true;
}
return false;
}
// ==========================================================================
// Inner/Nested Classes
// ==========================================================================
/**
* 代表着一行，封装了一行所占高度，该行子View的集合，以及所有View的宽度总和
*/
class Line {
int mWidth = 0;// 该行中所有的子View累加的宽度
int mHeight = 0;// 该行中所有的子View中高度最高的那个子View的高度
/**
* 一行子控件的集合
*/
List<View> views = new ArrayList<View>();
/**
* 添加一个子控件
*
* @param view
*/
public void addView(View view) {// 往该行中添加一个
views.add(view);
mWidth += view.getMeasuredWidth();
int childHeight = view.getMeasuredHeight();
mHeight = mHeight < childHeight ? childHeight : mHeight;// 高度等于一行中最高的View
}
/**
* 获取当前行子控件的个数
*
* @return
*/
public int getViewCount() {
return views.size();
}
/**
* 摆放行对象
*
* @param l
* @param t
*/
public void layoutView(int l, int t) {// 布局
int left = l;
int top = t;
int count = getViewCount();
// 总宽度
int layoutWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
// 剩余的宽度，是除了View和间隙的剩余空间
//将剩余空间平均分配给每个子控件
int surplusWidth = layoutWidth - mWidth - mHorizontalSpacing * (count - 1);
if (surplusWidth >= 0) {// 剩余空间
// 采用float类型数据计算后四舍五入能减少int类型计算带来的误差
int splitSpacing = (int) (surplusWidth / count + 0.5); //平均每个控件分配的大小
for (int i = 0; i < count; i++) {
final View view = views.get(i);
int childWidth = view.getMeasuredWidth();
int childHeight = view.getMeasuredHeight();
// 当控件比较矮时，需要居中展示
// 计算出每个View的顶点，是由最高的View和该View高度的差值除以2
int topOffset = (int) ((mHeight - childHeight) / 2.0 + 0.5);
if (topOffset < 0) {
topOffset = 0;
}
// 把剩余空间平均到每个View上
if (isAverageInRow) {
childWidth = childWidth + splitSpacing;
}
view.getLayoutParams().width = childWidth;
if (isAverageInRow) {
if (splitSpacing > 0) {// View的长度改变了，需要重新measure
int widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
int heightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
view.measure(widthMeasureSpec, heightMeasureSpec);
}
}
// 布局View
view.layout(left, top + topOffset, left + childWidth, top + topOffset + childHeight);
left += childWidth + mHorizontalSpacing; // 为下一个View的left赋值
}
} else {
if (count == 1) {
//没有剩余空间
//这个控件很长，占满整行
View view = views.get(0);
view.layout(left, top, left + view.getMeasuredWidth(), top + view.getMeasuredHeight());
} else {
// 走到这里来，应该是代码出问题了，目前按照逻辑来看，是不可能走到这一步
}
}
}
}
}
使用
<?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"
tools:context=".ui.FlowLayoutActivity">
<com.zly.flowlayoutdemo.widget.FlowLayout
android:id="@+id/flowLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
FlowLayoutActivity
public class FlowLayoutActivity extends AppCompatActivity {
private FlowLayout mFlowLayout;
private List<String> mDatas;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flow_layout);
mFlowLayout = (FlowLayout) findViewById(R.id.flowLayout);
loadData();
staticAddView();
//动态添加View
//dynamicAddView();
}
private void staticAddView() {
int padding10 = AppUtils.dp2px(10);
mFlowLayout.setPadding(padding10, padding10, padding10, padding10);
for (int i = 0; i < mDatas.size(); i++) {
TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mFlowLayout, false);
String s = mDatas.get(i);
textView.setText(s);
mFlowLayout.addView(textView);
textView.setOnClickListener(v -> Toast.makeText(FlowLayoutActivity.this, s, Toast.LENGTH_SHORT).show());
}
mFlowLayout.setMaxLines(5); //设置最大行数
}
private void dynamicAddView() {
int padding6 = AppUtils.dp2px(6);
int padding8 = AppUtils.dp2px(8);
int padding10 = AppUtils.dp2px(10);
int padding12 = AppUtils.dp2px(12);
mFlowLayout.setPadding(padding10, padding10, padding10, padding10);
mFlowLayout.setHorizontalSpacing(padding8); //水平间距
mFlowLayout.setVerticalSpacing(padding10); //竖直边距
for (int i = 0; i < mDatas.size(); i++) {
String key = mDatas.get(i);
TextView textView = new TextView(this);
textView.setText(key);
textView.setTextColor(Color.parseColor("#333333"));
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
textView.setPadding(padding12, padding6, padding12, padding6);
textView.setGravity(Gravity.CENTER);
textView.setBackgroundResource(R.drawable.shape_search_lable_bg);
mFlowLayout.addView(textView);
textView.setOnClickListener(v -> Toast.makeText(FlowLayoutActivity.this, key, Toast.LENGTH_SHORT).show());
}
mFlowLayout.setMaxLines(5); //设置最大行数
}
private void loadData() {
mDatas = new ArrayList<>();
for (int i = 0; i < 30; i++) {
if (i % 2 == 0) {
mDatas.add("数据" + i);
} else {
mDatas.add("数据数据数据" + i);
}
}
}
}
自定义流式布局ZFlowLayout(可以设置展开和收起按钮)
仿淘宝历史搜索效果：
ZFlowLayout
/**
* 实现流式布局，自定义ViewGroup，实现标签等 - 单行垂直居中 或 水平平分
* <p>
* 可以设置展开和收起按钮
*/
public class ZFlowLayout extends ViewGroup {
/**
* 存储每一行的剩余的空间
*/
private List<Integer> lineSpaces = new ArrayList<>();
/**
* 存储每一行的高度
*/
private List<Integer> lineHeights = new ArrayList<>();
/**
* 存储每一行的view
*/
private List<List<View>> lineViews = new ArrayList<>();
/**
* 提供添加view
*/
private List<View> children = new ArrayList<>();
/**
* 每一行是否平分空间
*/
private boolean isAverageInRow = false;
/**
* 每一列是否垂直居中
*/
private boolean isAverageInColumn = true;
private int mLineCount = 0;//行数
private int mTwoLineViewCount = 0;//前两行里面view的个数
//展开是最多显示几行
private int mExpandLineCount = 5;
//展开时显示view的个数
private int mExpandLineViewCount = 0;
public ZFlowLayout(Context context) {
super(context);
}
public ZFlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ZFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public int getLineCount() {
return mLineCount;
}
public int getTwoLineViewCount() {
return mTwoLineViewCount;
}
public int getExpandLineViewCount() {
return mExpandLineViewCount;
}
/**
* 设置是否每列垂直居中
*
* @param averageInColumn 是否垂直居中
*/
public void setAverageInColumn(boolean averageInColumn) {
if (isAverageInColumn != averageInColumn) {
isAverageInColumn = averageInColumn;
requestLayout();
}
}
/**
* 设置是否每一行居中
*
* @param averageInRow 是否水平平分
*/
public void setAverageInRow(boolean averageInRow) {
if (isAverageInRow != averageInRow) {
isAverageInRow = averageInRow;
requestLayout();
}
}
/**
* 动态添加view
*/
public void setChildren(List<View> children) {
if (children == null)
return;
this.children = children;
mLineCount = 0;
mTwoLineViewCount = 0;
mExpandLineViewCount = 0;
this.removeAllViews();
for (int i = 0; i < children.size(); i++) {
this.addView(children.get(i));
if (children.get(i) instanceof TextView) {
int finalI = i;
children.get(i).setOnClickListener(v -> {
if (mOnTagClickListener != null) {
mOnTagClickListener.onTagClick(children.get(finalI), finalI);
}
});
}
}
}
/**
* 重新方法用来获取子view的margin值
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//清除记录数据
lineSpaces.clear();
lineHeights.clear();
lineViews.clear();
//测量view的宽高
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int viewWidth = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int viewHeight = MeasureSpec.getSize(heightMeasureSpec);
//计算children的数量
int count = this.getChildCount();
//统计子view总共高度
int childrenTotalHeight = 0;
//一行中剩余的空间
int lineLeftSpace = 0;
int lineRealWidth = 0;
int lineRealHeight = 0;
List<View> list = new ArrayList<>();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
//不可见的View不作处理
if (child.getVisibility() == GONE)
continue;
//对子view进行测量
measureChild(child, widthMeasureSpec, heightMeasureSpec);
//获取子view的间距
MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
//获取view占据的空间大小
int childViewWidth = child.getMeasuredWidth() + params.leftMargin + params.rightMargin;
int childViewHeight = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;
// System.out.println("111111111 视图 " + " 子View宽度： " + childViewWidth + " lineRealWidth:" + lineRealWidth + " lineRealHeight ：" + lineRealHeight);
if (childViewWidth + lineRealWidth <= viewWidth) {// 一行
//已占用的空间
lineRealWidth += childViewWidth;
//剩余的空间
lineLeftSpace = viewWidth - lineRealWidth;
//一行的最大高度
lineRealHeight = Math.max(lineRealHeight, childViewHeight);
//将一行中的view加到同意个集合
list.add(child);
} else {// 下一行
if (list.size() != 0) {
// 统计上一行的总高度
childrenTotalHeight += lineRealHeight;
//上一行的高度
lineHeights.add(lineRealHeight);
//上一行剩余的空间
lineSpaces.add(lineLeftSpace);
//将上一行的元素保存起来
lineViews.add(list);
}
//重置一行中已占用的空间
lineRealWidth = childViewWidth;
//重置一行中剩余的空间
lineLeftSpace = viewWidth - lineRealWidth;
//重置一行中的高度
lineRealHeight = childViewHeight;
//更换新的集合存储下一行的元素
list = new ArrayList<>();
list.add(child);
}
if (i == count - 1) {// 最后一个元素
childrenTotalHeight += lineRealHeight;
// 将最后一行的信息保存下来
lineViews.add(list);
lineHeights.add(lineRealHeight);
lineSpaces.add(lineLeftSpace);
}
}
// 宽度可以不用考虑 主要考虑高度
if (heightMode == MeasureSpec.EXACTLY) {
setMeasuredDimension(viewWidth, viewHeight);
} else {
setMeasuredDimension(viewWidth, childrenTotalHeight);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// View最开始左边
int viewLeft = 0;
// View最开始上边
int viewTop = 0;
// 每一个view layout的位置
int vl;
int vt;
int vr;
int vb;
// 每一行中每一个view多平分的空间
float averageInRow;
// 每一列中每一个view距离顶部的高度
float averageInColumn;
// 列数
int columns = lineViews.size();
mLineCount = columns;
for (int i = 0; i < columns; i++) {
// 该行剩余的空间
int lineSpace = lineSpaces.get(i);
// 该行的高度
int lineHeight = lineHeights.get(i);
// 该行的所有元素
List<View> list = lineViews.get(i);
// 每一行的view的个数
int rows = list.size();
if (i == 0 || i == 1) {
mTwoLineViewCount = mTwoLineViewCount + rows;
}
if (i < mExpandLineCount) {
mExpandLineViewCount = mExpandLineViewCount + rows;
}
// view layout的位置
// 每一行中每一个view多平分的空间<一行只有一个不管>
if (isAverageInRow && rows > 1) {
averageInRow = lineSpace * 1.0f / (rows + 1);
} else {
averageInRow = 0;
}
// 获取View的间距属性
MarginLayoutParams params;
for (int j = 0; j < rows; j++) {
// 对应位置的view元素
View child = list.get(j);
params = (MarginLayoutParams) child.getLayoutParams();
// 是否计算每一列中的元素垂直居中的时候多出的距离
if (isAverageInColumn && rows > 1) {
averageInColumn = (lineHeight - child.getMeasuredHeight() - params.topMargin - params.bottomMargin) / 2;
} else {
averageInColumn = 0;
}
// 左边位置 =起始位置+view左间距+多平分的空间
vl = (int) (viewLeft + params.leftMargin + averageInRow);
// 上面的位置 = 起始位置+view上间距+多平分的空间
vt = (int) (viewTop + params.topMargin + averageInColumn);
vr = vl + child.getMeasuredWidth();
vb = vt + child.getMeasuredHeight();
child.layout(vl, vt, vr, vb);
viewLeft += child.getMeasuredWidth() + params.leftMargin + params.rightMargin + averageInRow;
}
viewLeft = 0;
viewTop += lineHeight;
}
}
private OnTagClickListener mOnTagClickListener;
public void setOnTagClickListener(OnTagClickListener onTagClickListener) {
mOnTagClickListener = onTagClickListener;
}
public interface OnTagClickListener {
void onTagClick(View view, int position);
}
}
使用
<?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"
tools:context=".ui.ZFlowLayoutActivity">
<com.zly.flowlayoutdemo.widget.ZFlowLayout
android:id="@+id/zFlowLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
ZFlowLayoutActivity
public class ZFlowLayoutActivity extends AppCompatActivity {
private ZFlowLayout mZFlowLayout;
private List<String> mDatas;
private List<View> mViewList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_z_flow_layout);
mZFlowLayout = (ZFlowLayout) findViewById(R.id.zFlowLayout);
loadData();
//ZFlowLayout的使用：可添加展开和收起按钮
initZFlowLayout();
}
private void initZFlowLayout() {
mViewList.clear();
for (int i = 0; i < mDatas.size(); i++) {
TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
textView.setText(mDatas.get(i));
mViewList.add(textView);
}
mZFlowLayout.setChildren(mViewList);
mZFlowLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
mZFlowLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
int lineCount = mZFlowLayout.getLineCount(); //行数
int twoLineViewCount = mZFlowLayout.getTwoLineViewCount(); //前两行里面view的个数
int expandLineViewCount = mZFlowLayout.getExpandLineViewCount(); ///展开时显示view的个数
if (lineCount > 2) { //默认展示2行，其余折叠收起，最多展示5行
initIvClose(twoLineViewCount, expandLineViewCount);
}
}
});
mZFlowLayout.setOnTagClickListener((view, position) -> {
//点击了
Toast.makeText(this, mDatas.get(position), Toast.LENGTH_SHORT).show();
});
}
private void initIvClose(int twoLineViewCount, int expandLineViewCount) {
mViewList.clear();
for (int i = 0; i < twoLineViewCount; i++) {
TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
textView.setText(mDatas.get(i));
mViewList.add(textView);
}
//展开按钮
ImageView imageView = (ImageView) LayoutInflater.from(this).inflate(R.layout.item_search_history_img, mZFlowLayout, false);
imageView.setImageResource(R.mipmap.search_close);
imageView.setOnClickListener(v -> {
initIvOpen(twoLineViewCount, expandLineViewCount);
});
mViewList.add(imageView);
mZFlowLayout.setChildren(mViewList);
mZFlowLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
mZFlowLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
int lineCount = mZFlowLayout.getLineCount();
int twoLineViewCount = mZFlowLayout.getTwoLineViewCount();
if (lineCount > 2) {
initIvClose(twoLineViewCount - 1, mZFlowLayout.getExpandLineViewCount());
}
}
});
}
private void initIvOpen(int twoLineViewCount, int expandLineViewCount) {
mViewList.clear();
/*for (int i = 0; i < mDatas.size(); i++) {
TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
textView.setText(mDatas.get(i));
mViewList.add(textView);
}*/
for (int i = 0; i < expandLineViewCount; i++) {
TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
textView.setText(mDatas.get(i));
mViewList.add(textView);
}
//收起按钮
ImageView imageView = (ImageView) LayoutInflater.from(this).inflate(R.layout.item_search_history_img, mZFlowLayout, false);
imageView.setImageResource(R.mipmap.search_open);
imageView.setOnClickListener(v -> initIvClose(twoLineViewCount, expandLineViewCount));
mViewList.add(imageView); //不需要的话可以不添加
mZFlowLayout.setChildren(mViewList);
}
private void loadData() {
mDatas = new ArrayList<>();
for (int i = 0; i < 30; i++) {
if (i % 2 == 0) {
mDatas.add("数据" + i);
} else {
mDatas.add("数据数据数据" + i);
}
}
}
}
使用RecyclerView实现流式布局
RvActivity
public class RvActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private List<String> mDatas;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rv);
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
loadData();
FlowLayoutManager flowLayoutManager = new FlowLayoutManager();
mRecyclerView.setLayoutManager(flowLayoutManager);
mRecyclerView.setAdapter(new CommomRvAdapter<String>(this, mDatas, R.layout.item_rv) {
@Override
protected void fillData(CommomRvViewHolder holder, int position, String s) {
holder.setText(R.id.tv_label, s);
}
});
}
private void loadData() {
mDatas = new ArrayList<>();
for (int i = 0; i < 30; i++) {
if (i % 2 == 0) {
mDatas.add("数据" + i);
} else {
mDatas.add("数据数据数据" + i);
}
}
}
}
FlowLayoutManager
自定义FlowLayoutManager,配合RecyclerView实现流式布局。
/**
* 自定义FlowLayoutManager,配合RecyclerView实现流式布局
*/
public class FlowLayoutManager extends RecyclerView.LayoutManager {
private static final String TAG = FlowLayoutManager.class.getSimpleName();
final FlowLayoutManager self = this;
protected int width, height;
private int left, top, right;
//最大容器的宽度
private int usedMaxWidth;
//竖直方向上的偏移量
private int verticalScrollOffset = 0;
public int getTotalHeight() {
return totalHeight;
}
//计算显示的内容的高度
protected int totalHeight = 0;
private Row row = new Row();
private List<Row> lineRows = new ArrayList<>();
//保存所有的Item的上下左右的偏移量信息
private SparseArray<Rect> allItemFrames = new SparseArray<>();
public FlowLayoutManager() {
}
//设置主动测量规则,适应recyclerView高度为wrap_content
@Override
public boolean isAutoMeasureEnabled() {
return true;
}
public int getRowCounts() {
return lineRows.size();
}
//每个item的定义
public class Item {
int useHeight;
View view;
public void setRect(Rect rect) {
this.rect = rect;
}
Rect rect;
public Item(int useHeight, View view, Rect rect) {
this.useHeight = useHeight;
this.view = view;
this.rect = rect;
}
}
//行信息的定义
public class Row {
public void setCuTop(float cuTop) {
this.cuTop = cuTop;
}
public void setMaxHeight(float maxHeight) {
this.maxHeight = maxHeight;
}
//每一行的头部坐标
float cuTop;
//每一行需要占据的最大高度
float maxHeight;
//每一行存储的item
List<Item> views = new ArrayList<>();
public void addViews(Item view) {
views.add(view);
}
}
@Override
public RecyclerView.LayoutParams generateDefaultLayoutParams() {
return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
//该方法主要用来获取每一个item在屏幕上占据的位置
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
Log.d(TAG, "onLayoutChildren");
totalHeight = 0;
int cuLineTop = top;
//当前行使用的宽度
int cuLineWidth = 0;
int itemLeft;
int itemTop;
int maxHeightItem = 0;
row = new Row();
lineRows.clear();
allItemFrames.clear();
removeAllViews();
if (getItemCount() == 0) {
detachAndScrapAttachedViews(recycler);
verticalScrollOffset = 0;
return;
}
if (getChildCount() == 0 && state.isPreLayout()) {
return;
}
//onLayoutChildren方法在RecyclerView 初始化时 会执行两遍
detachAndScrapAttachedViews(recycler);
if (getChildCount() == 0) {
width = getWidth();
height = getHeight();
left = getPaddingLeft();
right = getPaddingRight();
top = getPaddingTop();
usedMaxWidth = width - left - right;
}
for (int i = 0; i < getItemCount(); i++) {
Log.d(TAG, "index:" + i);
View childAt = recycler.getViewForPosition(i);
if (View.GONE == childAt.getVisibility()) {
continue;
}
measureChildWithMargins(childAt, 0, 0);
int childWidth = getDecoratedMeasuredWidth(childAt);
int childHeight = getDecoratedMeasuredHeight(childAt);
int childUseWidth = childWidth;
int childUseHeight = childHeight;
//如果加上当前的item还小于最大的宽度的话
if (cuLineWidth + childUseWidth <= usedMaxWidth) {
itemLeft = left + cuLineWidth;
itemTop = cuLineTop;
Rect frame = allItemFrames.get(i);
if (frame == null) {
frame = new Rect();
}
frame.set(itemLeft, itemTop, itemLeft + childWidth, itemTop + childHeight);
allItemFrames.put(i, frame);
cuLineWidth += childUseWidth;
maxHeightItem = Math.max(maxHeightItem, childUseHeight);
row.addViews(new Item(childUseHeight, childAt, frame));
row.setCuTop(cuLineTop);
row.setMaxHeight(maxHeightItem);
} else {
//换行
formatAboveRow();
cuLineTop += maxHeightItem;
totalHeight += maxHeightItem;
itemTop = cuLineTop;
itemLeft = left;
Rect frame = allItemFrames.get(i);
if (frame == null) {
frame = new Rect();
}
frame.set(itemLeft, itemTop, itemLeft + childWidth, itemTop + childHeight);
allItemFrames.put(i, frame);
cuLineWidth = childUseWidth;
maxHeightItem = childUseHeight;
row.addViews(new Item(childUseHeight, childAt, frame));
row.setCuTop(cuLineTop);
row.setMaxHeight(maxHeightItem);
}
//不要忘了最后一行进行刷新下布局
if (i == getItemCount() - 1) {
formatAboveRow();
totalHeight += maxHeightItem;
}
}
totalHeight = Math.max(totalHeight, getVerticalSpace());
Log.d(TAG, "onLayoutChildren totalHeight:" + totalHeight);
fillLayout(recycler, state);
}
//对出现在屏幕上的item进行展示，超出屏幕的item回收到缓存中
private void fillLayout(RecyclerView.Recycler recycler, RecyclerView.State state) {
if (state.isPreLayout() || getItemCount() == 0) { // 跳过preLayout，preLayout主要用于支持动画
return;
}
// 当前scroll offset状态下的显示区域
Rect displayFrame = new Rect(getPaddingLeft(), getPaddingTop() + verticalScrollOffset,
getWidth() - getPaddingRight(), verticalScrollOffset + (getHeight() - getPaddingBottom()));
//对所有的行信息进行遍历
for (int j = 0; j < lineRows.size(); j++) {
Row row = lineRows.get(j);
float lineTop = row.cuTop;
float lineBottom = lineTop + row.maxHeight;
//如果该行在屏幕中，进行放置item
// if (lineTop < displayFrame.bottom && displayFrame.top < lineBottom) {
List<Item> views = row.views;
for (int i = 0; i < views.size(); i++) {
View scrap = views.get(i).view;
measureChildWithMargins(scrap, 0, 0);
addView(scrap);
Rect frame = views.get(i).rect;
//将这个item布局出来
layoutDecoratedWithMargins(scrap,
frame.left,
frame.top - verticalScrollOffset,
frame.right,
frame.bottom - verticalScrollOffset);
}
// } else {
// //将不在屏幕中的item放到缓存中
// List<Item> views = row.views;
// for (int i = 0; i < views.size(); i++) {
// View scrap = views.get(i).view;
// removeAndRecycleView(scrap, recycler);
// }
// }
}
}
/**
* 计算每一行没有居中的viewgroup，让居中显示
*/
private void formatAboveRow() {
List<Item> views = row.views;
for (int i = 0; i < views.size(); i++) {
Item item = views.get(i);
View view = item.view;
int position = getPosition(view);
//如果该item的位置不在该行中间位置的话，进行重新放置
if (allItemFrames.get(position).top < row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2) {
Rect frame = allItemFrames.get(position);
if (frame == null) {
frame = new Rect();
}
frame.set(allItemFrames.get(position).left, (int) (row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2),
allItemFrames.get(position).right, (int) (row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2 + getDecoratedMeasuredHeight(view)));
allItemFrames.put(position, frame);
item.setRect(frame);
views.set(i, item);
}
}
row.views = views;
lineRows.add(row);
row = new Row();
}
/**
* 竖直方向需要滑动的条件
*
* @return
*/
@Override
public boolean canScrollVertically() {
return true;
}
//监听竖直方向滑动的偏移量
@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler,
RecyclerView.State state) {
Log.d("TAG", "totalHeight:" + totalHeight);
//实际要滑动的距离
int travel = dy;
//如果滑动到最顶部
if (verticalScrollOffset + dy < 0) {//限制滑动到顶部之后，不让继续向上滑动了
travel = -verticalScrollOffset;//verticalScrollOffset=0
} else if (verticalScrollOffset + dy > totalHeight - getVerticalSpace()) {//如果滑动到最底部
travel = totalHeight - getVerticalSpace() - verticalScrollOffset;//verticalScrollOffset=totalHeight - getVerticalSpace()
}
//将竖直方向的偏移量+travel
verticalScrollOffset += travel;
// 平移容器内的item
offsetChildrenVertical(-travel);
fillLayout(recycler, state);
return travel;
}
private int getVerticalSpace() {
return self.getHeight() - self.getPaddingBottom() - self.getPaddingTop();
}
public int getHorizontalSpace() {
return self.getWidth() - self.getPaddingLeft() - self.getPaddingRight();
}
}
FlexboxLayout的使用
Github地址
依赖
dependencies {
implementation 'com.google.android:flexbox:2.0.1'
}
什么是FlexboxLayout
那么FlexboxLayout 它到底是个什么东西呢？看一下Github对这个库的介绍：FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. 意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。FlexboxLayout可以理解成一个高级版的LinearLayout，因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。
FlexboxLayout示例
既然说FlexboxLayout方便、强大，那么我们就先以一个示例来看一下它的一个简单实用场景：现在很多APP都有标签功能，本节以简书首页的热门专题（标签）为例，看一下使用FlexboxLayout来实现有多方便。
简书首页热门专题如下图：
FlexboxLayout使用
<?xml version="1.0" encoding="utf-8"?>
<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:alignContent="flex_start"
app:alignItems="center"
app:dividerDrawable="@drawable/divider_shape"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:showDivider="beginning|middle|end">
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="程序员"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="影视天堂"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start"
app:layout_flexGrow="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="美食"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start"
app:layout_flexGrow="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="漫画.手绘"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start"
app:layout_flexGrow="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="广告圈"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="旅行.在路上"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="娱乐八卦"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="青春"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="谈写作"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="短篇小说"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="散文"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start" />
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/label_bg_shape"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="摄影"
android:textColor="@color/text_color"
app:layout_alignSelf="flex_start"
app:layout_order="2" />
</com.google.android.flexbox.FlexboxLayout>
实现效果如下:
很简单，就一个布局文件，以FlexboxLayout为父布局，向容器里面添加子Item 就行了。当然了，你可以在代码中向FlexboxLayout布局动态添加子元素，代码如下：
ublic class FlexboxLayoutActivity extends AppCompatActivity {
private FlexboxLayout mFlexboxLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flexbox_layout);
mFlexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
// 通过代码向FlexboxLayout添加View
for (int i = 0; i < 10; i++) {
TextView textView = new TextView(this);
textView.setBackground(getResources().getDrawable(R.drawable.label_bg_shape));
textView.setText("散文" + i);
textView.setGravity(Gravity.CENTER);
textView.setPadding(dp2px(15), 0, dp2px(15), 0);
textView.setTextColor(getResources().getColor(R.color.text_color));
FlexboxLayout.LayoutParams layoutParams = new FlexboxLayout.LayoutParams(FlexboxLayout.LayoutParams.WRAP_CONTENT, dp2px(40));
textView.setLayoutParams(layoutParams);
mFlexboxLayout.addView(textView);
}
}
private int dp2px(float value) {
float density = getResources().getDisplayMetrics().density;
return (int) (density * value + 0.5);
}
}
FlexboxLayout支持的属性介绍
上面说了FlexboxLayout真正强大的是它定义的属性，那么这一节我们看一下Flexbox支持哪些属性,分为2个方面，FlexboxLayout支持的属性和FlexboxLayout 子元素支持的属性。
flexDirection：
flexDirection属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：
- row (default)： 默认值，主轴为水平方向，起点在左端，从左到右。
- row_reverse：主轴为水平方向，起点在右端，从右到左。
- column：主轴为竖直方向，起点在上端，从上到下。
- column_reverse：主轴为竖直方向，起点在下端，从下往上。
flexWrap
flexWrap 这个属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：
- noWrap: 不换行，一行显示完子元素。
- wrap: 按正常方向换行。
- wrap_reverse: 按反方向换行。
justifyContent
justifyContent 属性控制元素主轴方向上的对齐方式，有以下5种取值：
- flex_start (default): 默认值，左对齐
- flex_end: 右对齐 center: 居中对齐
- space_between: 两端对齐，中间间隔相同
- space_around: 每个元素到两侧的距离相等。
alignItems
alignItems 属性控制元素在副轴方向的对齐方式，有以下5种取值：
- stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。
- flex_start：顶端对齐
- flex_end：底部对齐
- center：居中对齐
- baseline：第一行内容的的基线对齐。
alignContent
alignContent 属性控制多根轴线的对齐方式(也就是控制多行，如果子元素只有一行，则不起作用)，可能有一下6种取值：
- stretch (default): 默认值，充满交叉轴的高度（测试发现，需要alignItems 的值也为stretch 才有效）。
- flex_start: 与交叉轴起点对齐。
- flex_end: 与交叉轴终点对齐。
- center: 与交叉轴居中对齐。
- space_between: 交叉轴两端对齐，中间间隔相等。
- space_around: 到交叉轴两端的距离相等。
showDividerHorizontal
showDividerHorizontal 控制显示水平方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
dividerDrawableHorizontal
dividerDrawableHorizontal 设置Flex 轴线之间水平方向的分割线。
showDividerVertical
showDividerVertical 控制显示垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
dividerDrawableVertical
dividerDrawableVertical 设置子元素垂直方向的分割线。
showDivider
showDivider 控制显示水平和垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
dividerDrawable
dividerDrawable 设置水平和垂直方向的分割线，但是注意,如果同时和其他属性使用，比如为 Flex 轴、子元素设置了justifyContent=“space_around” 、alignContent=“space_between” 等等。可能会看到意料不到的空间，因此应该避免和这些值同时使用。
FleboxLayout子元素支持的属性介绍：
layout_order
layout_order 属性可以改变子元素的排列顺序，默认情况下，FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1，值越小排在越靠前。
layout_flexGrow(float)
layout_flexGrow 子元素的放大比例， 决定如何分配剩余空间（如果存在剩余空间的话），默认值为0,不会分配剩余空间，如果有一个item的 layout_flexGrow 是一个正值，那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值，那么剩余空间的分配按照layout_flexGrow定义的比例（有点像LinearLayout的layout_weight属性）。
layout_flexShrink(float)
layout_flexShrink:子元素缩小比例，当空间不足时，子元素需要缩小（设置了换行则无效），默认值为1，如果所有子元素的layout_flexShrink 值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。
layout_alignSelf
layout_alignSelf 属性可以给子元素设置对齐方式，上面讲的alignItems属性可以设置对齐，这个属性的功能和alignItems一样，只不过alignItems作用于所有子元素，而layout_alignSelf 作用于单个子元素。默认值为auto, 表示继承alignItems属性，如果为auto以外的值，则会覆盖alignItems属性。有以下6种取值：
- auto (default)
- flex_start
- flex_end
- center
- baseline
- stretch
除了auto以外，其他和alignItems属性一样。
layout_flexBasisPercent (fraction)
layout_flexBasisPercent的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。但是需要注意，这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默认值时-1。
layout_minWidth / layout_minHeight (dimension)
强制限制 FlexboxLayout的子元素（宽或高）不会小于最小值，不管layout_flexShrink这个属性的值为多少，子元素不会被缩小到小于设置的这个最小值。
layout_maxWidth / layout_maxHeight (dimension)
这个和上面的刚好相反，强制限制FlexboxLayout子元素不会大于这个最大值, 不管layout_flexGrow的值为多少，子元素不会被放大到超过这个最大值。
layout_wrapBefore
layout_wrapBefore 属性控制强制换行，默认值为false,如果将一个子元素的这个属性设置为true，那么这个子元素将会成为一行的第一个元素。这个属性将忽略flex_wrap 设置的 noWrap值。
与RecyclerView 的结合使用
Flexbox能够作为一个LayoutManager(FlexboxlayoutManager) 用在RecyclerView里面，这也就意味着你可以在一个有大量Item的可滚动容器里面使用Flexbox了。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
public class FlexboxRvActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private List<String> mDatas;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flexbox_rv_layout);
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
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);//交叉轴的起点对齐。
mRecyclerView.setLayoutManager(flexboxLayoutManager);
loadData();
CommomRvAdapter<String> adapter = new CommomRvAdapter<String>(this, mDatas, R.layout.item_rv) {
@Override
protected void fillData(CommomRvViewHolder holder, int position, String s) {
holder.setText(R.id.tv_label, s);
}
};
mRecyclerView.setAdapter(adapter);
adapter.setOnItemClickListener((view, position) -> {
Toast.makeText(this, mDatas.get(position), Toast.LENGTH_SHORT).show();
});
}
private void loadData() {
mDatas = new ArrayList<>();
for (int i = 0; i < 30; i++) {
if (i % 2 == 0) {
mDatas.add("数据" + i);
} else {
mDatas.add("数据数据数据" + i);
}
}
}
}
FlexboxlayoutManager是支持View回收的，而FlexboxLayout是不支持View回收的，FlexboxLayout只适用于少量Item的场景，这也是为什么会出现FlexboxLayoutManager的原因吧。
FlexboxLayout总结
FlexboxLayout是Google 开源的一个与CSS Flexbox有类似功能的强大布局，具有换行特性，使用起来特别方便，但是，FlexboxLayout是没有考虑View回收的，因此，它只使用于只有少量子Item的场景，如果向其中添加大量Item 是灰导致内存溢出的。所幸，最新的版本添加了与RecyclerView的集成，这就可以在有大量子Item的场景下使用了。另外，FlexboxLayout的这写属性的意义可能不好理解 ，建议大家去写个demo试一下每个属性的每个值看看是什么效果，这样就能很好的理解每个属性了。
项目完整代码