专治花里胡哨（一）征服自定义View，写个最简单的自定义 View

好记性不如烂博客，古人诚不欺我。

作为 花里胡哨系列的第一篇，聊点五毛钱的，之所以写这个自定义系列文章，主要还是希望大家，也包括自己，以后能在面对产品脑洞和炫酷的设计时，能说一句不要问我能不能实现，就问你想不想要。同时也想把自己在这方面所知道的，走过的路以及踩过的坑和大家分享一下。

我们先来写一个最简单的自定义 View，我觉得只要接触过 Android 开发，哪怕就一个月，也知道要写一个类继承 View，对吧，我们来看看：

public class CircleView extends View {  
}

这个时候 AS 会报错，傻子也知道根据提示，快捷键然后那么一回车，就变成了这样：

public class CircleView extends View {

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

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

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

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

我最开始接触的时候，当时心想，什么嘛，什么都没做，就要添加 4 个构造方法，最后一个构造方法名还是灰色的，好吧，不知道问度娘，它来帮你搞定，一番左查右查，就有了下面的解释：

public class CircleView extends View {

    //如果此自定义View是在Java代码里面new的，则调用第一构造函数
    public CircleView(Context context) {
        super(context);
    }

    //如果View是在.xml里声明的，则调用第二个构造函数，自定义属性是从AttributeSet参数传进来的
    public CircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    //不会自动调用，一般是在第二个构造函数里主动调用，如View有style属性时
    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //API21之后才使用，不会自动调用，一般是在第二个构造函数里主动调用，如View有style属性时
    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
}

看过了解释后，可能有的人就疑问了，我的项目里不是这样写的呀，好像是这样的：

public class CircleView extends View {

    //如果此自定义View是在Java代码里面new的，则调用第一构造函数
    public CircleView(Context context) {
        this(context, null);
    }

    //如果View是在.xml里声明的，则调用第二个构造函数，自定义属性是从AttributeSet参数传进来的
    public CircleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    //不会自动调用，一般是在第二个构造函数里主动调用，如View有style属性时
    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

这边来说明一下，4 个参数的构造函数就不考虑了，别问，问就是不考虑，原因上面也解释了。现在看一下 3 个参数的构造函数。

在 3 个参构造函数中，第 3 个参数是默认的 Style，，这里的默认的 Style 是指它在当前 Application 或 Activity 所用的 Theme 中的默认 Style，且只有在明确调用的时候才会生效。有一点需要注意的，即使你在 View 中使用了 Style 这个属性也不会调用 3 个参数的构造函数，所调用的依旧是 2 个参数的构造函数。

由于 3 个参数的构造函数第 3 个参数一般不用，所以暂不考虑。那么我们需要关注的就是前两个构造函数了。

• 1 参的构造函数：你在类中 new 这个自定义 View 的时候调用。
• 2 参构造函数：你在 xml 文件中声明后，使用时会调用。

前面罗里吧嗦的说了一堆有的没的，不如直接来写一个最简单的自定义 View 来感受一下，代码很简单，创建 Paint 对象并初始化，同时在 onDraw() 方法中绘制你想要的自定义 View：

public class CircleView extends View {

    private Paint mPaint;
    
    //如果此自定义View是在Java代码里面new的，则调用第一构造函数
    public CircleView(Context context) {
        this(context, null, 0);
    }

    //如果View是在.xml里声明的，则调用第二个构造函数，自定义属性是从AttributeSet参数传进来的
    public CircleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    //不会自动调用，一般是在第二个构造函数里主动调用，如View有style属性时
    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制一个圆
        canvas.drawCircle(300,300,200,mPaint);
    }
}

同时，我们在 xml 中 声明该自定义 View：

<com.kww.bells_and_whistles.view.CircleView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toTopOf="parent" />

现在我们运行后看一下效果：

可以看到我们画了一个黑色的圆，还不错。如果我这个时候和你说，朋友，你已经会了自定义 View，可以尽情的玩耍了，你肯定会给我一个白眼。

哈哈，确实，这是一个最简单的自定义 View，但是，这其中有一些概念，是我们不知道的，比如说 Paint 是什么，然后 onDraw() 方法又是什么，drawCircle() 方法里面的参数都是什么含义，这些东西，如果我们是刚接触的话，肯定一无所知。

既然是第一篇，说到这就可以了，我认为，不能一上来就下猛药对吧，还是要讲究循序渐进的，让你对自定义 View 有个印象就行了，看完之后，有种 “哦，这就是自定义View”的感觉就行了。

最后

在接下来的文章中，我会继续以简单通俗的方式给你带来自定义 View 的方方面面，毕竟，我们的目的是在产品和设计面前，腰杆子挺直，面对花里胡哨的效果，有种云淡风轻（zhuang bi）的状态。

本人水平有限，如有错误，请在下方评论中指出。

请帮顶 / 评论点赞！因为你们的赞同/鼓励是我写作的最大动力！