自定义FlowLayout

自定义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>

效果：