自定义流式布局FlowLayout

描述:
每一行摆放多个子View时,因为每个View的宽度和高度可能不同,需要在摆放之时按实际剩余宽度布置子View的摆放,如果当前行不够空间摆放,则需要新创建一行摆放它,而父容器FlowLayout的高度需要计算出所有行Line的高度之和来确定.
效果图:

实现要点:

1. onMeasure()方法中计算出每一行的最大可用宽度

//1,计算宽高
int width = MeasureSpec.getSize(widthMeasureSpec);
int maxWidth = width - getPaddingLeft() - getPaddingRight();//最大可用宽度

2, 定义个管理类Line: a,用于管理新进来的子View是否可添加进当前行canAddView(),如果可以添加,则添加进集合addView(),同时记录已使用了的宽度usedWidth,及当前最高的子View的高度mHeight(用于确定该行Line的高度); b,布局最终添加进集合的每一个子View在当前行的摆放位置onLayout();

public class Line {
private int usedWidth;
private int paddingWidth;
private int mMaxWidth;
private List<View> mViews = new ArrayList<>();
private int mHeight;
public Line(int paddingWidth, int maxWidth) {
this.paddingWidth = paddingWidth;
mMaxWidth = maxWidth;
}
public boolean canAddView(View child) {
if (mViews.size() == 0) {
return true;
}
return usedWidth + child.getMeasuredWidth() + paddingWidth <= mMaxWidth;
}
public void addView(View child) {
int childWidth = child.getMeasuredWidth();
if (mViews.size() > 0) {
usedWidth += paddingWidth;    //当添加进一个子View后,就需要加上每个子View间的间距了
}
mViews.add(child);
usedWidth += childWidth;
mHeight = mHeight > child.getMeasuredHeight() ? mHeight : child.getMeasuredHeight();    //用于确定每一行的高度
}
.......

}

3, 创建成员变量mCurrentLine记录当前行Line的引用(相当于指针),及集合mLines用于存储每一个new出来的Line, 在onMeasure()方法中遍历每一个孩子,循环判断mCurrentLine是否为空,如果为空就创建Line,并addView(child),如果不为空,则分两种情况判断:mCurrentLine.canAddView(child)返回为true,则直接添加;返回为false,需要重新 new Line(),同时当前行的引用mCurrentLine指向新创建的Line,再addView(child),同时添加进集合mLines中 , 每次添加完成后,再测量一下孩子,给孩子的宽高赋值:

//3,测量孩子,并添加到Line中
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
//将孩子添加到Line中
if (mCurrentLine == null) {
mCurrentLine = new Line(getResources().getDimensionPixelSize(R.dimen.flow_line_padding), maxWidth);
mCurrentLine.addView(child);
mLines.add(mCurrentLine);
} else {
if (mCurrentLine.canAddView(child)) {
mCurrentLine.addView(child);
} else {
mCurrentLine = new Line(getResources().getDimensionPixelSize(R.dimen.flow_line_padding), maxWidth);
mCurrentLine.addView(child);
mLines.add(mCurrentLine);
}
}
//测量孩子
measureChild(child, widthMeasureSpec, heightMeasureSpec);    //对孩子的宽高不做限制,
}

4, 测量自己
宽度使用期望的宽度width, 高度需要遍历mLines集合,累加每一Line的mHeight:

//4,测量自己
int measuredHeight = getPaddingTop() + getPaddingBottom();//将高度的内边距计算在内
for (int i = 0; i < mLines.size(); i++) {
measuredHeight += mLines.get(i).mHeight + mVerticalSpace;    //将每一行的垂直间距计算在内
}
setMeasuredDimension(width, measuredHeight);

5, 根据 left 和 top 布局每一行,及每一行的中的孩子的位置:

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int top = t + getPaddingTop();    //将内边距计算在内
int left = l + getPaddingLeft();
for (int i = 0; i < mLines.size(); i++) {
Line line = mLines.get(i);
line.onLayout(left, top);
top += line.mHeight + mVerticalSpace;    //每循环一次将top增加line.mHeight 及 每行的垂直间距 的高度
}
}

Line类中的onLayout,需要根据已使用的宽度usedWidth计算出最终剩余使用不了的宽度, 将这部分宽度按照mViews.size()的个数(即每一行的孩子个数)平均分配到每一个child的宽度上去,调用child.measure()方法按照指定的宽度重新测量后,再对孩子布局位置child.layout();

public void onLayout(int l, int t) {
int left = l;
for (int i = 0; i < mViews.size(); i++) {
View child = mViews.get(i);
//计算出平均添加到每个child上的多余宽度
int avg = (mMaxWidth - usedWidth) / mViews.size();
//按照指定的值重新测量孩子
child.measure(MeasureSpec.makeMeasureSpec(child.getMeasuredWidth() + avg,MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(child.getMeasuredHeight(),MeasureSpec.EXACTLY));
int right = left + child.getMeasuredWidth();
int bottom = t + child.getMeasuredHeight();
child.layout(left, t, right, bottom);
left = right + paddingWidth;
}
}

6, 因为onMeasure()方法会被重复调用多次, 所以需要在onMeasure()方法每次被调用之前将集合清空, 不然会出现大片空白的区域:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//因为会多次调用measure()方法,所以方法开始前先清除child
mLines.clear();
mCurrentLine = null;
.......
}

效果图实现代码

FlowLayout flowLayout = (FlowLayout) findViewById(R.id.flowlayout);
mRandom = new Random();
for (int i = 0; i < mDatas.length; i++) {
TextView view = new TextView(this);
view.setText(mDatas[i]);
//创建正常情况下背景
GradientDrawable gradientDrawable = new GradientDrawable();
gradientDrawable.setCornerRadius(getResources().getDimensionPixelSize(R.dimen.flow_gradient_radius));
int a = 255;
int r = 150 + mRandom.nextInt(100);
int g= 150 + mRandom.nextInt(100);
int b= 150 + mRandom.nextInt(100);
gradientDrawable.setColor(Color.argb(a, r, g, b));
//创建被点击时的背景
GradientDrawable gradientDrawable2 = new GradientDrawable();
gradientDrawable2.setCornerRadius(getResources().getDimensionPixelSize(R.dimen.flow_gradient_radius));
gradientDrawable2.setColor(Color.GRAY);
//设置图片选择器
StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[]{android.R.attr.state_pressed},gradientDrawable2);
stateListDrawable.addState(new int[]{},gradientDrawable);

view .setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, ((TextView) v).getText(), Toast.LENGTH_SHORT).show();
}
});
//将背景设置到TextView中
view.setBackgroundDrawable(stateListDrawable);
view.setTextColor(Color.WHITE);
view.setPadding(5, 5, 5, 5);
view.setGravity(Gravity.CENTER);
view.setTextSize(14);

flowLayout.addView(view);//触发重绘
}