一起Talk Android吧（第四百六十九回：实现自定义View中的绘制功能)

Posted 2023-01-16 talk_8

文章目录

• 功能介绍
• 重写方法
• 示例代码

各位看官们大家好，上一回中咱们说的例子是"实现自定义View中的布局功能",这一回中咱们说的例子是"实现自定义View中的绘制功能"。闲话休提，言归正转，让我们一起Talk android吧！

功能介绍

绘制功能主要是绘制View显示的内容，比如我们平常看到的颜色，文字图形等。绘制的内容主要通过画布和画笔来完成。我们在前面章回中介绍过这部分知识，因此这里就不详细介绍了。

实现绘制功能只需要重写View类的onDraw()方法就可以。如果我们自定义的View继承于View类，那么必须重写此方法；如果自定义的类继承于
ViewGroup类，那么不需要重写此方法，因为ViewGroup把绘制功能交给了它的子View。

重写方法

重写onDraw()方法与重写onMeasure()和OnLayout()方法完成不同，它没有固定的思路和步骤，只能依据View显示的内容来绘制。

绘制时使用的是画布和画笔。画布(Canvas)提供了各种画图的方法，比如画点，画线，画几何图形，画Bitmap,画文字等。我们只需要依据项目的需要选择相应的画图方法就可以。此外，如果View比较复杂时，可能会综合使用多种画图方法，而且会涉及一些算法。比如，我们在前面绘制时钟的时候就使用了多种画图方法，而且在绘制画时钟上的数字时使用了简单的算法。

示例代码

下面是绘制时钟的部分代码，完成的代码和介绍可以点击这里查看。

    private void drawClockView(Canvas canvas) 
        //中心坐标，以View中心为表盘中心
        float oX = getWidth()/2;
        float oY = getHeight()/2;
        //刻度盘半径
        float r = 260;
        //刻度线的长度
        float scaleLen = 30;
        //刻度线之间的角度，一共60个刻度线，铺满一周为360度
        int angle = 360/60;

        //1.画表盘
        canvas.drawCircle(oX,oY,r,mArcPaint);

        canvas.save();
        //2.画刻度线
        //一共12个小时，每小时之间有5个空格，一共12*5个刻度线
        //从12点钟方向开始画刻度线，然后旋转画布，重复此过程直到最后一个刻度线
        //对于整点的刻度线加粗并且加长显示,或者显示为具体的数字，代码中用j表示
        for(int i=0,j=0; i<60; i++) 
            canvas.rotate(angle,oX,oY);
            if(i%5 == 0) 
                //从12点钟方向开始画，因此起点为(oX,oY-r+2)+2是圆的宽度，这样画出的刻度在圆内
//                canvas.drawLine(oX, oY - r+2, oX, oY - r + scaleLen+16, mTextBPaint);
                if( 0 == j)
                    //从12点钟方向开始画，因此起点为(oX,oY-r),-8和+24是数字的长宽，这样画出的刻度在圆内，可以自动计算数字的长宽
                    canvas.drawText(String.valueOf(12+j++), oX-8, oY - r + 24, mTextBPaint);
                else 
                    canvas.drawText(String.valueOf(j++), oX-8, oY - r + 24, mTextBPaint);
                
            else 
                canvas.drawLine(oX,oY-r+2,oX,oY-r+scaleLen,mTextPaint);
            
        
        canvas.restore();

        //3.画小时、分钟、秒三个指针
        //获取当前的时间：小时、分钟、秒
        LocalDateTime nowTime = LocalDateTime.now();
        int hour = nowTime.getHour();
        int minute = nowTime.getMinute();
        int second = nowTime.getSecond();

        //画小时指针,每小时包含5个刻度，所以*5
        canvas.save();
        canvas.rotate(5*angle*(hour%12),oX,oY);
        canvas.drawLine(oX,oY,oX,oY-r/3,mHourPaint);
        canvas.restore();

        //画分钟指针
        canvas.save();
        canvas.rotate(angle*minute,oX,oY);
        canvas.drawLine(oX,oY,oX,oY-r*2/3,mMinutePaint);
        canvas.restore();

        //画秒指针
        canvas.save();
        canvas.rotate(angle*second,oX,oY);
        canvas.drawLine(oX,oY,oX,oY-r*5/6,mSecondPaint);
        canvas.restore();
    

看官们，关于"实现自定义View中的绘制功能"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！