Android 自定义view（三） 继承ViewGroup

前言：

本篇博客讲解内容主要是来自 鸿洋的博客Android 自定义ViewGroup 实战篇 -> 实现FlowLayout

上篇文章 自定义view（二），继承view。今天来看自定义View的第二种情况，继承自viewgroup，虽然viewGroup也是继承view控件，但是ViewGroup和View还是有很多方法区别的，顾名思义，这是一个控件的集合控件。

1.

我们来通过自定义viewGroup来实现瀑布流的效果。效果图如下：

2.

继承viewGroup主要来重写onMearsure和onLayout，剩下的onDraw更多是用来绘图的，所以不需要来重写。所以我们来看看代码

onMeasure

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        //获取测量模式和测量大小
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

            /**以下代码主要是针对测量模式是wrap_content时需要动态的计算，如果是一些具体的大小或者match_parent时根本不不需要写onMearsure
            */
        //整个自定义viewgroup的宽，高的最大值进行记录
        int width = 0;
        int height = 0;
        //判断是否要换行时使用
        int lineWidth = 0;
        int lineHeight = 0;
        //计算子view的个数
        int cCount = getChildCount();
        //for循环计算每个子view在viewgroup中的大小
        for (int i = 0; i < cCount; i++)
        {
            View child = getChildAt(i);
            //measureChild这个方法来计算子view的大小和mode，这个viewGroup定义的一个方法，是个很重要的方法
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            // 得到child的lp，MarginLayoutParams可以得到Margin数据。
            MarginLayoutParams lp = (MarginLayoutParams) child
                    .getLayoutParams();
            //measureChild方法过后，child.getMeasuredWidth()才能计算得到值，不然会为0
            int childWidth = child.getMeasuredWidth() + lp.leftMargin
                    + lp.rightMargin;
            int childHeight = child.getMeasuredHeight() + lp.topMargin
                    + lp.bottomMargin;
            //判断是否需要换行
            if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight())
            {
                //需要换行了，记录宽的最大值
                width = Math.max(width, lineWidth);
                //换行后的新的lineWidth等于控件的宽
                lineWidth = childWidth;
                height += lineHeight;
                lineHeight = childHeight;
            } else
            {   //不需要换行
                lineWidth += childWidth;
                lineHeight = Math.max(lineHeight, childHeight);
            }
            //最后一个view
            if (i == cCount - 1)
            {
                width = Math.max(lineWidth, width);
                height += lineHeight;
            }
        }
        //不同的mode进行一个简单的判断，viewGroup的真正的大小实际上就是通过这个方法进行设置的
        setMeasuredDimension(
                //
                modeWidth == MeasureSpec.EXACTLY ? sizeWidth : width + getPaddingLeft() + getPaddingRight(),
                modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height + getPaddingTop() + getPaddingBottom()//
        );

    }

上面的注释其实也是十分的详细了，上面有个很关键的方法，是进行测试子view的
measureChild(child, widthMeasureSpec, heightMeasureSpec);这个viewgroup的方法，我们来看下源码：

    /**
     * Ask one of the children of this view to measure itself, taking into
     * account both the MeasureSpec requirements for this view and its padding.
     * The heavy lifting is done in getChildMeasureSpec.
     *
     * @param child The child to measure
     * @param parentWidthMeasureSpec The width requirements for this view
     * @param parentHeightMeasureSpec The height requirements for this view
     */
    protected void measureChild(View child, int parentWidthMeasureSpec,
            int parentHeightMeasureSpec) {
        final LayoutParams lp = child.getLayoutParams();

        final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
                mPaddingLeft + mPaddingRight, lp.width);
        final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
                mPaddingTop + mPaddingBottom, lp.height);

        child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
    }

getChildMeasureSpec（）和measure（）这两个方法的源码大家可以自己看看，主要是对子view进行测量。

3.

测量好了大小后，我们来看看是如何布局的，此时需要重写onLayout方法：

    //记录所有的子view，并且再按行来进行一个区别记录
    private List<List<View>> mAllViews = new ArrayList<List<View>>();  
    //记录没行的最大高度 
    private List<Integer> mLineHeight = new ArrayList<Integer>();  
    @Override  
    protected void onLayout(boolean changed, int l, int t, int r, int b)  
    {  
        mAllViews.clear();  
        mLineHeight.clear();  

        int width = getWidth();  

        int lineWidth = 0;  
        int lineHeight = 0;  
        // 存储每一行所有的childView  
        List<View> lineViews = new ArrayList<View>();  
        int cCount = getChildCount();  
        // 遍历所有的孩子  
        for (int i = 0; i < cCount; i++)  
        {  
            View child = getChildAt(i);  
            MarginLayoutParams lp = (MarginLayoutParams) child  
                    .getLayoutParams();  
            int childWidth = child.getMeasuredWidth();  
            int childHeight = child.getMeasuredHeight();  

            // 如果已经需要换行  
            if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width)  
            {  
                // 记录这一行所有的View以及最大高度  
                mLineHeight.add(lineHeight);  
                // 将当前行的childView保存，然后开启新的ArrayList保存下一行的childView  
                mAllViews.add(lineViews);  
                lineWidth = 0;// 重置行宽  
                lineViews = new ArrayList<View>();  
            }  
            /** 
             * 如果不需要换行，则累加 
             */  
            lineWidth += childWidth + lp.leftMargin + lp.rightMargin;  
            lineHeight = Math.max(lineHeight, childHeight + lp.topMargin  
                    + lp.bottomMargin);  
            lineViews.add(child);  
        }  
        // 记录最后一行  
        mLineHeight.add(lineHeight);  
        mAllViews.add(lineViews);  

        int left = 0;  
        int top = 0;  
        // 得到总行数  
        int lineNums = mAllViews.size();  
        for (int i = 0; i < lineNums; i++)  
        {  
            // 每一行的所有的views  
            lineViews = mAllViews.get(i);  
            // 当前行的最大高度  
            lineHeight = mLineHeight.get(i);  

            // 遍历当前行所有的View  
            for (int j = 0; j < lineViews.size(); j++)  
            {  
                View child = lineViews.get(j);  
                if (child.getVisibility() == View.GONE)  
                {  
                    continue;  
                }  
                MarginLayoutParams lp = (MarginLayoutParams) child  
                        .getLayoutParams();  

                //计算childView的left,top,right,bottom  
                int lc = left + lp.leftMargin;  
                int tc = top + lp.topMargin;  
                int rc =lc + child.getMeasuredWidth();  
                int bc = tc + child.getMeasuredHeight();  

                //以上所有的计算都是为了获取这四个参数，来进行子view的布局。
                child.layout(lc, tc, rc, bc);  

                left += child.getMeasuredWidth() + lp.rightMargin  
                        + lp.leftMargin;  
            }  
            left = 0;  
            top += lineHeight;  
        }  

    } 

代码也不是很难，细心一点。

4.

实际上，我们可以发现，该自定义控件实现的逻辑挺简单的，主要是：
（1）onMeasure中，通过计算每个子view的大小才确定viewgroup的大小。
（1）onLayout中，动态的计算子view的位置坐标然后进行一个布局。
由此也可以发现，自定义viewgroup最重要的也就是这两个方法，但是，其中很多小的细节也是需要我们注意到的，比如:
（a）只有子view调用了measure方法，才能调用getMeasureSpec获取到值，不然为0.
（b）用MarginLayoutParams来支持margin属性。
代码：

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

以上代码就可以简单实现自定义view的流式布局了。

最近搞了个Android技术分享的公众号，欢迎关注投稿。