自定义View二篇，如何自定义一个规范的ViewGroup

前言

在自定义View开篇，必须跨过的一道坎儿 中，我们介绍了自定义View的几种方式，以及如何实现一个规范的自定义View，上文中也说了，实现一个规范的自定义ViewGroup是一件比较困难的事情，因为要考虑的情况包含 本身的padding以及子view的margin 与 本身wrap_content 问题。

如何实现一个规范的ViewGroup,以实现垂直布局的LinerLayout为例

• 新建LinerLayoutView 继承自ViewGroup

首先我们让LinerLayoutView 适应wrap_content的情况，在onMeasure中处理如下，同自定义View处理一样,不同的是我们需要计算子View宽高，代码如下所示：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    measureChildren(widthMeasureSpec,heightMeasureSpec);
    int totalheight = 0;
    int totalWidth = 0;

    for (int i = 0; i < getChildCount(); i++){
        View childView = getChildAt(i);
        int childrWidth = childView.getMeasuredWidth();
        int childHeight = childView.getMeasuredHeight();
        totalheight = totalheight + childHeight;
        totalWidth = Math.max(totalWidth,childrWidth);
    }

    if (heightMode == MeasureSpec.AT_MOST && widthMode == MeasureSpec.AT_MOST){
        setMeasuredDimension(totalWidth,totalheight);
    }else if (heightMode == MeasureSpec.AT_MOST){
        setMeasuredDimension(measureWidth,totalheight);
    }else if (widthMode == MeasureSpec.AT_MOST){
        setMeasuredDimension(totalWidth,measureHeight);
    }
}

我们需要调用下面方法来测量子view

measureChildren(widthMeasureSpec,heightMeasureSpec);

因为这里我们是垂直排列的，所以要循环计算view的总高度，wrap_content情况对应的宽度为子View最大的宽度，上面代码比较简单 我们主要来看onLayout方法。

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

    int totalHeight = 0;

    for (int i = 0; i < getChildCount(); i++){
        View childView = getChildAt(i);
        int childrWidth = childView.getMeasuredWidth();
        int childHeight = childView.getMeasuredHeight();
        childView.layout(0,totalHeight,childrWidth,totalHeight + childHeight);
        totalHeight = totalHeight + childHeight;
    }
}

view.layout方法 是将view放置在什么地方，分别对应left、top、right、bottom四个点，这里我们需要注意的是，务必使用getMeasureWidth不能使用getWidth，因为前者是在测量的时候获取的，后者在布局完成之后才能获取到。

在布局文件中 引用这个ViewGroup，并且添加两个子View，代码如下所示：

<com.support.hlq.layout.LinerLayoutView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="kkko"
        android:textColor="@color/colorAccent" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="kkko"
        android:textColor="@color/colorAccent" />

</com.support.hlq.layout.LinerLayoutView>

运行结果如图所示，可以看到我们已经适配了wrap_content的情况

考虑ViewGroup的padding问题

上面代码，已经实现了最简单的垂直排列，我们给LinerLayoutView设置大小为40的边距，发现边距并没有生效，所以我们需要在onMeasure以及onLayout的方法中考虑padding问题。改写onMeasure方法如下：

for (int i = 0; i < getChildCount(); i++){
    View childView = getChildAt(i);
    int childrWidth = childView.getMeasuredWidth();
    int childHeight = childView.getMeasuredHeight();

    totalheight = totalheight + childHeight;
    totalWidth = Math.max(totalWidth,childrWidth);
}

totalheight = totalheight + getPaddingTop() + getPaddingBottom();
totalWidth = totalWidth + getPaddingLeft() + getPaddingRight();

因为我们处理的是ViewGroup的边距，所以我们只需要对最终计算的高度和宽度分别加上上下边距 和左右边距即可，这里你可能会有疑问

int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);

为什么上面两处代码不需要加上边距呢，因为MeasureSpec获取到的大小是已经包含过padding，所以我们不需要处理通过MeasureSpec获取的宽高。

接下来，我们修改layout方法

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

    int totalHeight = getPaddingTop();

    for (int i = 0; i < getChildCount(); i++){
        View childView = getChildAt(i);

        int childrWidth = childView.getMeasuredWidth();
        int childHeight = childView.getMeasuredHeight();

        childView.layout(0 + getPaddingLeft(),
                totalHeight,
                childrWidth + getPaddingLeft(),
                totalHeight + childHeight + getPaddingTop());
        totalHeight = totalHeight + childHeight;
    }
}

left点我们加上getPaddingLeft,总高度由0修改为getPaddingTop，其他两点也分别加上边距布局即可，运行结果如下所示

我们可以看出ViewGroup的边距已经生效了。

考虑子View的Margin问题

到这里 这个自定义的ViewGroup还是不够规范，不信我们来给第一个TextView设置下边距为20dp

<com.support.hlq.layout.LinerLayoutView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark">

    <TextView
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="kkko"
        android:textColor="@color/colorAccent" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="kkko"
        android:textColor="@color/colorAccent" />

</com.support.hlq.layout.LinerLayoutView>

在这里，因为要获取到margin所以必须重写

generateLayoutParams 方法和 generateDefaultLayoutParams 方法

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

@Override
protected LayoutParams generateDefaultLayoutParams() {
    return new MarginLayoutParams(LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT);
}

@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
    return new MarginLayoutParams(p);
}

重写上面三个方法后，我们才能获取margin参数，同样的我们首先在onMeasure中考虑子view边距

for (int i = 0; i < getChildCount(); i++) {
    View childView = getChildAt(i);

    MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
    int childrWidth = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
    int childHeight = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
    totalheight = totalheight + childHeight;
    totalWidth = Math.max(totalWidth, childrWidth);
}

还要在获取宽高的时候加上对应的边距即可，同样还需要在onLayout方法中考虑子view 的边距问题，修改如下：

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

    int totalHeight = getPaddingTop();

    for (int i = 0; i < getChildCount(); i++) {
        View childView = getChildAt(i);

        MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();

        int childrWidth = childView.getMeasuredWidth() ;
        int childHeight = childView.getMeasuredHeight() ;

        childView.layout(getPaddingLeft() + lp.leftMargin,
                totalHeight + lp.topMargin,
                childrWidth + getPaddingLeft() + lp.leftMargin,
                totalHeight + childHeight + getPaddingTop() + lp.topMargin);
        totalHeight = totalHeight + childHeight + lp.topMargin + lp.bottomMargin;
    }
}

在layout的时候考虑子view的边距，记得在计算总高度的时候 也要加上边距和下边距，运行结果如下图所示

这样一来，我们就定义了一个比较规范的ViewGroup,加上我们上篇文章讲的自定义属性，相信大家都掌握了自定义View的方法了。