仿抖音效果的数字时钟罗盘

最近抖音上的时钟罗盘壁纸可谓是非常的火爆，今天就用自定义控件来实现这个功能。

效果图：

软件详情：

时钟罗盘是动态的壁纸，随着时间而跳转的时钟，中间去除了月份和星期，并加入了炫彩文字，使总体看起来不这么单调。

代码实现：

写一个类DataTimeView 继承 View 并实现其中一个参数和两个参数的构造（用于代码实现和布局实现）

public DateTimeView(Context context) {this(context, null);
}public DateTimeView(Context context, @Nullable AttributeSet attributeSet) {super(context, attributeSet);this.paint = new Paint();//初始化时分秒的画笔mContext = context;initData();init();
}

接下来我们来看看 initData()方法（初始化数据，对应数字罗盘的时分秒的值）和 init() 方法（建立画笔Paint并设置参数，初始化定时器）

  private void initData() {this.mScale = 0.5f;this.secondDelta = 0.0f;this.dayIndex = 0;this.days = new String[]{"一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十", "二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九", "三十", "三十一"};this.hourIndex = 0;this.hours = new String[]{"一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"};this.minusIndex = 0;this.minutes = new String[]{"一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分", "十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分", "二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分", "三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分", "四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分", "五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", ""};this.secondIndex = 0;this.seconds = new String[]{"一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒", "十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒", "二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒", "三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒", "四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒", "五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", ""};}

 private void init() {this.paint.setAntiAlias(true);//为时分秒的画笔设置参数this.paint.setColor(Color.WHITE);this.paint.setTextSize(50.0f);Executors.newScheduledThreadPool(1).scheduleAtFixedRate(new TimerTask() {@Overridepublic void run() {Calendar instance = Calendar.getInstance();DateTimeView.this.dayIndex = instance.get(Calendar.DATE) - 1;DateTimeView.this.hourIndex = instance.get(Calendar.HOUR) - 1;DateTimeView.this.minusIndex = instance.get(Calendar.MINUTE) - 1;DateTimeView.this.secondIndex = instance.get(Calendar.SECOND) - 1;DateTimeView.this.secondDelta = ((((float) (System.currentTimeMillis() % 1000)) * 1.0f) / 1000.0f) * 3.0f;if (DateTimeView.this.secondDelta > 0.6f) {DateTimeView.this.secondDelta = 1.0f;}DateTimeView.this.postInvalidate();}}, 0, 16, TimeUnit.MILLISECONDS);mTextPaint = new Paint();//画中间的文字mTextPaint.setColor(Color.WHITE);//设置画笔的颜色mTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);//描边加填充mTextPaint.setStrokeWidth(3);//设置画笔的宽度mTextPaint.setAntiAlias(true);//防锯齿，设置为true时,会损失一定的性能,使用时视情况而定mTextPaint.setStrokeCap(Paint.Cap.ROUND);//圆形  笔帽,就是画笔画出来的线的两端的样式mTextPaint.setStrokeJoin(Paint.Join.ROUND);//圆角   两线相交样式mTextPaint.setLetterSpacing(12);//设置字符间间距mTextPaint.setTextSize(dpToPx(70));//设置字符大小mTextPaint.setTextAlign(Paint.Align.CENTER);//居中  文本对齐方式Typeface customFont = Typeface.createFromAsset(mContext.getAssets(), "yzqs.ttf");mTextPaint.setTypeface(customFont); //字体 Typeface.create(familyName, style)//加载自定义字体mViewWidth = DimensionUtil.dpToPx(70);//实现中间文字炫彩效果mLinearGradient = new LinearGradient(mViewWidth, 0, mViewWidth * 2, 0,new int[]{Color.WHITE, Color.GREEN, Color.CYAN, Color.BLUE, Color.RED, Color.GREEN, Color.WHITE}, null, Shader.TileMode.CLAMP);mTextPaint.setShader(mLinearGradient);mGradientMatrix = new Matrix();mTextPaint2 = new Paint();//画顶部的提示语mTextPaint2.setAntiAlias(true);//防锯齿，mTextPaint2.setColor(Color.WHITE);//设置画笔的颜色mTextPaint2.setStyle(Paint.Style.FILL_AND_STROKE);//描边加填充mTextPaint2.setTypeface(customFont);mTextPaint2.setTextAlign(Paint.Align.CENTER);}

数据和画笔都初始化好了，接下来我们就开始画出我们想要的效果吧，对应的是onDraw()方法（开始画画的方法）

//绘画顶部的提示语
SimpleDateFormat formatter = new SimpleDateFormat("HH:mm");Date curDate = new Date(System.currentTimeMillis());//获取当前时间mTextPaint2.setTextSize(dpToPx(25));//设置字符大小canvas.drawText("明明什么都没做", canvas2.getWidth() / 2, dpToPx(40), mTextPaint2);//画提示语mTextPaint2.setTextSize(dpToPx(45));//设置字符大小canvas.drawText("就已经 " + formatter.format(curDate) + " 了", canvas2.getWidth() / 2, dpToPx(40) * 2 + 40, mTextPaint2);//画提示语//画姓氏canvas.drawText(mName, canvas2.getWidth() / 2, getHeight() / 2 + dpToPx(26), mTextPaint);//画姓氏//画时分秒String[] strArr = this.hours;this.mScale = (((float) canvas2.getWidth()) / 1080.0f) * 0.5f;float length = 360.0f / ((float) strArr.length);float f3 = 0.0f - (((float) this.hourIndex) * length);int i4 = 0;f = f3;for (String str222 : strArr) {matrix.reset();matrix.postTranslate(300.0f, 0.0f);matrix.postRotate(f, 0.0f, 0.0f);f += length;matrix.postTranslate((float) (getWidth() / 2), (float) (getHeight() / 2));f2 = this.mScale;matrix.postScale(f2, f2, (float) (getWidth() / 2), (float) (getHeight() / 2));canvas2.setMatrix(matrix);this.paint.setColor(i4 == this.hourIndex ? Color.WHITE : -7829368);stringBuilder = new StringBuilder();stringBuilder.append(str222);stringBuilder.append("点");canvas2.drawText(stringBuilder.toString(), 0.0f, 0.0f, this.paint);i4++;}strArr = this.minutes;length = 360.0f / ((float) strArr.length);f3 = 0.0f - (((float) this.minusIndex) * length);f = f3;i4 = 0;for (String str2222 : strArr) {matrix.reset();matrix.postTranslate(500.0f, 0.0f);matrix.postRotate(f, 0.0f, 0.0f);f += length;matrix.postTranslate((float) (getWidth() / 2), (float) (getHeight() / 2));f2 = this.mScale;matrix.postScale(f2, f2, (float) (getWidth() / 2), (float) (getHeight() / 2));canvas2.setMatrix(matrix);this.paint.setColor(i4 == this.minusIndex ? Color.WHITE : -7829368);canvas2.drawText(str2222, 0.0f, 0.0f, this.paint);i4++;}strArr = this.seconds;float length3 = 360.0f / ((float) strArr.length);length = (0.0f - (((float) this.secondIndex) * length3)) - (this.secondDelta * length3);float f5 = length;int i5 = 0;for (String str3 : strArr) {matrix.reset();matrix.postTranslate(760.0f, 0.0f);matrix.postRotate(f5, 0.0f, 0.0f);f5 += length3;matrix.postTranslate((float) (getWidth() / 2), (float) (getHeight() / 2));float f6 = this.mScale;matrix.postScale(f6, f6, (float) (getWidth() / 2), (float) (getHeight() / 2));canvas2.setMatrix(matrix);if (this.secondDelta == 1.0f) {this.paint.setColor(i5 == this.secondIndex + 1 ? Color.WHITE : -7829368);} else {this.paint.setColor(i5 == this.secondIndex ? Color.WHITE : -7829368);}canvas2.drawText(str3, 0.0f, 0.0f, this.paint);i5++;}

这里只是写出了一些主要的代码，具体代码未贴出，如有什么问题，可以在下部留言交流。

具体代码下载地址：https://download.csdn.net/download/abner_crazy/11710357

软件下载地址：https://sj.qq.com/myapp/detail.htm?apkName=central.scjgt.utils （软件已经在应用宝上线）

因为该功能我没有独立写一个app，而是将其集成在我另外一个app里面，软件下载成功后，可以左滑，在“更多” 里面找到“时钟罗盘”。

另外一个app的介绍：https://blog.csdn.net/Abner_Crazy/article/details/86689691

仿抖音效果的数字时钟罗盘相关推荐

python 角度判断_python的turtle也能仿抖音网红文字时钟的代码及分析
1.说明: 1.1 推荐指数:★★★ 1.2 推荐环境:python3.8和微软vscode编辑器 1.3 感言: python的turtle也能画出文字时钟,效果虽然不理想,有闪跳,但是也很棒,未采 ...
android仿抖音效果
https://blog.csdn.net/JArchie520/article/details/110791624
Android仿抖音主页效果实现
目录写在前面一.准备工作 1.1.主页面布局 1.2.列表Item布局 1.3.列表Item适配器二.自定义LayoutManager 三.实现播放补充:源码地址:https://github ...
仿抖音右滑清屏，左滑列表功能
概述项目中要实现仿抖音直播间滑动清屏,侧滑列表的功能,在此记录下实现过程和踩坑记录希望避免大家走些弯路,也当作自己的一个总结首先看下Demo中的效果阅读文章需要提前熟悉些事件分发的内 ...
android仿陌陌tab,uniapp直播室|仿抖音视频|nvue+uniapp高仿陌陌直播
一.介绍说明 U直播uniLiveShow是一款基于vue+Nvue+uni-app技术开发的综合小视频/聊天室/直播等功能的聊天直播项目.界面高仿热门抖音|火山小视频/陌陌直播,可滑动切换视频播放, ...
win10动态壁纸怎么设置_小米手机怎么弄抖音中文数字时钟罗盘屏保设置动态壁纸教程...
[闽南网] 最近抖音上有一个中文数字时钟罗盘非常火爆,这种文字罗盘锁屏特效十分高大上,受到了不少抖友们的青睐.但是,罗盘文字时钟每种手机款型的不一样设置方法也是不同,可能很多米粉也想设置中文数字时钟罗 ...
labview怎么设置中文_小米手机怎么弄抖音中文数字时钟罗盘屏保设置动态壁纸教程...
[闽南网] 最近抖音上有一个中文数字时钟罗盘非常火爆,这种文字罗盘锁屏特效十分高大上,受到了不少抖友们的青睐.但是,罗盘文字时钟每种手机款型的不一样设置方法也是不同,可能很多米粉也想设置中文数字时钟罗 ...
soapui怎么设置中文_小米手机怎么弄抖音中文数字时钟罗盘屏保设置动态壁纸教程...
[闽南网] 最近抖音上有一个中文数字时钟罗盘非常火爆,这种文字罗盘锁屏特效十分高大上,受到了不少抖友们的青睐.但是,罗盘文字时钟每种手机款型的不一样设置方法也是不同,可能很多米粉也想设置中文数字时钟罗 ...
python实现抖音上比较火的罗盘时钟
抖音上比较有趣的罗盘时钟,今天用turtle来画一下,基本功能实现了,拿来练习一下turtle,感觉还可以吧 turtle的安装 sudo apt-get install python3-tk 罗盘时 ...

仿抖音效果的数字时钟罗盘

仿抖音效果的数字时钟罗盘相关推荐

最新文章

热门文章