Android自定义View画钟表

Android 自定义View(一)实现时钟表盘效果 一、前言 Android 自定义View是高级进阶不可或缺的内容,日常工作中,经常会遇到产品、UI设计出花里胡哨的界面。当系统自带的控件不能满足开发需求时,就只能自己动手撸一个效果。 本文就带自定义View初学者手动撸一个效果,通过自定义View实现钟表功能,每行代码都有注释,保证易懂,看不懂你留言打我!!! 二、实现效果 先看效果图 步骤分析 实现以上效果,主要分为四个步骤: 绘制外层表盘 绘制刻度线 绘制刻度数字 绘制指针 三、代码实现 1、绘制外层表盘 外层表盘就是一个空心圆,只要获取圆的x、y 阅读详情

第一种使用背景表盘

主要代码:

package com.zjs.zidingyiview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;

public class MyClock extends View {
    private Paint mPaint;
    private Calendar mCalendar;
    private int DEFAULT = 400;
    private int mSecond;
    private int mMinute;
    private int mHour;
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mCalendar = Calendar.getInstance();
            mHour = mCalendar.get(Calendar.HOUR);
            mMinute = mCalendar.get(Calendar.MINUTE);
            mSecond = mCalendar.get(Calendar.SECOND);
//            获取时间后,重新绘制
            invalidate();
            mHandler.sendEmptyMessageDelayed(1234, 1000);

        }
    };

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mHandler.sendEmptyMessageDelayed(123, 1000);
    }

    public MyClock(Context context) {
        super(context);
        init();
    }

    public MyClock(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        switch (widthMode) {
            case MeasureSpec.AT_MOST:
                widthSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        switch (heightMode) {
            case MeasureSpec.AT_MOST:
                heightSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        圆心
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, 8, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
//        绘制时针
        mPaint.setStrokeWidth(10);
        canvas.save();
        canvas.rotate((float) (360 / 12 * mHour + (mMinute * 0.5)), getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 5, mPaint);
        canvas.restore();
//         绘制分针
        mPaint.setStrokeWidth(8);
        canvas.save();
        canvas.rotate(360 / 60 * mMinute, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 4, mPaint);
        canvas.restore();
//         绘制秒针
        mPaint.setStrokeWidth(6);
        canvas.save();
        canvas.rotate(360 / 60 * mSecond, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 3, mPaint);
        canvas.restore()
    }
}

效果

在这里插入图片描述

自定义画表盘

package com.zjs.zidingyiview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;

public class MyClock extends View {
    private Paint mPaint;
    private Calendar mCalendar;
    private int DEFAULT = 400;
    private int mSecond;
    private int mMinute;
    private int mHour;
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mCalendar = Calendar.getInstance();
            mHour = mCalendar.get(Calendar.HOUR);
            mMinute = mCalendar.get(Calendar.MINUTE);
            mSecond = mCalendar.get(Calendar.SECOND);
//            获取时间后,重新绘制
            invalidate();
            mHandler.sendEmptyMessageDelayed(1234, 1000);

        }
    };

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mHandler.sendEmptyMessageDelayed(123, 1000);
    }

    public MyClock(Context context) {
        super(context);
        init();
    }

    public MyClock(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        switch (widthMode) {
            case MeasureSpec.AT_MOST:
                widthSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        switch (heightMode) {
            case MeasureSpec.AT_MOST:
                heightSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setStrokeWidth(8);
//        外圆
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2 - 10, mPaint);
        mPaint.setStrokeWidth(8);
//        内圆
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, (getWidth() / 2) - 30, mPaint);
//        圆心
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, 8, mPaint);
//        刻度
//        保留 画布中已经存在的位置信息
        canvas.save();
        for (int i = 0; i < 12; i++) {
            canvas.rotate(360 / 12, getWidth() / 2, getWidth() / 2);
            canvas.drawLine(getWidth() / 2, 20, getWidth() / 2, 40, mPaint);
        }
//        将画布恢复
        canvas.restore();
        mPaint.setStyle(Paint.Style.STROKE);
//        绘制时针
        mPaint.setStrokeWidth(10);
        canvas.save();
        canvas.rotate((float) (360 / 12 * mHour + (mMinute * 0.5)), getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 5, mPaint);
        canvas.restore();
//         绘制分针
        mPaint.setStrokeWidth(8);
        canvas.save();
        canvas.rotate(360 / 60 * mMinute, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 4, mPaint);
        canvas.restore();
//         绘制秒针
        mPaint.setStrokeWidth(6);
        canvas.save();
        canvas.rotate(360 / 60 * mSecond, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 3, mPaint);
        canvas.restore();

    }
}

效果

在这里插入图片描述

背景表盘图片:
在这里插入图片描述

安卓自定义View实现钟表 安卓自定义View实现钟表. 立即下载

相关推荐

Android 自定义View实现动画时钟

该项目使用AS开发,通过获取当前系统时间,然后通过自定义View加自定义的属性动画ValueAnimator实现了一个带动画效果的时钟,对学习自定义View是一个很好的例子

【Android 自定义 View】--> 绘制时钟(表)效果

本篇文章主要介绍使用自定义 View 来实现时钟效果,灵活地使用 Android 的 Canvas,Paint, Path 的 API 以及理清 Canvas 的 save 和 restore 的意义。

Kevin Learn Android 1209

Android 自定义View实现时钟表盘效果

博文地址:https://blog.youkuaiyun.com/jaynm/article/details/106385195

android使用自定义view制作时钟

android使用自定义view制作时钟。

m0_56923407的博客 407

Android自定义View之会走动的时钟

Android自定义View,自定义一个钟表,而且可以自己走的

android自定义view实现钟表效果

本文实例为大家分享了android view实现钟表的具体代码,供大家参考,具体内容如下 先看效果图: 自定义view大家肯定已经不陌生了,所以直接今天直接步入正题:如何利用canvas去绘制出一个钟表 当然绘制之前我们必须进行测量(重写onMeasure),根据自己的规则去测量,这暂时是将控件限制为一个正方形。 首先我们先把钟表分解,看它由哪几部分组成。如上图:钟表包括表盘(刻度)和表针还有文字构成。 分清结构之后我们再明确canvas需要画什么,表盘的构成其实就是外层一个圆,然后上面是有规律的线段,表针就是三个长短不一的线段,再加上12个钟点文字。这样一分析是不是发现调用canvas的d

Android Studio实现简单的自定义钟表

在安卓开发中,当系统自带的View已经无法满足项目需求时,就要自定义View。在Android中是没有与钟表有关的View,因此我们制作一个简单的钟表View,这样就可以在其他项目中进行使用。自定义钟表具有表盘,表盘上有12个刻度,有时针、分针、秒针,和家里面的石英表样式相同,用于显示时间会比数码表更加有内涵。总的来说,本次自定义钟表项目可以学习到编程技巧,并且加深对Canvas API的理解。大家可以考虑添加一些定制选项,如不同的表盘样式、颜色或字体,以便用户可以根据自己的喜好来个性化他们的时钟;

振华OPPO的博客世界 3379

Cisco Packet Tracer 7.3免登录技巧:3种方法快速跳过注册界面(附详细截图)

本文针对Cisco Packet Tracer 7.3启动时遇到的登录界面问题,提供了三种合法高效的解决方案。详细介绍了如何利用官方访客模式快速启动、注册思科账号实现一劳永逸登录,以及通过调整本地安装配置优化启动流程,帮助网络学习者与备考者绕过繁琐步骤,快速进入实验环境。

weixin_29305337的博客 744

效果炸了··Android自定义View实现一个炫酷的时钟

一、背景 1.1、控件效果 要实现的自定义控件效果大致如下,实现过程中用到了比较多的自定义View的API,觉得比较有代表性,就分享出来也当做学习总结 项目代码已上传github :https://github.com/DaLeiGe/AndroidSamples/tree/master/ProgressView 1.2、从功能上分析一下这个控件,大致有以下特点 随机运动粒子从圆周向圆心运动,并与切线方向有正负30°的角度差,粒子透明度、半径、运动速度随机,运动超过一定距离或者时间消失 背景圆有一个.

Android_XG的博客 1456

PX4 Gazebo仿真进阶:自定义飞机模型和地图的完整指南

本文详细介绍了如何在PX4 Gazebo仿真中自定义飞机模型和地图模型,包括文件架构解析、参数调整指南、地图定制技巧及常见问题解决方案。通过实战步骤和性能优化建议,帮助开发者高效完成复杂场景的飞行控制算法测试。

weixin_29081101的博客 386

Linux之GTK系列教程

00、背上行囊1——程序员学习之道 01、背上行囊2——为什么要学习GTK 02、背上行囊3——GUI概述 03、背上行囊4——GTK简介 04、背上行囊5——GTK环境搭建( Linux ) 05、背上行囊6——GTK环境搭建( windows ) 06、踏上旅途1——一个简单的空白窗口 07、踏上旅途2——控件的添加 08、踏上旅途3——布局容器之水平布局 09、踏上旅途

每天积累一点点 2万+

Android自定义View--时钟效果

初衷 工作四年了,能力水平并没有跟工作年限挂上钩,至今依旧是一个搞开发的小僧。由于公司是做物联网(车载、POS)的,项目UI并不像互联网公司那样花里胡哨的,所以自定义View一直在项目中体现的并不是很多,但是自定义View是一个Android工程师必备的一项基础技能,所以平常也会自己进行一些简单的练习。突发奇想做了一个时钟,感觉挺好玩的,网上也有很多这样的博客,这里也只是做一个小小的分享,能力不足...

吴唐人的博客 1888

目标检测 RT-DETR(2023)详细解读

在使用了这个技巧后,显然训练过程中,类别的标签不再是此前的0和1离散值,而是0~1的连续值。关于 Query Selection(查询向量选择),大家应该并不陌生,这个方法可谓在DETR领域大杀四方,如DAB-DETR对查询向量进行重构理解,将其解释为Anchor,DN-DETR通过查询降噪来应对匈牙利匹配的二义性所导致的训练时间长的问题,DINO提出从Encoder中选择Top-k特征进行学习等一系列方法,这都无疑向我们证明,查询向量很重要,选择好的Query能够让我们事半功倍。在RT-DETR中,

qq_51352130的博客 5872

【Android】自定义View -- 钟表

【问题】【效果图】转存失败重新上传取消转存失败重新上传取消【代码分析】重写 onDraw画外圆 画刻度 画指针 重写 onMesure 用新线程启动钟表

m0_72431373的博客 130

避坑指南:Livox Mid-360双雷达SLAM配置中,那些官方文档没说的细节(IP设置、话题分离与时间同步)

本文详细解析了Livox Mid-360双雷达SLAM配置中的关键优化点,包括IP设置、话题分离与时间同步等官方文档未提及的细节。通过实战案例和代码示例,帮助开发者解决点云错位、IMU数据混乱等问题,提升SLAM系统的稳定性和精度。特别针对网络架构设计、驱动修改和时间同步机制提供了专业指导。

weixin_29745609的博客 426

ESD镜像解密与转换全攻略:从esd-decrypter到WinNTSetup的完整流程

本文详细解析了ESD镜像的加密特性与压缩优势,并提供了从解密到转换的完整实战指南。核心步骤包括使用esd-decrypter工具解密ESD文件为WIM格式,以及如何结合WinNTSetup进行灵活的系统安装或进一步封装为可引导的ISO镜像,帮助用户高效处理官方Windows安装镜像。

weixin_29207439的博客 454

简单的实现自定义View画一个钟表

自定义View画一个钟表      第一次看到别人的程序上面一个钟表自动走动感觉好神奇,好厉害的样子,然后就很感兴趣,自己鼓捣了一通,也明白了,理清思路其实很简单,下面来和大家一起分享一下我的思路.        首先确定一个圆心点和半径画一个圆,这个应该难不住聪明的你们吧,接下来要考虑的是圆上面钟表的刻度数字,这个想来发现挺的,怎么画?难道要知道每个小刻度线的横纵坐标?后来当我知道画布可

偷偷看你的博客 1063

弹簧管压力表设计报告

精密机械课程设计 弹簧管压力表设计报告 2020年5月1日 目 录 第一章 设计任务概述... 3 1.1 课程设计目的... 3 1.2 设计任务... 3 1.3 技术指标... 3 第二章 压力表概述... 4 2.1 机械式压力表的组成部分... 4 2.2 工作原理... 4 第三章 压力表设计... 5 3.1 弹簧管参数设计... 5 3.2 曲柄滑块机构设计... ...

weixin_42163746的博客 6452

自定义view绘制动态钟表

首先附上源码地址:https://github.com/y-kaixin/Colock 一:准备工作: 今天我们就来学习一下 ,怎么用自定view绘制钟表? 在绘制钟表之前,我也看了好多博客,上面写的特别复杂,什么计算公式一大堆,其实并不用这么麻烦,只要我们了解了自定义view里面的几个属性我们就可以用特别简单的方法来绘制动态钟表,下面我们现在介绍一下这几个属性: canvas....

ykx_1448488568的博客 595

Matlab2024a安装教程

点击【下一步】。8.选择解压后的【MATLAB R2024a(64bit)】文件夹中【Crack】文件夹下的【licese.lic】,点击【打开】。

qq_64359046的博客 4841

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

Android -- 自定义View小Demo,绘制钟表时间(一)

  1,昨天刚看了hongyang大神推荐的自定义时钟效果(传动门:http://www.jianshu.com/users/a45d19d680af/),效果还是不错的,自己又在github上找了找,发现了修复了bug的源码,然后就分析分析,先看一下效果:   思路分析一波,由于界面是在不停的绘制的,说以在View和SurfaceView之间我们要比较比较:   View一般用于绘制静态...

weixin_34150503的博客 115

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

Android自定义View之钟表绘制

Android自定义View之钟表绘制 自定义view一直是Android进阶路上的一块石头,跨过去就是垫脚石,跨不过去就是绊脚石。作为一个攻城狮,怎么能被他绊倒,一定要跟它死磕到底,这段时间看到自定义View新手实战-一步步实现精美的钟表界面特别漂亮,咱们也来手撸一个。 先看下效果图 咱们先写一个类WatchBoard继承View,并重写他的构造方法 public class...

论一个程序员的自我修养 5684

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

自定义View之绘制钟表

Android中为我们提供了很多的功能强大的视图控件,但是有些时候我们需要特定效果的控件。这时我们就需要自定义View来实现需要的效果。关于自定义视图的内容很多,我也在慢慢研究,这里绘制了一个简单的钟表视图和大家一起分享学习。

violinlinlin的博客 710

Android自定义sleep图,android自定义view实现钟表效果

本文实例为大家分享了android view实现钟表的具体代码,供大家参考,具体内容如下先看效果图:自定义view大家肯定已经不陌生了,所以直接今天直接步入正题:如何利用canvas去绘制出一个钟表当然绘制之前我们必须进行测量(重写onMeasure),根据自己的规则去测量,这暂时是将控件限制为一个正方形。首先我们先把钟表分解,看它由哪几部分组成。如上图:钟表包括表盘(刻度)和表针还有文字构成。分...

weixin_28331555的博客 335

android钟表,Android打造属于自己的时间钟表

1、概述本文主要讲解的是如何自定义一个时间钟表,通过简单的练习可以简单学习Android当中自定义view的一些常用绘图技巧,优化android绘图操作。言归正传,首先看下我们需要实现的效果:当我们看到这个效果的时候脑子里应该有一定的思路了,我们应该把它分解成以下几个步骤:1、仪表盘(圆)2、刻度线(长 中 短)3、刻度值(1-12)4、指针(时 分 秒)5、移动指针,计算指针位置现在我们已经...

weixin_30019895的博客 986
上一篇: Android实现动画Dialog
下一篇: Java中的位移运算
JSON_ZJS
博客等级 码龄9年 30粉丝 159原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值