Android 自定义View 画圆（奥运五环）

效果图

前言

你会画画吗？你会写代码吗？你会用代码画画吗？

正文

自定义View，实际开发过程中，因为涉及用户体验的时候，UI通常会弄一些骚操作出来，这个时候就有两个选择，你是用GIF呢?还是自己自定义一个呢？用GIF当然会增加你的APP的体积，而自定义View难度也不小，于是很多人都会选择用GIF先解决这个问题，后面再去自己自定义，然后就没有然后了（PS：曾经我也是这样的一个人，但是，人是会变的，小老弟），好了，说了一些废话，下面进入主题，开始画画。

首先思考一个问题，用什么来画？废话，当然是纸和笔啊！那程序里面怎么画画呢？怎么把画出来的图形显示在页面上呢？你会不会思考这些呢？下面一一揭晓，Android中通过 Paint 和 Canvas 来画画，啥玩意儿？我怎么都没有听说过呢？触及到我的知识盲区！开始怀疑人生，我是谁？我在哪？中午吃什么？

Paint

这个就是笔，在Android中也叫画笔，你可以设置画笔的颜色，下面通过表格来看看这个画笔有哪些属性

属性	说明
setAntiAlias	设置画笔的锯齿效果， true是去除，false是不去除，默认是有锯齿的，因为绘画效率会高一些
setColor	设置画笔颜色
setARGB	设置画笔的a,r,g,p值，设置Paint对象颜色，参数一为alpha透明通道
setAlpha	设置alpha不透明度，范围为0~255
setFakeBoldText	设置为粗体文本
setLinearText	设置为线性文本
setTextAlign	设置文本对齐方式
setTextSize	设置字体尺寸
setTextScaleX	设置文本缩放倍数，1.0f为原始
setTypeface	设置字体，Typeface包含了字体的类型，粗细，还有倾斜、颜色等
setUnderlineText	设置下划线
setStyle	设置画笔样式，常用的有Paint.Style.FILL（实心）、Paint.Style.STROKE（空心）、Paint.Style.FILL_AND_STROKE（填充再描边）
setStrokeWidth	在画笔的样式为STROKE的时候，图形的轮廓宽度

上面也是一部分属性，我怕你没有耐心看完，所以就不写更多了，上面说完了笔，下面该说纸了

Canvas

这个你自己可以理解为纸，在Android中这个叫画布，它又有哪些属性呢？也通过一个表格来说明一下

属性	说明
drawARGB	画布颜色，第一个是透明度，后面是常规的RGB色值
drawColor	画布颜色，可以用Android自带的，也可以自定义
drawRGB	画布颜色，相比drawARGB少了一个透明度而已
drawArc	扇形
drawCircle	圆形
drawOval	椭圆形
drawLine	线
drawPoint	点
drawRect	矩形
drawRoundRect	圆角矩形
drawVertices	顶点
drawPath	路径
drawBitmap	位图
drawPicture	图片

OK，相信你看这个表已经看得不耐烦，（PS：其实我写的也烦了，悄悄地说）迫不及待的想要实践了，下面来实践一下首先创建一个项目，我取名为PaintDemo,创建好之后，新建一个CustomView.java的文件，然后继承View,实现两个构造方法。如下所示

然后我们在activity_main.xml使用这个Custom，自定义View使用时需要完整的包名路径，如下所示

现在你运行可以运行一下，不管是真机还是模拟器都可以，先确保你的项目没有问题，这样出现问题的时候可以少排查一个因素，这是实际开发总结出来的。不过你运行之后会是一片空白，因为什么都没有。下面在CustomView写下如下代码

	/**
     * 在纸上画画 (通俗理解)
     * @param canvas  纸
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();//创建画笔对象  笔
        paint.setColor(Color.BLACK);//设置颜色
        paint.setStyle(Paint.Style.STROKE);//画笔样式为空心，也可以理解为描边
        paint.setStrokeWidth(4);//描边的宽度
        paint.setAntiAlias(true);//抗锯齿(去掉锯齿)

        /**
         * 画圆
         * 参数一：圆心的X轴坐标
         * 参数二：圆心的Y轴坐标
         * 参数三：圆的半径
         * 参数四：画笔对象
         */
        canvas.drawCircle(150,150,100,paint);//完成

    }

我相信注释得已经很清楚了，这个时候你运行一下，就会看到一个黑色的空心圆

然后再修改一下代码，画一个实心圆

再运行一下

**canvas.drawCircle(150,150,100,paint);**表示圆心在横坐标和纵坐标都为150的位置，以半径为100画一个圆，可以把这一行代码复制四次，然后改变半径的大小，为了看到效果，还是画空心圆

然后运行一下，就可以看到

是不是觉得有点意思了。平时像这种图案你会自己去画吗？还是找UI切图呢？刚才我们只是改变了半径而已，下面试着改变横坐标和纵坐标。我们试着画两个圆挨着，如果是横向挨着就要使一个圆的圆心横坐标位置等于另一个圆的圆心横坐标加上直径的和，刚才我们看到一个横坐标是150，半径是100，那么结果很明显第二个圆的圆心的位置就是350，这次我们不改变半径大小，只改变横坐标试一下

运行结果如下图

接下来运用这个思路来画一个奥运五环吧

运行效果如下图所示

除了没有颜色还是比较像的。你想要改颜色就可以自由改变setColor就可以了。下面改动一下代码

	/**
     * 根据传入的颜色配置不同的画笔
     * @param color 颜色
     * @return
     */
    private Paint customPaint(int color){
        Paint paint = new Paint();//创建画笔对象  笔
        paint.setColor(color);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(8);
        paint.setAntiAlias(true);
        return paint;
    }

然后我们在onDraw中调用

 	/**
     * 在纸上画画 (通俗理解)
     * @param canvas  纸
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        /**
         * 画圆
         * 参数一：圆心的X轴坐标
         * 参数二：圆心的Y轴坐标
         * 参数三：圆的半径
         * 参数四：画笔对象
         */
        canvas.drawCircle(150,150,100,customPaint(Color.BLUE));//完成
        canvas.drawCircle(370,150,100,customPaint(Color.BLACK));
        canvas.drawCircle(590,150,100,customPaint(Color.RED));
        canvas.drawCircle(260,250,100,customPaint(Color.YELLOW));
        canvas.drawCircle(480,250,100,customPaint(Color.GREEN));

    }

运行效果如下：