自定义ViewGroup具体要实现以下几个步骤。
- onMeasure 在onMeasure里实现对子view的测量，并且根据子view的测量结果决定FlowLayout的大小。主要测量ViewGroup在AS_MOST模式下的大小。
- onLayout 在这里对子view进行布局，决定自view的位置。
对于本例，FlowLayout为流式布局。当前行剩余空间大于子View占用的大小时，子View往后排布；当前行剩余空间不能够容纳子View时，子View换行。依照该规则进行测量和布局。
FlowLayout
public class FlowLayout extends ViewGroup {
public FlowLayout(Context context) {
super(context);
}
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = 0;//测量后FlowLayout的宽度
int height = 0;//测量后FlowLayout的高度
int lineWidth = 0;//行当前宽度
int lineHeight = 0;
int widthMode = MeasureSpec.getMode(widthMeasureSpec);//宽度的mode
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);//宽度的大小
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
//拿到childView
View child = getChildAt(i);
//测量childView
measureChild(child, widthMeasureSpec, heightMeasureSpec);
//拿到childView的LayoutParams，只支持Margin
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
//childView占用的宽度
int childWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
int childHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
//换行逻辑，不换行累加宽度，最大行宽为FlowLayout的宽度
//换行累加高度
if (childWidth + lineWidth <= widthSize) {
lineWidth += childWidth;
lineHeight = Math.max(childHeight, lineHeight);
width = Math.max(lineWidth,width);
} else {
//满足换行条件，重置lineWidth为换行之后的这一个View的宽度，累加高度
height += lineHeight;
lineHeight = childHeight;
lineWidth = childWidth;
width = Math.max(width, childWidth);
}
//处理最后一个view，累加高度
if (i == childCount - 1) {
height += lineHeight;
}
}
//设置FlowLayout的大小,主要考虑AS_MOST（wrap_content）模式的大小
setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : width,
heightMode == MeasureSpec.EXACTLY ? heightSize : height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
int width = getWidth();
int lineWidth = 0;
int lineHeight = 0;
int height = 0;
for (int i = 0;i<childCount;i++){
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWitch = lp.leftMargin+lp.rightMargin+child.getMeasuredWidth();
int childHeght = lp.topMargin+lp.bottomMargin+child.getMeasuredHeight();
int mL = lp.leftMargin;
int mT = lp.topMargin;
int mR = lp.leftMargin+child.getMeasuredWidth();
int mB = lp.topMargin+child.getMeasuredHeight();
if (lineWidth+childWitch<=width){
//不换行，view往后边排布
child.layout(mL+lineWidth,mT+height,mR+lineWidth,mB+height);
//累加lineWidth
lineWidth+=childWitch;
//lineHeight为该行view最大高度
lineHeight = Math.max(lineHeight,childHeght);
}else {
//换行，重置lineWidth，累加lineHeight
lineWidth = 0;
height+=lineHeight;
//layout这个view
child.layout(mL+lineWidth,mT+height,mR+lineWidth,mB+height);
//换行，行宽为当前view占用的宽度
lineWidth=childWitch;
}
}
}
/**
* 根据XML文件的设置的属性,返回一个支持Margin的LayoutParams
* @param attrs
* @return
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}
然后给文字定义一个好看的背景 drawable/shape_drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#ffffff"/>
<stroke
android:width="1dp"
android:dashWidth="10dp"
android:dashGap="4dp"
android:color="#158441"/>
</shape>
xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<com.ljk.FlowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="Android"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="Switch"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="Java"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="Kotlin"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="C++"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="C#"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="软件工程师"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="App架构师"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_drawable"
android:padding="10dp"
android:text="UI设计"/>
</com.ljk.FlowLayout>
</LinearLayout>
效果：
