Android实现模拟时钟(简单+漂亮)--时针、分针、秒针

article/2025/9/22 7:47:44

         前言

                     前不久在网上看见Android实现的模拟时钟,感觉十分有意思,这里是地址:

                http://www.eoeandroid.com/forum.php?mod=viewthread&tid=58324可惜的是这种方式没有

                秒表。笔者突然对其有了兴趣,也想去实现以下自己的模拟时钟。折腾了一阵子总算是弄出来了

                现在将实现方式共享出来,大家一些交流。

                     不多说,先上效果图:

                     

                     

         准备工作

                    首先我们应该准备相关的素材:时钟盘、时针、分针、秒针图片.

                    时钟盘:

                                    

                             时针:

                                                  

                            分针:

                                                  

                            秒针:     

                                                 

              源码部分

                              配置文件,比较简单:                     

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"tools:context=".MainActivity"android:background="@color/bg"><com.kiritor.mymodelclock.MyQAnalogClockandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"/>
</LinearLayout>
                         MyQAnalogClock代码:用于构造时钟view以及其刷新显示:   
package com.kiritor.mymodelclock;import android.util.AttributeSet;
import com.kiritor.mymodelclock.R;
import android.content.Context;
import android.graphics.*;
import android.graphics.drawable.BitmapDrawable;
import android.os.Handler;
import android.view.View;
import java.util.Calendar;
import java.util.TimeZone;
/*** Created by Kiritor on 13-5-30.*/
public class MyQAnalogClock extends View {//时钟盘,分针、秒针、时针对象Bitmap mBmpDial;Bitmap mBmpHour;Bitmap mBmpMinute;Bitmap mBmpSecond;BitmapDrawable bmdHour;BitmapDrawable bmdMinute;BitmapDrawable bmdSecond;BitmapDrawable bmdDial;Paint mPaint;Handler tickHandler;int mWidth;int mHeigh;int mTempWidth = bmdSecond.getIntrinsicWidth();int mTempHeigh;int centerX;int centerY;int availableWidth = 100;int availableHeight = 100;private String sTimeZoneString;public MyQAnalogClock(Context context,AttributeSet attr){this(context,"GMT+8:00");}public MyQAnalogClock(Context context, String sTime_Zone) {super(context);sTimeZoneString = sTime_Zone;mBmpHour = BitmapFactory.decodeResource(getResources(),R.drawable.shizhen);bmdHour = new BitmapDrawable(mBmpHour);mBmpMinute = BitmapFactory.decodeResource(getResources(),R.drawable.fenzhen);bmdMinute = new BitmapDrawable(mBmpMinute);mBmpSecond = BitmapFactory.decodeResource(getResources(),R.drawable.miaozhen);bmdSecond = new BitmapDrawable(mBmpSecond);mBmpDial = BitmapFactory.decodeResource(getResources(),R.drawable.android_clock_dial);bmdDial = new BitmapDrawable(mBmpDial);mWidth = mBmpDial.getWidth();mHeigh = mBmpDial.getHeight();centerX = availableWidth / 2;centerY = availableHeight / 2;mPaint = new Paint();mPaint.setColor(Color.BLUE);run();}public void run() {tickHandler = new Handler();tickHandler.post(tickRunnable);}private Runnable tickRunnable = new Runnable() {public void run() {postInvalidate();tickHandler.postDelayed(tickRunnable, 1000);}};protected void onDraw(Canvas canvas) {super.onDraw(canvas);Calendar cal = Calendar.getInstance(TimeZone.getTimeZone(sTimeZoneString));int hour = cal.get(Calendar.HOUR);int minute = cal.get(Calendar.MINUTE);int second = cal.get(Calendar.SECOND);float hourRotate = hour * 30.0f + minute / 60.0f * 30.0f;float minuteRotate = minute * 6.0f;float secondRotate = second * 6.0f;boolean scaled = false;if (availableWidth < mWidth || availableHeight < mHeigh) {scaled = true;float scale = Math.min((float) availableWidth / (float) mWidth,(float) availableHeight / (float) mHeigh);canvas.save();canvas.scale(scale, scale, centerX, centerY);}bmdDial.setBounds(centerX - (mWidth / 2), centerY - (mHeigh / 2),centerX + (mWidth / 2), centerY + (mHeigh / 2));bmdDial.draw(canvas);mTempWidth = bmdHour.getIntrinsicWidth();mTempHeigh = bmdHour.getIntrinsicHeight();canvas.save();canvas.rotate(hourRotate, centerX, centerY);bmdHour.setBounds(centerX - (mTempWidth / 2), centerY- (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY+ (mTempHeigh / 2));bmdHour.draw(canvas);canvas.restore();mTempWidth = bmdMinute.getIntrinsicWidth();mTempHeigh = bmdMinute.getIntrinsicHeight();canvas.save();canvas.rotate(minuteRotate, centerX, centerY);bmdMinute.setBounds(centerX - (mTempWidth / 2), centerY- (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY+ (mTempHeigh / 2));bmdMinute.draw(canvas);canvas.restore();mTempWidth = bmdSecond.getIntrinsicWidth();mTempHeigh = bmdSecond.getIntrinsicHeight();canvas.rotate(secondRotate, centerX, centerY);bmdSecond.setBounds(centerX - (mTempWidth / 2), centerY- (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY+ (mTempHeigh / 2));bmdSecond.draw(canvas);if (scaled) {canvas.restore();}}
}
                        主Activity:
package com.kiritor.mymodelclock;import android.app.Activity;
import android.os.Bundle;/*** Created by Kiritor on 13-5-30.*/
public class MainActivity extends Activity {public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}
}
                        好了一个简单的模拟时钟就完成了,不过通过观察运行效果可以看出的是,笔者对

                时针、分针、秒针图片的设计不是太美观,看的不是太清楚,体验略差。不过这不是重点

                读者可以自己去设计一下那4张图片,从而做出不同的效果!

                        这里本实例使用Android Studio做的,完整项目源码就不上传了!Over!

                

 


http://chatgpt.dhexx.cn/article/bueKDYGi.shtml

相关文章

网页电子时钟

如图就是一个简易的网页电子时钟&#xff0c;利用Javascript和 html和 css就可以制作 <div class"wrapper"><div class"time-box"><div class"hour"></div><div class"sec"></div></div>&…

时钟啊时钟

效果图 JS /*** color --color 父级定义颜色 css直接使用变量*/ import { useState, useEffect } from react; import styles from ./style.less const index () > {const [time, setTime] useState({hours: 00,minutes: 00,seconds: 00})useEffect(() >{countDown() …

模拟钟表的手机软件_手机时钟软件推荐

下载 生活服务|47.3MB 更新时间&#xff1a;2019-04-04 12:04:18 评分&#xff1a;7 概要&#xff1a;抖音文字云时钟app是一款异常火爆的数字时钟软件&#xff0c;该软件在抖音上已经被众多小伙伴种草了&#xff0c;它拥有非常炫酷的背景&#xff0c;设置安装起来也非常简便&a…

抖音文字时钟壁纸html,抖音文字时钟

抖音文字时钟是一款为最近非常火的珍惜时间打造的钟表&#xff0c;有记录时间的功能也有很强大的警示作用&#xff0c;告诉我们时间的重要性&#xff0c;它有很多的模式可以调节使用&#xff0c;展现出自己喜欢的需要的时钟模式来&#xff0c;有需要的用户们就来这里下载吧。 温…

实现时钟特效

需求&#xff1a; 显示年、月、日、星期和二十四进制的时钟特效&#xff01; 代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>时钟特效</title><style> body{backgrou…

超级实用的动态时钟。

绘制时钟 时钟动态效果的实现基于canvas画布的重绘&#xff0c;也就是说每秒都要在canvas画布上重新绘画一遍图形&#xff0c;在配合定时器即可实现动态效果。而实现此时钟主要有两个步骤&#xff0c;1是表盘的绘制&#xff0c;2是指针的绘制。 绘制时钟表盘 时钟表盘的刻度…

教你制作 简易罗盘动态时钟 网页文件

简易罗盘动态时钟&#xff08;含html文件和源码&#xff09; 快来获取 首先给大家展示成品截图 首选展示index.txt代码 <动态罗盘时钟> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"v…

用前端代码编写一个动态的罗盘时钟

用前端代码编写一个动态的罗盘时钟 前言一、代码如下1.index2.js3.css 页面效果 前言 今天给大家分享一个罗盘时钟的前端代码&#xff0c;喜欢的小伙伴帮忙点赞一下噢&#xff01; 一、代码如下 1.index <!DOCTYPE html> <html lang"en"> <head>…

android时钟字体,文字时钟下载-文字时钟 安卓版v1.6.1-PC6安卓网

文字时钟屏保app是一款功能齐全又实用的时钟显示软件&#xff0c;文字时钟屏保app主界面是一个自带时间、日期、天气的LED数字时钟和模拟时钟&#xff0c;全屏显示翻页时钟&#xff0c;酷炫美观又实用。这款文字时钟屏保app可以一直保持显示状态。 软件介绍 文字时钟屏保app是一…

日历与时钟

目录 公历 黑色星期五 生物韵律 公历 在公历中&#xff0c;当年份为4的整数倍&#xff0c;但不是100的整数倍时&#xff0c;会出现闰年的现象。 y40 mod(y,4) 0 && mod(y,100)||mod(y,400)0 输出当时的年、月、日、时、分、秒 f%6d %6d %6d %6d %6d %9.3f\n cclock …

手机时钟软件推荐,创意时钟APP介绍

手机上有好用的时钟APP&#xff0c;时钟软件哪个好用? 每个人的手机屏幕都有着自己独特的设计&#xff0c;而时钟软件能够为用户的手机再增添一些风采和魅力&#xff0c;更有专为来年人设计的大字体桌面时钟&#xff0c;更加的清晰直观&#xff0c;各种特色的桌面时钟app中都有…

各种好用的在线时钟、网页时钟汇总推荐集合

电脑全屏时钟网页版https://www.sioe.cn/rili/quanpingshizhong.php 网页时钟http://www.gz7k.com/ 在线时钟 - 现在几点https://naozhong.net.cn/shijian/ 桌面时钟_在线极简时钟同步北京时间网提供桌面时钟&#xff0c;在线极简同步时钟。https://www.beijing-time.org…

html在线时钟

html在线时钟 <script src"https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style…

html 、css、js动态文字时钟

效果思路是利用css的transform属性和js&#xff0c;来实现时钟布局和旋转。 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…

显示农历天气时钟小部件下载_文字云时钟安卓版下载|文字云时钟app下载_v1.0

文字云时钟是一款流行便捷简洁时钟服务软件&#xff0c;为用户提供桌面时钟、数字时钟、悬浮时钟、秒表计时等多种功能&#xff0c;喜欢的朋友赶快点击下载吧&#xff01; 软件介绍 文字云时钟word clock软件是一款生活实用的文字时钟。文字云时钟app既可以当做类似LED效果的…

[乐意黎]某音上超酷炫的 Word Clock 文字云时钟屏保配置

乐意黎最近在某音上看到 Wordclock 屏保非常的火爆&#xff0c;看上去非常有意思。 哪么 Wordclock屏保怎么弄的&#xff1f;如何设置呢&#xff1f; 电脑怎么设置动态时钟屏保 实现这样的动态时间屏保的效果主要是使用了一款叫做word clock的第三方插件&#xff0c;《Word C…

android时钟字体,抖音文字云时钟app-抖音文字云时钟安卓版(word clock)v1.0下载

抖音文字云时钟app是一款异常火爆的数字时钟软件&#xff0c;该软件在抖音上已经被众多小伙伴种草了&#xff0c;它拥有非常炫酷的背景&#xff0c;设置安装起来也非常简便&#xff0c;可以自定义多个模块&#xff0c;支持多种语音&#xff0c;感兴趣的小伙伴千万不要错过哦&am…

【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍

唯有热爱&#xff0c;可抵岁月漫长&#xff0c;唯有热爱&#xff0c;不畏世间无常&#xff01; 少年不曾迷茫&#xff0c;展翅飞往神域&#xff0c;坚定初心&#xff0c;踏实行动。 新的一年&#xff0c;收下少年的祝福&#xff0c;一起踏上新道路。 &#x1f4aa;(ง •_•)…

Div+CSS网页设计(HTML5)

1、将图片添加到div中间位置 <div style"color:#0000FF" id"top"> <div class"f1" align"center"><img src"img/logo.png"> </div> </div> #top{background: cadetblue;height: …

网页设计与制作html+css

1、前言 又到毕业季&#xff0c;毕业设计ing or 课程设计ing&#xff0c;我准备了几款网页设计与制作免费模板送个各位萌新参考&#xff0c;助力各位小伙伴顺利完成毕业设计或者课程设计。 2、作品展示 《junny》 这款作品页面清新简单&#xff0c;代码结构也不复杂&#x…