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

2022-12-04 11:02:16

前言

在自定义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的方法了。

码农公寓

前言

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

考虑ViewGroup的padding问题

考虑子View的Margin问题

相关文章