Android 自定义钟表

最新推荐文章于 2023-07-07 22:57:13 发布
最新推荐文章于 2023-07-07 22:57:13 发布
阅读量527 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Te_small/article/details/80365869
版权

最近该忙的都忙完了，自己自定义一直是个弱项，也一直想整个钟表玩玩，网上看了一圈，学习了不少，下面自己做做自定义

效果图

首先，制作钟表第一步，肯定是画个圆吧，这是最直接的思维了！

先创建自己的自定义类，继承View ，重写构造方法，在第一个和第二个构造中初始化画笔，设置颜色等
第一个构造器类似于咱们直接New对象，第二个就是在xml文件引用时用到的

public class Watch extends View {
    private Paint mPaint;
    private Context context;

    public Watch(Context context) {
        super(context);
        this.context = context;
        init();
    }

    public Watch(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }


    public Watch(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        mPaint = new Paint();
        //抗锯齿
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        //分三种，STROKE之绘制轮廓，不绘制内容；FILL，只绘制内容；FILL_AND_STROKE，内容和轮廓都绘制
        mPaint.setStyle(Paint.Style.STROKE);
    }

开始画圆

         //设置线宽，线宽默认是1 
        mPaint.setStrokeWidth(2);
         //在屏幕中心画圆，半径为屏幕的1/3
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 3, mPaint);

画圆心

        //整个屏幕中心为圆心点
        mPaint.setStrokeWidth(5);
        canvas.drawPoint(getWidth() / 2, getHeight() / 2, mPaint);

接下来开始画表里面的竖线

        //安卓坐标系默认实在左上角的，现在我们需要将坐标轴移动到圆心位置，这样利于我们绘制线
        mPaint.setStrokeWidth(1);
        //坐标原点平移到圆心的位置
        canvas.translate(getWidth() / 2, getHeight() / 2);
        for (int i = 0; i < 360; i++) {
            //刻度线长度为20，一圈是360度，并且秒针转一圈为60秒，所以一秒就对应360度/60秒=6度，那么五秒也就是5*6 = 30度
            if (i % 30 == 0) { //长的
                canvas.drawLine(getWidth() / 3 - 25, 0, getWidth() / 3, 0, mPaint);
            } else if (i % 6 == 0) { //中的
                canvas.drawLine(getWidth() / 3 - 14, 0, getWidth() / 3, 0, mPaint);
            }
            //每绘制一次就旋转1度，总共绘制了360条线
            canvas.rotate(1);
        }

效果
此时的效果

接着再绘制数字 save和restore是成对出现的，为了这一块操作不影响下面的元素，一个保存，一个取出的意思

    canvas.save();
        for (int i = 0; i < 12; i++) {
            if (i == 0) {
                trans(canvas, 12 + "", i * 30, mPaint);
            } else {
                trans(canvas, i + "", i * 30, mPaint);
            }
        }
        canvas.restore();

//如果直接绘制数字的画，文字也跟着旋转了，数字有的就会倒着，所以执行下面这一系列操作，再去绘制数字就正常了
 public void trans(Canvas canvas, String text, int degree, Paint paint) {
        Rect rect = new Rect();
        paint.getTextBounds(text, 0, text.length(), rect);
        //先将原来的坐标轴旋转30度
        canvas.rotate(degree);
        //将旋转完成的坐标轴平移到上方   它只是在y轴进行的平移，所以x轴为0，y轴也就是圆心的位置减去35，35是自己固定的位置，可适当自己修改；但是为负值，因为在y轴的上方，Android坐标系往下为正数
        canvas.translate(0, -(getWidth() / 3 - 35));
        //这时在将原来旋转的30都转回去，此时的坐标轴与开始的坐标轴都是直立的，只不过现在的位置处于原来坐标轴的    右上方
        canvas.rotate(-degree);
        //开始写文字  1，2，3，。。。。。12   因为文字写
        canvas.drawText(text, -rect.width() / 2, rect.height() / 2, paint);
        //写完文字后开始将坐标轴复原   先是顺时针旋转30都，
        canvas.rotate(degree);
        //再平移到圆心的位置
        canvas.translate(0, getWidth() / 3 - 35);
        //在逆时针平移30都
        canvas.rotate(-degree);
    }

最后绘制分针、秒针、时针

 //秒针
        canvas.save();  //save方法作用是将画布先保存下来，为了不影响其他的元素，例如绘制两张图片，绘制完第一张接着绘制第二张，第二张可能就会受到第一张的影响，变形啊或者压缩了
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);//绘制边框
        mPaint.setStrokeWidth(2);//边框宽度
        canvas.rotate(secondDegree);//这三个变量在下面代码中
        canvas.drawLine(0, 0, 0, -100, mPaint);//竖直的，只在Y轴上，所以X轴都为0，100其实是指针的长度，因为在上方，所以为负数
        canvas.restore();

        //分针
        canvas.save();
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);//绘制边框
        mPaint.setStrokeWidth(4);//边框宽度  比指针粗点
        canvas.rotate(minuteDegree);
        canvas.drawLine(0, 0, 0, -80, mPaint);
        canvas.restore();

        //时针
        canvas.save();
        //mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);//绘制边框
        mPaint.setStrokeWidth(6);//边框宽度  比指分针粗点
        canvas.rotate(hourDegree);
        canvas.drawLine(0, 0, 0, -60, mPaint);
        canvas.restore();

效果
效果

最后让三个针跑起来

    private float secondDegree;
    private float minuteDegree;
    private float hourDegree;
    private Timer timer = new Timer();
    private TimerTask timerTask = new TimerTask() {
        @Override
        public void run() {
            if (secondDegree == 360) {
                secondDegree = 0;
            }
            if (minuteDegree == 360) {
                minuteDegree = 0;
            }
            if (hourDegree == 360) {
                hourDegree = 0;
            }

           //这三个变量的换算方式，变量名起分针和秒针起反了，也无所谓了
           //第一个360/60=6，也就是一秒钟走六度
           //第二个6/60 分针一秒针走0.1度
           //时针，一秒钟走1/120度
            secondDegree = secondDegree + 6;
            minuteDegree = minuteDegree + 0.1f;
            hourDegree = hourDegree + 1 / 120f;
            /**
             * 自定义View 刷新界面有三种
             * 1：Invalidate() 如果只是内容变动，可使用此方法
             * 2：postInvalidate() 涉及到线程切换的
             * 3：requestLayout() view位置变动，需要调用此方法 涉及到RadioGroup
             */
            postInvalidate();//涉及到线程，界面刷新需要使用此方法
        }
    };

    public void start() {
        timer.schedule(timerTask, 0, 1000);
    }

在下面的旋转角度里调用三个变量，重复的上面的代码 星星部分

 //秒针
        canvas.save();  
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(2);
        **canvas.rotate(secondDegree);**
        canvas.drawLine(0, 0, 0, -100, mPaint);
        canvas.restore();

        //分针
        canvas.save();
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4);
        **canvas.rotate(minuteDegree);**
        canvas.drawLine(0, 0, 0, -80, mPaint);
        canvas.restore();

        //时针
        canvas.save();
        //mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);
        **canvas.rotate(hourDegree);**
        canvas.drawLine(0, 0, 0, -60, mPaint);
        canvas.restore();

最后在activity界面调用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.liuguijie.customwatch.MainActivity">
    <com.liuguijie.customwatch.Watch
        android:id="@+id/watch"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp" />
</RelativeLayout>

   //调用start方法
   Watch watchView = findViewById(R.id.watch);
   watchView.start();

基本就是这么多，跑起来就可以了！

Te_small
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Android自定义钟表特效
08-25
主要为大家详细介绍了Android自定义钟表特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android Studio实现简单的自定义钟表
最新发布
04-30
在安卓开发中，当系统自带的View已经无法满足项目需求时，就要自定义View。在Android中是没有与钟表有关的View，因此我们制作一个简单的钟表View，这样就可以在其他项目中进行使用。 自定义钟表具有表盘，表盘上有12个刻度，有时针、分针、秒针，和家里面的石英表样式相同，用于显示时间会比数码表更加有内涵。 总的来说，本次自定义钟表项目可以学习到编程技巧，并且加深对Canvas API的理解。大家可以考虑添加一些定制选项，如不同的表盘样式、颜色或字体，以便用户可以根据自己的喜好来个性化他们的时钟；也可以考虑添加一些高级功能，如秒表、闹钟或世界时钟，以扩展应用程序的实用性。简单的项目掌握透了就不简单，期待大家在此基础上制作更多的创新钟表！
基于android的自定义时钟
03-19
本文讲解的是在android开发中使用时钟的自定义，通过了解代码使在android开发中定义时钟更加的灵活！
Android自定义View之钟表绘制
论一个程序员的自我修养
07-13 5414
Android自定义View之钟表绘制 自定义view一直是Android进阶路上的一块石头，跨过去就是垫脚石，跨不过去就是绊脚石。作为一个攻城狮，怎么能被他绊倒，一定要跟它死磕到底，这段时间看到自定义View新手实战-一步步实现精美的钟表界面特别漂亮，咱们也来手撸一个。 先看下效果图 咱们先写一个类WatchBoard继承View,并重写他的构造方法 public class...
【Android 自定义 View】--＞ 绘制时钟（表）效果
Kevin Learn Android
01-07 957
本篇文章主要介绍使用自定义 View 来实现时钟效果，灵活地使用 Android 的 Canvas，Paint, Path 的 API 以及理清 Canvas 的 save 和 restore 的意义。
Android 自定义钟表
weixin_46367639的博客
04-02 225
public class ClockView extends View { private Paint paint; private int clockColor; private void init() { paint = new Paint(); this.setLayerType(View.LAYER_TYPE_SOFTWARE,paint); //设置抗锯齿 paint.setAntiAlias(true); } @Override protected void
Android 自定义View入门学习（一）：自定义一个简单的时钟
liufulin520328的博客
08-22 310
今天我们来一起学习一下怎么通过自定义view画一个时钟出来。 自定义view是一个比较有意思，同时难度也是很高的工作。现在市面上有很多动画效果很棒的页面，无非都是一步一步从最基础的学起的，正所谓万丈高楼平地起。所以，这篇文章很适合新手入门练习哦。 首先先贴上最终的效果图吧，这样到时看代码不会特别抽象。 下面我说一下，实现的步骤是什么吧。 画一个外圆（确定圆心位置，然后给一个...
android icon 时钟,自定义View--绘制钟表
weixin_33526828的博客
05-27 236
Android中为我们提供了很多的功能强大的视图控件，但是有些时候我们需要特定效果的控件。这时我们就需要自定义View来实现需要的效果。关于自定义视图的内容很多，我也在慢慢研究，这里绘制了一个简单的钟表视图和大家一起分享学习。##关于自定义视图一般来说自定义视图的方法主要有三种。每种方法都有他们特定的用处，自定义视图时我们需要根据视图的功能来考虑选择那种方法。关于自定义视图一般来说自定义视图的方法...
Android自定义时钟View
SkylarLiuu的博客
04-27 1809
最近在练习自定义view, 想起之前面试的时候笔试有道题是写出自定义一个时钟的关键代码. 今天就来实现一下. 步骤依然是先分析, 再上代码. 实现效果 View分析 时钟主要分为五个部分: 中心点: 圆心位置 圆盘: 以中心点为圆心,drawCircle画个圆 刻度: paint有个aip, setPathEffect可以根据path画特效, 那么刻度就可以根据圆的path画一个矩形path的特效, 并且这个api只会画特效, 不会画出圆. /** * shape: 特效的path, 这里传一
Android自定义一个属于自己的时间钟表
12-12
学习android当中自定义view的一些常用绘图技巧，优化android绘图操作
Android自定义时钟
02-28
Android自定义时钟，这是别人的开源项目，写的很不错，更多请看我的博客：http://blog.csdn.net/xiayiye5/
模仿Android实现自定义钟表界面
11-07
模仿Android实现自定义钟表界面
android自定义view实现钟表效果
01-04
本文实例为大家分享了android view实现钟表的具体代码，供大家参考，具体内容如下 先看效果图： 自定义view大家肯定已经不陌生了，所以直接今天直接步入正题：如何利用canvas去绘制出一个钟表 当然绘制之前我们必须进行测量（重写onMeasure），根据自己的规则去测量，这暂时是将控件限制为一个正方形。 首先我们先把钟表分解，看它由哪几部分组成。如上图：钟表包括表盘（刻度）和表针还有文字构成。 分清结构之后我们再明确canvas需要画什么，表盘的构成其实就是外层一个圆，然后上面是有规律的线段，表针就是三个长短不一的线段，再加上12个钟点文字。这样一分析是不是发现调用canvas的d
安卓自定义View实现钟表
05-06
安卓自定义View实现钟表.
Android自定义View--时钟效果
吴唐人的博客
12-14 1515
初衷 工作四年了，能力水平并没有跟工作年限挂上钩，至今依旧是一个搞开发的小僧。由于公司是做物联网（车载、POS）的，项目UI并不像互联网公司那样花里胡哨的,所以自定义View一直在项目中体现的并不是很多,但是自定义View是一个Android工程师必备的一项基础技能，所以平常也会自己进行一些简单的练习。突发奇想做了一个时钟，感觉挺好玩的，网上也有很多这样的博客，这里也只是做一个小小的分享，能力不足...
Android: 时钟 TextClock、DigitalClock、AnalogClock
javaGHui的博客
07-07 532
Android: 时钟 TextClock、DigitalClock、AnalogClock
【Android】开发一个简单时钟应用每天看时间起床
TA远方
01-25 3433
有没有想过，家里闲置不用的旧手机可以当时钟闹钟来用，觉得这个想法可以吧，把闲置手机充分利用起来了呢，接下来给大家讲一下如何实现，功能简单，可以当作编程入门课。
安卓自定义钟表中简述UI组件及各组件的布局
06-10
安卓自定义钟表涉及到的 UI 组件包括：View、ImageView、TextView、FrameLayout、RelativeLayout、LinearLayout、SurfaceView 等。 其中，View 是所有 UI 组件的基类，ImageView 用于显示图片，TextView 用于显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值