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