先上图
IMG_20210820_104131.jpg
public class FlowLayoutView extends ViewGroup {
private int mHorizontalSpacing = dp2px(16); //item横向间距
private int mVerticalSpacing = dp2px(8); //item横向间距
private List<List<View>> allLines = new ArrayList<>(); // 记录所有的行，一行一行的存储
List<Integer> lineHeights = new ArrayList<>(); // 记录每一行的行高
public FlowLayoutView(Context context) {
super(context);
}
public FlowLayoutView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FlowLayoutView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void clearMeasureParams() {
allLines.clear();
lineHeights.clear();
}
/*
* 1、度量子view
* 2、获取子view的宽、高、换行等
* 3、向父类索要宽高，判断是哪种MeasureSpecMode,根据不同的mode给出不同的区域
* 4、保存记录
* */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
clearMeasureParams();
List<View> lineViews = new ArrayList<>(); //保存一行中的所有的view
int lineWidthUsed = 0; //记录这行已经使用了多宽的size
int lineHeight = 0; // 一行的行高
int selfWidth = MeasureSpec.getSize(widthMeasureSpec); //父view的宽度
int selfHeight = MeasureSpec.getSize(heightMeasureSpec); //父view的高度
int flowLayoutNeedWidth = 0; // measure过程中，FlowLayout要求的父ViewGroup的宽
int flowLayoutNeedHeight = 0; // measure过程中，FlowLayout要求的父ViewGroup的高
int paddingLeft = getPaddingLeft();
int paddingRight = getPaddingRight();
int paddingTop = getPaddingTop();
int paddingBottom = getPaddingBottom();
// 获取子view数
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
// 获取子view
View childView = getChildAt(i);
LayoutParams childLP = childView.getLayoutParams();
if (childView.getVisibility() != View.GONE) {
//将layoutParams转变成为 measureSpec 即设置子view的measureSpec
/*
* widthMeasureSpec表示父view给予FlowLayout的宽度
* paddingLeft + paddingRight表示父view所设置的左右padding值
* childLP.width 表示 子view的宽度
* */
int childWidthMeasureSpec = getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, childLP.width);
int childHeightMeasureSpec = getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, childLP.height);
// 通过子view的measureSpec度量子view
childView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
int childMeasureWidth = childView.getMeasuredWidth();
int childMeasureHeight = childView.getMeasuredHeight();
if(lineWidthUsed + mHorizontalSpacing + childMeasureWidth > selfWidth ){
//换行，我们就可以判断当前行需要的宽和高，所以此时要记录下来
allLines.add(lineViews);
lineHeights.add(lineHeight);
//判断flowLayout到底需要多宽、多高
flowLayoutNeedWidth = Math.max(flowLayoutNeedWidth, lineWidthUsed);
flowLayoutNeedHeight = flowLayoutNeedHeight + lineHeight + mVerticalSpacing;
// 换行后初始化
// 此处不能用clear，用clear则allLines里面的item所指向的就是同一个内存地址了
lineViews = new ArrayList<>();
lineWidthUsed = 0;
lineHeight = 0;
}
//每行的设置
lineViews.add(childView);
lineWidthUsed = lineWidthUsed + mHorizontalSpacing + childMeasureWidth;
lineHeight = Math.max(lineHeight, childMeasureHeight);
//最后一行数据（因为最后一行的时候到不了换行的那句代码，所以不会显示，因此要单独判断）
if(i == childCount -1){
allLines.add(lineViews);
lineHeights.add(lineHeight);
//判断flowLayout到底需要多宽、多高
flowLayoutNeedWidth = Math.max(flowLayoutNeedWidth, lineWidthUsed);
flowLayoutNeedHeight = flowLayoutNeedHeight + lineHeight + mVerticalSpacing;
}
}
}
//根据子View的度量结果，来重新度量自己ViewGroup
// 作为一个ViewGroup，它自己也是一个View,它的大小也需要根据它的父view给它提供的宽高来度量
//首先获取到父view的MeasureSpec的mode
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
// 如果父view的MeasureSpec的mode是EXACTLY表示宽度是确切的，则selfWidth为最终宽度,否则为
int flowLayoutWidth = (widthMode == MeasureSpec.EXACTLY) ? selfWidth : flowLayoutNeedWidth;
int flowLayoutHeight = (heightMode == MeasureSpec.EXACTLY) ? selfHeight : flowLayoutNeedHeight;
// 保存记录
setMeasuredDimension(flowLayoutWidth, flowLayoutHeight);
}
// 布局（每一行每一行的布局）
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// 获取行数
int lineCount = allLines.size();
// 获取flowLayout所设置的pandding值,布局从左上角开始
int curL = getPaddingLeft();
int curT = getPaddingTop();
for (int i = 0; i < lineCount; i++) {
// 获取到每一行的所有view
List<View> lineViews = allLines.get(i);
for (int j = 0; j < lineViews.size(); j++){
//获取单个view
View view = lineViews.get(j);
//设置view的视图坐标系，
int left = curL;
int top = curT;
int right = left + view.getMeasuredWidth();
int bottom = top + view.getMeasuredHeight();
// view添加到布局
view.layout(left,top,right,bottom);
// 计算下一个view的宽度的开始位置
curL = right + mHorizontalSpacing;
}
// 计算下一行view的高度的开始位置
curT = curT + lineHeights.get(i) + mVerticalSpacing;
// 宽度位置初始化
curL = getPaddingLeft();
}
}
public static int dp2px(int dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
}
}
//布局
<FlowLayoutView
android:id="@+id/flowlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
//子布局
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_guarantee"
android:paddingLeft="@dimen/dp_5"
android:paddingRight="@dimen/dp_5"
android:gravity="center"
android:textColor="@color/color_499BFF"
android:textSize="@dimen/sp_13"
android:layout_marginRight="@dimen/dp_15"
android:layout_marginBottom="@dimen/dp_15"
/>
-代码使用
FlowLayoutView mFlowLayout = helper.getView(R.id.flowlayout);
-集合数组都可以
String[] flowList = {"1","2","3","4"};
for (int i = 0; i < flowList.length; i++) {
TextView mTv = (TextView) LayoutInflater
.from(context)
.inflate(R.layout.item, mFlowLayout, false);
mTv.setText(flowList[i]);
mFlowLayout.addView(mTv);
}
---------------------------------结尾------------------------------------------------------
