Creating a custom ViewGroup(自定义ViewGroup)

想要实现下面的UI效果：

When you’re designing your application, you might have complex views that will show up in different activities. Imagine that
you’re creating a card game and you want to show the user’s hand in a layout similar to figure. How would you create a
layout like that?You might say that playing with margins will be enough for that type of layout. That’s true. You can do something similar to the previous figure with a RelativeLayout and add margins to its children. The XML looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <View
        android:layout_width="100dp"
        android:layout_height="150dp"
        android:background="#FF0000" />

    <View
        android:layout_width="100dp"
        android:layout_height="150dp"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="20dp"
        android:background="#00FF00" />

    <View
        android:layout_width="100dp"
        android:layout_height="150dp"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="40dp"
        android:background="#0000FF" />

</RelativeLayout>

The benefits of using a custom ViewGroup instead of adding margins by hand in an XML file are
these:
1. It’s easier to maintain if you’re using it in different activities.

2.You can use custom attributes to customize the position of the ViewGroup children.

  3.The XML will be easier to understand because it’ll be more concise.

4.If you need to change the margins, you won’t need to recalculate by hand every
child’s margin.
第一步：Understanding how Android draws views

Drawing the layout is a two-pass process: a measure pass and a layout pass. The
measuring pass is implemented in measure(int, int) and is a top-down traversal of the View tree. Each View pushes dimension specifications down the tree during the recursion. At the end of the measure pass, every View has stored its measurements. The second pass happens in layout(int, int, int,int) and is also top-down. During this pass each parent is responsible for positioning all of its children using the sizes computed in the measure pass.To understand the concept, let’s analyze the way to draw a ViewGroup. The first step is to measure its width and height, and we do this in the onMeasure() method. Inside that method, the ViewGroup will calculate its size by going through its children. We’ll make the final pass in the onLayout() method. Inside this second method, the ViewGroup will lay out its children using the information gathered in the onMeasure() pass.
第二步：attrs.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CascadeLayout">
        <attr name="horizontal_spacing" format="dimension" />
        <attr name="vertical_spacing" format="dimension" />
    </declare-styleable>
</resources>

第三步：布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cascade="http://schemas.android.com/apk/res/com.example.customview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <com.example.customview.CascadeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        cascade:horizontal_spacing="30dp"
        cascade:vertical_spacing="20dp" >

        <View
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="#FF0000" />

        <View
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="#00FF00" />

        <View
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="#0000FF" />
    </com.example.customview.CascadeLayout>

</FrameLayout>

第四步：

package com.example.customview;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class CascadeLayout extends ViewGroup {

	private int mHorizontalSpacing;
	private int mVerticalSpacing;

	public CascadeLayout(Context context, AttributeSet attrs) {
		super(context, attrs);

		TypedArray a = context.obtainStyledAttributes(attrs,
				R.styleable.CascadeLayout);

		try {
			mHorizontalSpacing = a.getDimensionPixelSize(
					R.styleable.CascadeLayout_horizontal_spacing,
					getResources().getDimensionPixelSize(
							R.dimen.cascade_horizontal_spacing));

			mVerticalSpacing = a.getDimensionPixelSize(
					R.styleable.CascadeLayout_vertical_spacing,
					getResources().getDimensionPixelSize(
							R.dimen.cascade_vertical_spacing));
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			a.recycle();
		}

	}

	public static class LayoutParams extends ViewGroup.LayoutParams {

		int x;
		int y;

		public LayoutParams(int w, int h) {
			super(w, h);
		}

		public LayoutParams(Context c, AttributeSet attrs) {
			super(c, attrs);
		}

	}

	@Override
	protected boolean checkLayoutParams(android.view.ViewGroup.LayoutParams p) {
		return super.checkLayoutParams(p);
	}

	@Override
	protected android.view.ViewGroup.LayoutParams generateDefaultLayoutParams() {
		return super.generateDefaultLayoutParams();
	}

	@Override
	public android.view.ViewGroup.LayoutParams generateLayoutParams(
			AttributeSet attrs) {
		return super.generateLayoutParams(attrs);
	}

	@Override
	protected android.view.ViewGroup.LayoutParams generateLayoutParams(
			android.view.ViewGroup.LayoutParams p) {
		return super.generateLayoutParams(p);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

		int width = 0;

		int height = getPaddingTop();

		int count = getChildCount();

		for (int i = 0; i < count; i++) {

			View child = getChildAt(i);

			measureChild(child, widthMeasureSpec, heightMeasureSpec);

			LayoutParams lp = (LayoutParams) child.getLayoutParams();

			width = getPaddingLeft() + mHorizontalSpacing * i;

			lp.x = width;

			lp.y = height;

			width += child.getMeasuredWidth();
			height += mVerticalSpacing;

		}

		width += getPaddingRight();
		height += getChildAt(getChildCount() - 1).getMeasuredHeight()
				+ getPaddingBottom();

		setMeasuredDimension(resolveSize(width, widthMeasureSpec),
				resolveSize(height, heightMeasureSpec));
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {

		int count = getChildCount();

		for (int i = 0; i < count; i++) {

			View child = getChildAt(i);

			LayoutParams lp = (LayoutParams) child.getLayoutParams();

			/*
			 * l Left position, relative to parent t Top position, relative to
			 * parent r Right position, relative to parent b Bottom position,
			 * relative to parent
			 */
			child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y
					+ child.getMeasuredHeight());

		}

	}

}