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

然后给文字定义一个好看的背景 drawable/shape_drawable:

xml:

效果：