前言
在自定义View开篇，必须跨过的一道坎儿 中，我们介绍了自定义View的几种方式，以及如何实现一个规范的自定义View，上文中也说了，实现一个规范的自定义ViewGroup是一件比较困难的事情，因为要考虑的情况包含 本身的padding以及子view的margin 与 本身wrap_content 问题。
如何实现一个规范的ViewGroup,以实现垂直布局的LinerLayout为例
- 新建LinerLayoutView 继承自ViewGroup
首先我们让LinerLayoutView 适应wrap_content的情况，在onMeasure中处理如下，同自定义View处理一样,不同的是我们需要计算子View宽高，代码如下所示：
代码语言：javascript复制@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
代码语言：javascript复制measureChildren(widthMeasureSpec,heightMeasureSpec);因为这里我们是垂直排列的，所以要循环计算view的总高度，wrap_content情况对应的宽度为子View最大的宽度，上面代码比较简单 我们主要来看onLayout方法。
代码语言：javascript复制@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，代码如下所示：
代码语言：javascript复制<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方法如下：
代码语言：javascript复制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的边距，所以我们只需要对最终计算的高度和宽度分别加上上下边距 和左右边距即可，这里你可能会有疑问
代码语言：javascript复制int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);为什么上面两处代码不需要加上边距呢，因为MeasureSpec获取到的大小是已经包含过padding，所以我们不需要处理通过MeasureSpec获取的宽高。
接下来，我们修改layout方法
代码语言：javascript复制@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
代码语言：javascript复制<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所以必须重写
代码语言：javascript复制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边距
代码语言：javascript复制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 的边距问题，修改如下：
代码语言：javascript复制@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的方法了。
