自定义View绘制一个圆

继承View重写onDraw方法

首先实现一个很简单的自定义控件，绘制一个圆。

public class CircleView extends View  {
    private Paint paint;
    public CircleView(Context context) {
        super(context);
        init();
    }

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

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


    private void init() {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.RED);
    }

    @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,paint);
    }
}

 上面的代码实现了一个具有圆形效果的自定义View，它会在自己的中心点以宽/高的最小值为直径绘制一个红色的实心圆

请看下面的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.customviewdemo.CircleView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:paddingTop="20dp"
        />

</LinearLayout>

margin属性是生效的。这是因为margin属性是由父容器控制的，因此不需要在CircleView中做特殊处理。

padding根本没有生效，这就是我们在前面提到的直接继承自View和ViewGroup的控件，padding是默认无法生效的，需要自己处理。

为了解决上面提到的几种问题，我们需要做如下处理：

首先，针对wrap_content的问题，这里只需要指定一个wrap_content模式的默认宽/高即可，比如选择200px作为默认的宽/高。

其次，针对padding的问题，也很简单，只要在绘制的时候考虑一下padding即可，因此我们需要对onDraw稍微做一下修改，修改后的代码如下所示。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int paddingLeft = getPaddingLeft();
    int paddingRight = getPaddingRight();
    int paddingTop = getPaddingTop();
    int paddingBottom = getPaddingBottom();

    int width = getWidth() - paddingLeft - paddingRight;
    int height = getHeight() - paddingTop - paddingBottom;

    int radius = Math.min(width, height) / 2;
    canvas.drawCircle(paddingLeft + width / 2, paddingTop + height / 2, radius, paint);
}

自定义属性

第一步，在values目录下面创建自定义属性的XML，比如attrs.xml

<resources>
    <declare-styleable name="CircleView">
        <attr name="circle_color" format="color"/>
    </declare-styleable>
</resources>

在上面的XML中声明了一个自定义属性集合“CircleView”，在这个集合里面可以有很多自定义属性，这里只定义了一个格式为“color”的属性“circle_color”，这里的格式color指的是颜色。除了颜色格式，自定义属性还有其他格式，比如reference是指资源id，dimension是指尺寸，而像string、integer和boolean这种是指基本数据类型。

第二步，在View的构造方法中解析自定义属性的值并做相应处理。对于本例来说，我们需要解析circle_color这个属性的值，代码如下所示。

public class CircleView extends View {
    private Paint paint;
    private int mColor;

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

    public CircleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a =context.obtainStyledAttributes(attrs,R.styleable.CircleView);
        mColor = a.getColor(R.styleable.CircleView_circle_color, Color.BLUE);
        a.recycle();

        init();
    }


    private void init() {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(mColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();

        int width = getWidth() - paddingLeft - paddingRight;
        int height = getHeight() - paddingTop - paddingBottom;

        int radius = Math.min(width, height) / 2;
        canvas.drawCircle(paddingLeft + width / 2, paddingTop + height / 2, radius, paint);
    }
}

第三步，在布局文件中使用自定义属性，如下所示。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.customviewdemo.CircleView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:paddingTop="12dp"
        android:paddingLeft="22dp"
        app:circle_color="#0f0"
        />

</LinearLayout>

CircleView的自定义属性已经circle_color生效。

效果图如下：

参考资料：《Android的开发艺术探索》