参考
Android开发之流式布局(实现热门标签效果)
Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
实现效果
能够根据宽度自动换行
要实现这种效果,也可以使用FlexboxLayout
,FlexboxLayout
是 Google I/O 上开源的一个布局控件
Android开发之玩转FlexboxLayout布局
Android FlexboxLayout 聪明的UI布局
Android轻松搞定流动布局(FlexboxLayout)
这里我们使用自定义ViewGroup
的方式来实现
测量
1、由于在容器ViewGroup里装载的是原生控件(TextView,Button,ImageView等),所以对于原生控件的属性(内部对齐方式,缩放方式,内边距等)我们不需要去做另外的处理,但这里涉及到了一个控件与控件之间的距离(外边距margin),所以我们需要让ViewGroup去认识这个标签,在原生的ViewGroup里是不支持margin的,ViewGroup里有两个内部类分别是ViewGroup.LayoutParams和ViewGroup. MarginLayoutParams,ViewGroup. MarginLayoutParams继承于ViewGroup.LayoutParams也扩展了支持的属性,也就是magin属性,所以我们需要重写generateLayoutParams方法让其返回MarginLayoutParams对象
/**
* 指定ViewGroup的LayoutParams
*
* @param attrs
* @return
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
2、在ViewGroup里测量是在onMeasure方法里实现的,由于LinearLayout和RelativeLayout等这些布局是继承于ViewGroup的,这些布局摆放控件的方式是不一样的,比如LinearLayout是呈线性摆放的,RelativeLayout是呈叠加摆放的,所以测量的方式也是不一样的,所以ViewGroup并没有给我们做好子View的测量工作,而是让我们去重写onMeasure方法进行测量,一个ViewGroup除非指定它的宽高精确值或者让其充满match_parent,否则它是不知道自身大小应该是多少的,所以我们需要对包含在ViewGroup里的子View进行逐个测量,然后累加宽高来确定ViewGroup的宽高值。
3、谷歌官方给我们提供了三种测量模式:
EXACTLY:精确大小,可以让ViewGroup宽高为我们的指定值或者是充满match_parent
AT_MOST:给出限定大小,子View可以在ViewGroup的允许范围内伸展大小
UNSPECIFIED:不指定限制,子View想要多大就给多大(几乎很少使用)
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
我们可以在onMeasure方法里通过MeasureSpec.getMode和MeasureSpec.getSize得到对应的测量模式和测量尺寸,当模式为EXACTLY的时候,我们就可以直接应用所测量的尺寸,但如果是其他模式,那么我们就只能自己去测量子View的尺寸了。
布局
@Override
protected abstract void onLayout(boolean changed,
int l, int t, int r, int b);
在自定义ViewGroup中提供了一个抽象方法onLayout需要我们对其实现,在这里我们可以对子View的位置进行确定排列,ViewGroup通过onLayout 方法来确定View在容器中的位置,View通过layout方法来确认自己在父容器中的位置,l,t,r,b参数分别代表left,top,right,bottom,也就是左上和右下。
自定义FlowTagLayout
详细注释都写在代码中
/**
* author: lin
* date: 2018/10/15 16:56
* description: 流式标签,自动换行,支持设置padding属性
*/
public class FlowLayout extends ViewGroup {
public FlowLayout(Context context) {
super(context, null);
}
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs, 0);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//每一行的子View
private List> mAllChildViews = new ArrayList<>();
//每一行的高度
private List mLineHeight = new ArrayList<>();
/**
* 测量所有子View大小,确定ViewGroup的宽高
*
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//由于onMeasure会执行多次,避免重复的计算控件个数和高度,这里需要进行清空操作
mAllChildViews.clear();
mLineHeight.clear();
//父控件传进来的宽度和高度以及对应的测量模式,获取总宽度,包含padding值
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
//除去左右padding的宽度,作为比较是否换行的宽度
//MeasureSpec.EXACTLY模式时适用,MeasureSpec.AT_MOST模式使用sizeWidth
int noPaddingWidth = sizeWidth - getPaddingLeft() - getPaddingRight();
//如果当前ViewGroup的宽高为wrap_content的情况
int width = getPaddingLeft() + getPaddingRight();//自己测量的宽度,padding值+子view宽度
int height = getPaddingTop() + getPaddingBottom();//自己测量的高度
//记录当前行的宽度和高度
int lineWidth = 0;
int lineHeight = 0;
//记录当前行的子view
List lineViews = new ArrayList<>();
//获取FlowTagLayout中子view的个数
int childCount = getChildCount();
//遍历子View
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
//测量子View的宽和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
//得到子View的LayoutParams
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
//子View占据的宽度
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
//子View占据的高度
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
//判断是否换行(MeasureSpec.EXACTLY和MeasureSpec.AT_MOST要区别处理)
if (lineWidth + childWidth <= (modeWidth == MeasureSpec.EXACTLY ? noPaddingWidth : sizeWidth)) {//不换行
//累加行宽
lineWidth += childWidth;
//得到最大行高
lineHeight = Math.max(lineHeight, childHeight);
//添加子View到当前行lineViews
lineViews.add(child);
} else {//换行
//当前行的子view存储到mAllChildViews
mAllChildViews.add(lineViews);
//记录上一行的行高
mLineHeight.add(lineHeight);
//对比得到最大的宽度
width = Math.max(width, lineWidth);
//记录行高
height += lineHeight;
//新建下一行的子View集合
lineViews = new ArrayList<>();
//重置换行后的行宽
lineWidth = childWidth;
//重置换行后的行高
lineHeight = childHeight;
//添加到下一行的View集合
lineViews.add(child);
}
//处理最后一个子View的情况
if (i == childCount - 1) {
//当前行的子view集合存储到mAllChildViews
mAllChildViews.add(lineViews);
//记录行高
mLineHeight.add(lineHeight);
//对比得到最大的宽度,最终的宽度
width = Math.max(width, lineWidth);
//记录行高,最终的高度
height += lineHeight;
}
}
//wrap_content
setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth : width,
modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//FlowTagLayout的Padding值
int left = getPaddingLeft();
int top = getPaddingTop();
//遍历所有子view
for (int i = 0; i < mAllChildViews.size(); i++) {
//每行行高
int lineHeight = mLineHeight.get(i);
//每一行内的子View
List viewList = mAllChildViews.get(i);
for (int j = 0; j < viewList.size(); j++) {
View view = viewList.get(j);
MarginLayoutParams marginLayoutParams = (MarginLayoutParams) view.getLayoutParams();
int vl = left + marginLayoutParams.leftMargin;
int vt = top + marginLayoutParams.topMargin;
int vr = vl + view.getMeasuredWidth();
int vb = vt + view.getMeasuredHeight();
view.layout(vl, vt, vr, vb);
left += view.getMeasuredWidth() + marginLayoutParams.leftMargin + marginLayoutParams.rightMargin;
}
left = getPaddingLeft();
top += lineHeight;
}
}
/**
* 指定ViewGroup的LayoutParams
*
* @param attrs
* @return
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}
在布局中使用