各位看官们大家好上一回中咱们说的例子是"实现自定义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中的绘制功能"的例子咱们就介绍到这里欲知后面还有什么例子且听下回分解