参考
Android开发之流式布局（实现热门标签效果）
Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
实现效果
能够根据宽度自动换行
要实现这种效果，也可以使用FlexboxLayout，FlexboxLayout是 Google I/O 上开源的一个布局控件
Android开发之玩转FlexboxLayout布局
Android FlexboxLayout 聪明的UI布局
Android轻松搞定流动布局（FlexboxLayout）
这里我们使用自定义ViewGroup的方式来实现
image.png
测量
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<List<View>> mAllChildViews = new ArrayList<>();
//每一行的高度
private List<Integer> 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<View> 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<View> 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);
}
}
在布局中使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.lcw.view.flowlayout.FlowLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="欧美影视"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="婚姻育儿"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="散文"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="程序员"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="大学生生活"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="运营互助帮"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="设计"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@drawable/shape_tv_blue"
android:padding="5dp"
android:text="读书"
android:textColor="@color/colorAccent" />
</com.lcw.view.flowlayout.FlowLayout>
</LinearLayout>
网友评论