Android自定义View示例（一）直接继承View

本文首先会介绍最简单的自定义View的实现，即直接继承View；然后逐渐完善控件，完善的目的就是为了学习如何解决Android View的工作原理（三）自定义View中提到的注意事项，例如支持wrap_content模式、考虑padding属性；此外我们还要对外提供自定义属性。

public class CircleView extends View {

    private int height;
    private int width;

    private Paint defaultPaint;

    public CircleView(Context context) {
        this(context, null);
    }

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

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

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

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        height = h;
        width = w;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //转换坐标系,把坐标原点移到屏幕中间位置
        canvas.translate(width / 2, height / 2);
        int radius = Math.min(width, height) / 2;
        canvas.drawCircle(0, 0, radius/2, defaultPaint);

    }
}

上面的代码很简单，只是对坐标进行了简单的变换，然后调用canvas.drawCircle在中央绘制一个红色的实心圆，接下来我们就可以在布局中使用CircleView。

运行程序后效果如下图所示：

实心圆

正如上节的注意事项提到的：wrap_content属性确实达到了match_parent属性的效果，因此我们需要重写View的onMeasure方法，在使用wrap_content的时候给View设置默认宽/高，添加代码如下：

private int defaultWidth = 500;
private int defaultHeight = 500;

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(defaultWidth, defaultHeight);
    } else if (widthMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(defaultWidth, heightSize);
    } else if (heightMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(widthSize, defaultHeight);
    }
}

再次运行程序后效果如下图所示：

支持wrap_content

根据运行结果我们可以看到，View在使用wrap_content的时候达到了我们所预期的效果。

我们继续调整CircleView的布局参数，设置一个20dp的padding属性。

运行之后发现padding没有生效，需要自己处理，再次印证了前面提到的结论。我们需要对onDraw方法做一些调整，圆心坐标和半径都需要考虑View四周的padding，从而做相应的调整：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //转换坐标系,把坐标原点移到屏幕中间位置
    canvas.translate(width / 2, height / 2);
    int paddingLeft = getPaddingLeft();
    int paddingRight = getPaddingRight();
    int paddingTop = getPaddingTop();
    int paddingBottom = getPaddingBottom();
    int radius = Math.min(width - paddingLeft - paddingRight, height - paddingTop - paddingBottom) / 2;

    canvas.drawCircle(paddingLeft - paddingRight, paddingTop - paddingBottom, radius / 2, defaultPaint);
}

再次运行程序后效果如下图所示：

支持padding

至此，布局中的wrap_content和padding都生效了。为了让View更容易使用，我们还需要为它提供自定义属性，方便用户快速地定义View的基本样式，接下来以修改实心圆的颜色属性为例介绍View的自定义属性。

第一步：在values目录下创建attrs.xml文件，声明自定义View的自定义属性名称，具体内容如下：

我们定义了一个填充颜色属性，名称是solidColor，格式是color，自定义属性还有许多其他的格式，例如reference是指资源id、dimension是指尺寸、还有一些基本数据类型格式。

第二步：在View的构造方法中解析自定义属性，并根据属性值做出相应处理，代码调整部分如下：

自定义View

……
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
    solidColor = typedArray.getColor(R.styleable.CircleView_solidColor, Color.RED);
    typedArray.recycle();
    initDefaultPaint();
}

private void initDefaultPaint() {
    defaultPaint = new Paint();
    defaultPaint.setStyle(Paint.Style.FILL);
    defaultPaint.setColor(solidColor);
}

第三步：在布局文件中使用自定义属性：

运行后效果如下所示：

自定义颜色属性

很显然CircleView的自定义属性app:solidColor已经生效了，现在CircleView已经是一个比较规范的自定义View了。下面贴出CircleView的完整代码：

public class CircleView extends View {

    //圆填充颜色
    private int solidColor;

    private int height;
    private int width;

    private Paint defaultPaint;
    private int defaultWidth = 500;
    private int defaultHeight = 500;

    public CircleView(Context context) {
        this(context, null);
    }

    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 typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
        solidColor = typedArray.getColor(R.styleable.CircleView_solidColor, Color.RED);
        typedArray.recycle();
        initDefaultPaint();
    }

    private void initDefaultPaint() {
        defaultPaint = new Paint();
        defaultPaint.setStyle(Paint.Style.FILL);
        defaultPaint.setColor(solidColor);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        height = h;
        width = w;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //支持wrap_content
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(defaultWidth, defaultHeight);
        } else if (widthMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(defaultWidth, heightSize);
        } else if (heightMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(widthSize, defaultHeight);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //转换坐标系,把坐标原点移到屏幕中间位置
        canvas.translate(width / 2, height / 2);
        //支持padding
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int radius = Math.min(width - paddingLeft - paddingRight, height - paddingTop - paddingBottom) / 2;

        canvas.drawCircle(paddingLeft - paddingRight, paddingTop - paddingBottom, radius / 2, defaultPaint);

    }
}

---

参考

《Android开发艺术探索》