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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值