自定义实现FlowLayout布局

大家来看这样一个需求，你需要设计一个container，实现内部控件自动换行。即里面的控件能够根据长度来判断当前行是否容得下它，进而决定是否转到下一行显示。效果图如下：

在上图中，所有的黑色部分是FlowLayout控件，明显可以看出，内部的每个TextView控件，可以根据大小自动排列。 现在我就要通过所学的measure和layout知识自己实现一个FlowLayout。

源码如下实现如下：

public class MyFlowLayout extends ViewGroup {


    public MyFlowLayout(Context context) {
        super(context);
    }

    public MyFlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int totalWidth = 0;
        int totalHeight = 0;
        int lineMaxHeight = 0;

        //循环遍历所有的子View并调用其measure进行自我测量
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            
            measureChild(child, widthMeasureSpec,  heightMeasureSpec);

            int childWidth = child.getMeasuredWidth() + lp.rightMargin + lp.rightMargin;

            if (totalWidth + childWidth <= widthSize) {
                //同一行
                totalWidth += childWidth;
                //统计一行中高度最大的子View
                lineMaxHeight = Math.max(lineMaxHeight, child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
            } else {
                //另起一行
                totalWidth = 0;
                totalHeight += lineMaxHeight;

                //新的一行最大值
                lineMaxHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
            }

        }
        //退出循环后，最后一行高度没计算，手动计算
        totalHeight += lineMaxHeight;
       
        //统计所有子View的累加起来的高度作为 父View的高度
        setMeasuredDimension(resolveSize(widthSize, widthMeasureSpec), resolveSize(totalHeight, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int usedWidth = 0;
        int heightOffset = 0;
        int lineMaxHeight = 0;

        int groupWidth = getMeasuredWidth();
        //对每个一个子View进行布局
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

            int childWidth = child.getMeasuredWidth();
            int childHeight = child.getMeasuredHeight();


            if (usedWidth + childWidth + lp.rightMargin + lp.leftMargin <= groupWidth) {
                //没有超过一行
                //摆放子View的位置
                child.layout(usedWidth+lp.leftMargin, heightOffset + lp.topMargin, usedWidth+lp.leftMargin + childWidth, heightOffset + lp.topMargin + childHeight);
                //统计一行中最大的高度
                lineMaxHeight = Math.max(lineMaxHeight, childHeight + lp.topMargin + lp.bottomMargin);

            } else {
                //超过一行了,那就另起一行
                heightOffset += lineMaxHeight;
                child.layout(lp.leftMargin, heightOffset + lp.topMargin, lp.leftMargin + childWidth, heightOffset + lp.topMargin + childHeight);

                usedWidth = 0;
                //新一行第一个最大高度就是自己
                lineMaxHeight = childHeight + lp.topMargin + lp.bottomMargin;
            }

            //已使用的宽度
            usedWidth += (childWidth + lp.rightMargin + lp.leftMargin);
        }
    }


    //------------------为了让子View支持margin属性，必须实现下面的代码------------------
    public static class LayoutParams extends MarginLayoutParams {

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
        }

        public LayoutParams(int width, int height) {
            super(width, height);
        }

        public LayoutParams(int width, int height, int gravity) {
            super(width, height);
        }

        public LayoutParams(ViewGroup.LayoutParams source) {
            super(source);
        }

        public LayoutParams(ViewGroup.MarginLayoutParams source) {
            super(source);
        }

        public LayoutParams(FrameLayout.LayoutParams source) {
            super(source);
        }
    }
    
    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new MyFlowLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MyFlowLayout.LayoutParams(getContext(), attrs);
    }
    
    @Override
    protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams lp) {
        return new MyFlowLayout.LayoutParams(lp);
    }

}

1、由于我们的View是一个父View，所以需要继承ViewGroup类型。
2、在MyFlowLayout中分别要实现：onMeasure方法、onLayout方法、Margin属性支持。
onMeasure方法：测量每一个子View的宽高，如果子View累加起来后宽度超过父View的宽度，则重启一行，同时通过计算所有子View的尺寸推出整个父View需要的高度。
onLayout方法：为每一个子View进行布局，如果子View累加起来后的宽度超高父View的宽度，则另起一行进行布局，同时考虑margin等属性的影响。
Margin属性：如果子View要支持Margin属性，必须那父View必须实现自己的LayoutParams同时继承自MarginLayoutParams类，并通过generateDefaultLayoutParams、generateLayoutParams等方法返回自己的LayoutParams。（看上面的具体代码）

下面是使用的例子，XML布局如下：

<?xml version="1.0" encoding="utf-8"?>
<com.example.chenrongyi.myapplication.MyFlowLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000"
    android:padding="5dp"
    tools:context=".MainActivity">

    <Button
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:text="你好吗" />

    <Button
        android:layout_width="80dp"
        android:layout_height="70dp"
        android:layout_marginRight="20dp"
        android:text="你好吗" />

    <Button
        android:layout_width="90dp"
        android:layout_height="wrap_content"
        android:text="你好吗" />

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:text="你好吗" />

    <Button
        android:layout_width="110dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:text="你好吗" />

    <Button
        android:layout_width="70dp"
        android:layout_height="40dp"
        android:layout_marginRight="20dp"
        android:text="哈哈" />

    <Button
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="哈哈" />

</com.example.chenrongyi.myapplication.MyFlowLayout>

运行效果如下：