Android深入浅出自定义控件（二）

在我的上篇博文Android深入迁出自定义控件（一）中介绍了如何自定义View控件，本篇博文主要介绍如何自定义ViewGroup

什么是ViewGroup?

在Android的树状结构图中，ViewGroup类衍生出我们所熟悉的LinearLayout、RelativeLayout等布局：



简单来说，ViewGroup其实就相当于所有布局的父亲，所以我们可以通过自定义ViewGroup类实现千变万化的布局。

自定义ViewGroup主要分为以下几个步骤：

1.创建自定义ViewGroup类，继承于ViewGroup类，重写ViewGroup的三个构造方法

2.重写onMeasure方法，设置好ViewGroup及其子View在界面上所显示的大小

3.添加参数

4.重写onLayout方法，设置好子View的布局，这个方法也是最为关键的，它决定了你所自定义的布局的特性

1.创建自定义ViewGroup类，继承于ViewGroup类，重写ViewGroup的三个构造方法

public class FlowLayoutextends ViewGroup{

public FlowLayout(Context context) {
// TODO Auto-generated constructor stub
this(context,null);
}

public FlowLayout(Context context, AttributeSet attrs) {
// TODO Auto-generated constructor stub
this(context,attrs,0);

}

public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
}

}

2.重写onMeasure方法，设置好ViewGroup及其子View在界面上所显示的大小

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
measureChildren(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

对这个方法的使用见下文，此处记得添加measureChildren(widthMeasureSpec, heightMeasureSpec);表示由系统自己测量每个子View的大小

3.添加参数，比如我们想要让子View之间能有间距，则需要手动创建一个内部参数类

public static class FlowLayoutParams extends ViewGroup.MarginLayoutParams{

public FlowLayoutParams(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}

}

4.重写onLayout方法，设置好子View的布局，这个方法也是最为关键的，它决定了你所自定义的布局的特性

@Override
protected void onLayout(boolean arg0, int left, int top, int right, int bottom) {
// TODO Auto-generated method stub
//获得FlowLayout所测量出来的宽度
int mViewGroupWidth = getMeasuredWidth();
/**
* paintX:绘制每个View时的光标起点的横坐标
* paintY:绘制每个View时的光标起点的纵坐标
*/
int paintX = left;
int paintY = top;

//用于记录上一行的最大高度
int maxlineHeight = 0;

int childCount = getChildCount();
for(int i=0; i<childCount; i++){
View childView = getChildAt(i);

//获得每个子View的margin参数
FlowLayout.FlowLayoutParams params = (FlowLayout.FlowLayoutParams)childView.getLayoutParams();
//获得每个子View所测量出来的宽度和高度
int childViewWidth = childView.getMeasuredWidth();
int childViewHeight = childView.getMeasuredHeight();

//如果绘制的起点横坐标+左间距+子View的宽度+右间距比FlowLayout的宽度还大，就需要进行换行
if(paintX + childViewWidth + params.leftMargin + params.rightMargin> mViewGroupWidth){
//绘制的起点的横坐标重新移回FlowLayout的横坐标
paintX = left;
//绘制的起点的纵坐标要向下移动一行的高度
paintY = paintY + maxlineHeight + params.topMargin + params.bottomMargin;
maxlineHeight = 0;
}
maxlineHeight = Math.max(childViewHeight, maxlineHeight);
childView.layout(paintX+params.leftMargin, paintY+params.topMargin, paintX+childViewWidth+params.leftMargin, paintY+childViewHeight+params.topMargin);
//每绘制一次，起点光标就要向右移动一次
paintX = paintX + childViewWidth + params.leftMargin + params.rightMargin;
}
}

解析：在onLayout方法中，我们对每个子View进行遍历并设置好它们应该在的位置，比如是LinearLayout的话，在onLayout中系统会规定它的子View只能按着横向或者竖向排列下去，也就是说，onLayout里子View的排布是按着我们自己的想法来决定，到底这个自定义布局会有怎样的特性？

此处我们demo是自定义FlowLayout，也就是每一行都向右排列下去，直到这一行不够容纳，则子View自动换行，进入下一行，依此类推，从而实现流式布局，为了实现这样的效果，最关键的应该是在换行的时候，需要实现让我们的子View能够判断到底换不换行，代码思路如下：

1.首先需要记录FlowLayout的宽度， 作为每一行的宽度上限：

int mViewGroupWidth = getMeasuredWidth();

2.每次绘制一个子View，是通过View.layout()方法来进行，而layout方法需要提供4个参数，即（绘制的起点横坐标，绘制的起点纵坐标，子View的宽度，子View的高度），而每一个子View的绘制起点肯定不一样，所以需要定义两个变量来记录：paintX,paintY：

/**
* paintX:绘制每个View时的光标起点的横坐标
* paintY:绘制每个View时的光标起点的纵坐标
*/
int paintX = left;
int paintY = top;

3.通过for循环，遍历得到每个子View，由于要让子View之间能够有间距，所以还需要定义一个margin参数提供给子View：

FlowLayout.FlowLayoutParams params = (FlowLayout.FlowLayoutParams)childView.getLayoutParams();

以及获得每个子View的宽高：

int childViewWidth = childView.getMeasuredWidth();
int childViewHeight = childView.getMeasuredHeight();

4.判断如果再添加一个子View，需不需要换行，所以需要将这个View的宽度和当前行的宽度相加，与FlowLayout的宽度(即上限)进行对比，如果超过上限，就进行换行操作：

//绘制的起点的横坐标重新移回FlowLayout的横坐标
paintX = left;
//绘制的起点的纵坐标要向下移动一行的高度
paintY = paintY + maxlineHeight + params.topMargin + params.bottomMargin;
//由于换行，所以当前行变成了下一行，最大高度自然也就置为当前这个新起行的子View的高度(因为它是下一行的第一个View)
maxlineHeight = childViewHeight;

5.绘制当前子View，光标移动至下一个起点：

//每次都要计算当前行的最大高度
maxlineHeight = Math.max(childViewHeight, maxlineHeight);
childView.layout(paintX+params.leftMargin, paintY+params.topMargin, paintX+childViewWidth+params.leftMargin, paintY+childViewHeight+params.topMargin);
//每绘制一次，起点光标就要向右移动一次
paintX = paintX + childViewWidth + params.leftMargin + params.rightMargin;

至此，一个基本的FlowLayout布局定义完成，接下来就只需要在布局文件中来使用它：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<com.example.view.FlowLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="全部"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="体育"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="连续剧"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="综艺"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="电影"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="搞笑"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="儿童教育"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="技术教程"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="音乐频道"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="赛事直播"
/>
</com.example.view.FlowLayout>

</RelativeLayout>

运行：






可以看到达到了我们所要的效果，但这里我们设置的FlowLayout的大小都是fill_parent，如果改为wrap_content会怎样？

将FlowLayout的layout_height设置为wrap_content,虽然屏幕上仍然呈现的是一样的效果，可是在预览窗口中点击FlowLayout，可以看到其实FlowLayout依旧是fill_parent的大小，而不是贴着子View的边缘，如图：



这不是我们想要的效果，正确的做法应该是：设置为wrap_content时，FlowLayout的边界是紧紧贴着子View的边缘的，所以我们应该修改onMeasure方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
//measureChildren(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

//得到FlowLayout的模式和宽高
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

//记录wrap_content下的最终宽度和高度
int width = 0;
int height = 0;
//记录每一行的最大宽度和最大高度
int lineWidth = 0;
int lineHeight = 0;

int childCount = getChildCount();
for(int i=0;i<childCount;i++){
View childView = getChildAt(i);
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
FlowLayout.FlowLayoutParams params = (FlowLayout.FlowLayoutParams)childView.getLayoutParams();

int childWidth = params.leftMargin + childView.getMeasuredWidth() + params.rightMargin;
int childHeight = params.topMargin + childView.getMeasuredHeight() + params.bottomMargin;

//如果是换行，则比较宽度取当前行的最大宽度和下一个子View的宽度，将最大者暂时作为FlowLayout的宽度
if(lineWidth + childWidth > widthSize){
width = Math.max(lineWidth, childWidth);
height = height + lineHeight;
lineWidth = childWidth;
lineHeight = childHeight;
}else
// 否则累加值lineWidth,lineHeight取最大高度
{
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}

//如果是最后一个子View
if (i == childCount - 1){
width = Math.max(width, lineWidth);
height += lineHeight;
}

}
//根据模式来决定FlowLayout的大小，如果不是EXACTLY,则说明布局文件中设置的模式应该是wrap_content
/**
* 如果是wrap_content,则将FlowLayout宽度和高度设置为我们计算出来的最终宽高
* 如果是fill_parent或者具体数值，则将FlowLayout宽度和高度设置为一开始getMode和getSize得到的那个宽高
*/
setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? widthSize
: width, (heightMode == MeasureSpec.EXACTLY) ? heightSize
: height);
}

再次查看预览窗口：



关于重写系统控件会在以后的博文中整合，希望本文能够让大家对自定义ViewGroup有所帮助。