自定义View和ViewGroup是Android App开发中非常重要的一环，能够帮助我们打造出更加独特、灵活的UI控件。下面，我将为大家分享一个完整的、基于Markdown格式写作的自定义View和ViewGroup攻略，包含理论知识、实战演练和示例代码。

自定义View和ViewGroup的实例教程

1. 自定义View

1.1 自定义View介绍

自定义View即使用Java代码或XML实现自己的控件，相比于Android系统提供的控件，自定义控件可以更加灵活、美观，同时能够满足特定的业务需求。

1.2 实现自定义View的步骤

实现自定义View的步骤大致如下：

创建一个类，继承自View类或其子类，重写相关的方法。
在XML布局文件中使用该控件。

1.3 示例一：实现一个简单的圆形View

下面我们通过一个简单的示例，来学习如何实现一个圆形View。

1.3.1 创建类

首先，我们创建一个CircleView类，继承自View类。

public class CircleView extends View {

    public CircleView(Context context) {
        super(context);
    }

    public CircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

1.3.2 重写onDraw()方法

接着，我们重写onDraw()方法，绘制一个圆形。

public class CircleView extends View {

    private Paint mPaint;

    public CircleView(Context context) {
        super(context);
        init();
    }

    public CircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width, height) / 2;
        canvas.drawCircle(width / 2, height / 2, radius, mPaint);
    }
}

1.3.3 使用控件

最后，在XML布局文件中使用该控件即可。

<com.example.CircleView
    android:layout_width="200dp"
    android:layout_height="200dp" />

2. 自定义ViewGroup

2.1 自定义ViewGroup介绍

自定义ViewGroup即使用Java代码或XML实现自己的布局控件，能够满足特定的业务需求。

2.2 实现自定义ViewGroup的步骤

实现自定义ViewGroup的步骤大体如下：

创建一个类，继承自ViewGroup类或其子类，重写相关的方法。
在XML布局文件中使用该控件。

2.3 示例二：实现一个简单的FlowLayout

下面我们通过一个简单的示例来学习如何实现一个FlowLayout布局控件。

2.3.1 创建类

首先，我们创建一个FlowLayout类，继承自ViewGroup类。

public class FlowLayout extends ViewGroup {

    public FlowLayout(Context context) {
        super(context);
    }

    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // TODO: 实现布局
    }
}

2.3.2 实现布局

接着，我们实现布局方法，其中的代码会自动计算每个子View的大小和位置，并将它们按照水平方向排列。

public class FlowLayout extends ViewGroup {

    public FlowLayout(Context context) {
        super(context);
    }

    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int width = getWidth();
        int height = getHeight();
        int left = getPaddingLeft();
        int top = getPaddingTop();
        int right = getWidth() - getPaddingRight();
        int bottom = getHeight() - getPaddingBottom();
        int lineWidth = left;
        int lineHeight = top;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            int childWidth = child.getMeasuredWidth();
            int childHeight = child.getMeasuredHeight();
            if (lineWidth + childWidth > right) {
                lineWidth = left;
                lineHeight += childHeight;
            }
            child.layout(lineWidth, lineHeight, lineWidth + childWidth, lineHeight + childHeight);
            lineWidth += childWidth;
        }
    }
}

2.3.3 使用控件