实现自己想要的View效果（2）：自定义ViewGroup

整理自：
http://blog.csdn.net/huachao1001/article/details/51577291

最近一个项目里面要用到自定义View的技术，看了很多博客，准备在这里整理一下
首先，我把实现自己想要的View效果的方法分为3类：

1. 自定义View

有多种实现方式：
Ⅰ、继承现有控件，对其控件的功能进行拓展。
Ⅱ、将现有控件进行组合，实现功能更加强大控件。
Ⅲ、重写View实现全新的控件

1. 自定义ViewGroup

这个实际上就是我们自定义一个布局，我们在实际使用的时候依然要在这个自定义ViewGroup中加子元素（比如TextView、ImageView或者其他）

上一篇把自定义View讲了，这一篇讲自定义ViewGroup：
首先先明确设计ViewGroup的要点：

1. 首先，我们得知道各个子View的大小吧，只有先知道子View的大小，我们才知道当前的ViewGroup该设置为多大去容纳它们。

1. 根据子View的大小，以及我们的ViewGroup要实现的功能，决定出ViewGroup的大小
2. ViewGroup和子View的大小算出来了之后，接下来就是去摆放了吧，具体怎么去摆放呢？这得根据你定制的需求去摆放了，比如，你想让子View按照垂直顺序一个挨着一个放，或者是按照先后顺序一个叠一个去放，这是你自己决定的。
3. 已经知道怎么去摆放还不行啊，决定了怎么摆放就是相当于把已有的空间”分割”成大大小小的空间，每个空间对应一个子View，我们接下来就是把子View对号入座了，把它们放进它们该放的地方去。

我们来个具体的案例：将子View按从上到下垂直顺序一个挨着一个摆放，即模仿实现LinearLayout的垂直布局。

一、重写onMeasure

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//将所有的子View进行测量，这会触发每个子View的onMeasure函数
//注意要与measureChild区分，measureChild是对单个view进行测量
measureChildren(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int childCount = getChildCount();
if (childCount == 0) {//如果没有子View,当前ViewGroup没有存在的意义，不用占用空间
setMeasuredDimension(0, 0);
} else {
//如果宽高都是包裹内容,即wrap_content
if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
//我们将高度设置为所有子View的高度相加，宽度设为子View中最大的宽度
int height = getTotleHeight();
int width = getMaxChildWidth();
setMeasuredDimension(width, height);
} else if (heightMode == MeasureSpec.AT_MOST) {//如果只有高度是包裹内容
//宽度设置为ViewGroup自己的测量宽度，高度设置为所有子View的高度总和
setMeasuredDimension(widthSize, getTotleHeight());
} else if (widthMode == MeasureSpec.AT_MOST) {//如果只有宽度是包裹内容
//宽度设置为子View中宽度最大的值，高度设置为ViewGroup自己的测量值
setMeasuredDimension(getMaxChildWidth(), heightSize);
}
}
}
/***
* 获取子View中宽度最大的值
*/
private int getMaxChildWidth() {
int childCount = getChildCount();
int maxWidth = 0;
for (int i = 0; i View childView = getChildAt(i);
if (childView.getMeasuredWidth() > maxWidth)
maxWidth = childView.getMeasuredWidth();
}
return maxWidth;
}
/***
* 将所有子View的高度相加
**/
private int getTotleHeight() {
int childCount = getChildCount();
int height = 0;
for (int i = 0; i View childView = getChildAt(i);
height += childView.getMeasuredHeight();
}
return height;
}


解释基本注释说的就很清楚了

二、拜访子View，使用onLayout

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
//记录当前的高度位置
int curHeight = t;
//将子View逐个摆放
for (int i = 0; i View child = getChildAt(i);
int height = child.getMeasuredHeight();
int width = child.getMeasuredWidth();
//摆放子View，参数分别是子View矩形区域的左、上、右、下边
child.layout(l, curHeight, l + width, curHeight + height);
curHeight += height;
}
}


上面child.layout(l, curHeight, l + width, curHeight + height);代码就是设置这个子View的左边上边右边下边的位置分别在哪里。
然后因为我们是想要实现一个在一个下面的效果，所以我们设置curHeight += height;
我们测试一下，将我们自定义的ViewGroup里面放3个Button ,将这3个Button的宽度设置不一样，把我们的ViewGroup的宽高都设置为包裹内容wrap_content
，为了看的效果明显，我们给ViewGroup加个背景：


android:layout_
android:layout_>
android:layout_
android:layout_
android:background="#ff9900">
android:layout_
android:layout_
android:text="btn" />
android:layout_
android:layout_
android:text="btn" />
android:layout_
android:layout_
android:text="btn" />




注意看上面的MyViewGroup里面包的三个Button子元素就是我们在写MyViewGroup遇到的int childCount = getChildCount();这些东西！！！我们就是把这些Child按照我们呢自己想要的方式来排序~~

看看最后的效果吧~

自定义ViewGroup

最后附上MyViewGroup的完整源码：

public class MyViewGroup extends ViewGroup {
public MyViewGroup(Context context) {
super(context);
}
public MyViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
}
/***
* 获取子View中宽度最大的值
*/
private int getMaxChildWidth() {
int childCount = getChildCount();
int maxWidth = 0;
for (int i = 0; i View childView = getChildAt(i);
if (childView.getMeasuredWidth() > maxWidth)
maxWidth = childView.getMeasuredWidth();
}
return maxWidth;
}
/***
* 将所有子View的高度相加
**/
private int getTotleHeight() {
int childCount = getChildCount();
int height = 0;
for (int i = 0; i View childView = getChildAt(i);
height += childView.getMeasuredHeight();
}
return height;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//将所有的子View进行测量，这会触发每个子View的onMeasure函数
//注意要与measureChild区分，measureChild是对单个view进行测量
measureChildren(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int childCount = getChildCount();
if (childCount == 0) {//如果没有子View,当前ViewGroup没有存在的意义，不用占用空间
setMeasuredDimension(0, 0);
} else {
//如果宽高都是包裹内容
if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
//我们将高度设置为所有子View的高度相加，宽度设为子View中最大的宽度
int height = getTotleHeight();
int width = getMaxChildWidth();
setMeasuredDimension(width, height);
} else if (heightMode == MeasureSpec.AT_MOST) {//如果只有高度是包裹内容
//宽度设置为ViewGroup自己的测量宽度，高度设置为所有子View的高度总和
setMeasuredDimension(widthSize, getTotleHeight());
} else if (widthMode == MeasureSpec.AT_MOST) {//如果只有宽度是包裹内容
//宽度设置为子View中宽度最大的值，高度设置为ViewGroup自己的测量值
setMeasuredDimension(getMaxChildWidth(), heightSize);
}
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
//记录当前的高度位置
int curHeight = t;
for (int i = 0; i View child = getChildAt(i);
int height = child.getMeasuredHeight();
int width = child.getMeasuredWidth();
child.layout(l, curHeight, l + width, curHeight + height);
curHeight += height;
}
}
}