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