自定义View实现模拟钟表

最新推荐文章于 2025-07-08 11:10:00 发布

原创最新推荐文章于 2025-07-08 11:10:00 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#自定义View

本文介绍如何使用自绘控件实现一个简单的模拟钟表。通过绘制圆形并添加数字来形成钟面，并利用旋转画布的方法制作时针。通过在子线程中更新界面，实现了钟表指针的动态显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用自绘控件实现模拟钟表其实很简单，分几步实现就可以了

1.如何绘制钟表的数字

这个首先我们需要先画一个圆，之后让圆自己转动没转动一次我们就添加一个数字。然后保存画布，重置之后继续旋转就可以了。
代码如下。

 for (int i = 1; i <= 12; i++) {
            canvas.save();
            canvas.rotate(30 * i, getWidth() / 2, getHeight() / 2);
            //（旋转的角度，旋转围绕点的X轴坐标，Y轴坐标）
            myPaint.setColor(Color.RED);
            myPaint.setTextSize(20);
            canvas.drawText(i + "", getWidth() / 2 - 10, getHeight() / 2 - getWidth() / 3 + 30, myPaint);
            canvas.drawLine(getWidth() / 2, getHeight() / 2 - getWidth() / 3, getWidth() / 2, getHeight() / 2 - getWidth() / 3 + 10, myPaint);
            canvas.restore();

        }

2.如何让指针进行转动

首先我们需要先把指针画出来

  //保存画布
        canvas.save();
        //旋转角度，旋转中心的设置
        canvas.rotate(30 * j, getWidth() / 2, getHeight() / 2);
        //刻度表（横线）的描写。参数意思：开始的X坐标，结束的X坐标，开始的Y坐标，结束的Y坐标，画笔（paint）
        canvas.drawLine(getWidth() / 2, getHeight() / 2 + 20, getWidth() / 2, getHeight() / 2 - getWidth() / 3 + 50, myPaint);
        //恢复原样
        canvas.restore();

之后我们就需要在子线程中，让他转动起来就可以了
首先创建Handler

 private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            invalidate();
        }
    };

之后在子线程中写出进行耗时操作

 public boolean onTouchEvent(MotionEvent event) {

        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true){

                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    j++;
                    handler.sendEmptyMessage(j);
                }

            }
        }).start();
        return super.onTouchEvent(event);
    }

这样模拟的钟表就做好了

3.完整代码如下

public class ClockView extends View {

    private Paint myPaint = new Paint();
    private int j = 0;

    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            invalidate();
        }
    };


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


    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        myPaint.setColor(Color.BLUE);
        myPaint.setStyle(Paint.Style.STROKE);//设置圆是否为空心
        myPaint.setAntiAlias(true);//设置锯齿
        myPaint.setStrokeWidth(2);//设置线条的宽度
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 3, myPaint);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 10, myPaint);

        //里面的属性为（起始点X位置，起始点Y位置，终点x位置，终点Y位置，画笔）
        for (int i = 1; i <= 12; i++) {
            canvas.save();
            canvas.rotate(30 * i, getWidth() / 2, getHeight() / 2);
            //（旋转的角度，旋转围绕点的X轴坐标，Y轴坐标）
            myPaint.setColor(Color.RED);
            myPaint.setTextSize(20);
            canvas.drawText(i + "", getWidth() / 2 - 10, getHeight() / 2 - getWidth() / 3 + 30, myPaint);
            canvas.drawLine(getWidth() / 2, getHeight() / 2 - getWidth() / 3, getWidth() / 2, getHeight() / 2 - getWidth() / 3 + 10, myPaint);
            canvas.restore();

        }
        //保存画布
        canvas.save();
        //旋转角度，旋转中心的设置
        canvas.rotate(30 * j, getWidth() / 2, getHeight() / 2);
        //刻度表（横线）的描写。参数意思：开始的X坐标，结束的X坐标，开始的Y坐标，结束的Y坐标，画笔（paint）
        canvas.drawLine(getWidth() / 2, getHeight() / 2 + 20, getWidth() / 2, getHeight() / 2 - getWidth() / 3 + 50, myPaint);
        //恢复原样
        canvas.restore();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true){

                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    j++;
                    handler.sendEmptyMessage(j);
                }

            }
        }).start();
        return super.onTouchEvent(event);
    }
}