-
2021-05-26 12:58:13
前言
本文介绍的是Android如何实现数字跳动效果的TextView,主要运用了DancingNumberView,DancingNumberView是一个用于跳动显示文本中数字的控件,继承自TextView,这种控件一般用于显示金额等对用户较为敏感的数字,让UI交互更加生动。
它具有以下几点特性:
自动获取文本中的所有数字,并同时开始跳动,免去多个TextView拼接的麻烦
支持数字按照自定义的格式显示,例如限定只显示小数点后两位
效果图如下
导入使用
Gradle
第1步,在project的build.gradle文件中适当位置添加
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
第2步,在app的build.gradle文件中适当位置添加依赖项
dependencies {
compile 'com.github.JianxunRao:DancingNumberView:V1.0.1'
}
使用方式
通过XML布局
android:id="@+id/dnv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:dnv_duration="6000"
app:dnv_format="%.2f"/>
通过Java代码
DancingNumberView dnv = (DancingNumberView) findViewById(R.id.dnv);
dnv.setText(text);//设置显示内容
dnv.setDuration(duration);//设置完成跳动的持续时长(单位ms)
dnv.setFormat(format);//设置数字的显示格式
dnv.dance();//启动效果,开始数字跳动
关键代码
/**
* 文本中的数字开始跳动
*/
public void dance() {
text = getText().toString();
numbers=new ArrayList<>();
Pattern pattern = Pattern.compile("\\d+(\\.\\d+)?");
Matcher matcher=pattern.matcher(text);
while (matcher.find()){
numbers.add(Float.parseFloat(matcher.group()));
}
textPattern = text.replaceAll("\\d+(\\.\\d+)?",PLACEHOLDER);
numberTemp=new float[numbers.size()];
ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(this,"factor",0,1);
objectAnimator.setDuration(duration);
objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
objectAnimator.start();
}
/**
* 获取算数因子
* @return 算数因子
*/
public float getFactor() {
return factor;
}
/**
* 设置算数因子,为ObjectAnimator调用
* @see ObjectAnimator
* @param factor 算数因子
*/
public void setFactor(float factor) {
String textNow=textPattern;
this.factor = factor;
for (int i=0;i
numberTemp[i]=numbers.get(i)*factor;
textNow=textNow.replaceFirst(PLACEHOLDER,String.format(format,numberTemp[i]));
}
setText(textNow);
}
总结
以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
更多相关内容 -
UITableView列表reloadSections等刷新数据时屏幕跳动
2018-07-14 21:00:08使用如下代码解决屏幕跳动 [UIView performWithoutAnimation:^{ NSIndexSet *reloadSet = [NSIndexSet indexSetWithIndex:1]; [self.workTable reloadSections:reloadSet withRowAnimation:UITableViewRowA...使用如下代码解决屏幕跳动
[UIView performWithoutAnimation:^{ NSIndexSet *reloadSet = [NSIndexSet indexSetWithIndex:1]; [self.workTable reloadSections:reloadSet withRowAnimation:UITableViewRowAnimationNone]; }];
-
Android输入法与表情面板切换时的界面抖动问题解决方法
2020-09-01 00:31:23主要介绍了Android输入法与表情面板切换时的界面抖动问题解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
jQuery CSS3的弹性卡通怪物上下跳动动画特效.zip
2019-07-11 09:29:57<body>[removed][removed] <div class="eye left"><span></span></div> ...<div class="eye right"><span></span></div... 一款很有个性的纯CSS3制作卡通形像三只小怪物上下跳动动画特效,CSS3弹性动画代码。 -
字节跳动屏幕适配方案解读
2019-01-19 12:57:25字节跳动屏幕适配方案 重点 为什么要做屏幕适配 从数据上告诉你安卓手机屏幕的碎片化 我司的适配方案 适配中出现的问题 实际演练 为什么要做屏幕适配 在Android开发中,由于Android的碎片化严重,屏幕分辨率...说来惭愧,这个方案在微信公众号推出来的时候,我才去了解我司自己的适配方案。字节跳动屏幕适配方案
重点
- 为什么要做屏幕适配
- 从数据上告诉你安卓手机屏幕的碎片化
- 我司的适配方案
- 适配中出现的问题
- 实际演练
为什么要做屏幕适配
在Android开发中,由于Android的碎片化严重,屏幕分辨率千奇百怪,想要在各种分辨率的设备上显示一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但是在各种奇怪分辨率的手机下表现的不近人意。
Android手机屏幕的碎片化
在大部分场景下我们是不需要关心屏幕适配,因为很多ui不会有太多元素,要不然就是RecyclerView来展示数据,但是也有不少的场景UI会比较复杂,我们需要关心手机适配,接下来,从Google和友盟的数据上看下当前手机屏幕的大小和分辨率
Google数据
可以看到Normal占比是最多的,Normal就是宽度为480dp的手机。而在Normal手机中dpi为320的手机又居多。
small -> 320dp
Normal -> 480dp
Large -> 600dp
XLarge -> 720dp友盟数据
名次 屏幕分辨率 活跃占比 趋势 1 1920x1080 (16:9) 28.9 ↓ 2 1280x720 (16:9) 22.5 ↓ 3 1080x1821 (3:5) 3.9 ↓ 4 960x540 (16:9) 3.3 ↓ 5 854x480 (16:9) 2.8 ↓ 6 720x1208 (9:16) 2.6 ↓ 7 1184x720 (5:3) 2.4 ↓ 8 1776x1080 (5:3) 2.1 ↑ 9 2560x1440 (16:9) 2 ↑ 10 2016x1080 (17:9) 1.9 ↑ 11 1794x1080 (5:3) 1.8 ↑ 12 2040x1080 (17:9) 1.3 ↑ 13 2160x1080 (18:9) 1.3 ↑ 从上面的数据可以看到安卓的手机市场,各种比例、分辨率、尺寸的手机层出不穷,如果我们按照Google官方的适配方案,那么我们基本上可以不用做其他需求了,ui改动一个像素点,你可能需要改动十几个layout的布局文件。
字节跳动屏幕适配方案
这节会从基础到新的适配方案,详细看下同事是怎样解决这个世纪难题。
传统dp适配方式
android中的dp在渲染前会将dp转换为px,计算公式为
px = density * dp density = dpi/160 px = dp * (dpi/160)
dpi(pot per inch)就是每英寸的多少个点,dpi是根据屏幕真实的分辨率和尺寸计算的,每个设配可能都不一样。
拿MIX2做个例子,MIX2的尺寸是
5.99英寸
,分辨率是2160*1080象素
。根据上面的公式可以算出MIX2的dpi为402。这里有个小问题
我们通过代码val mix2dpi= resources.displayMetrics.densityDpi println("mix2 dpi is : $mix2dpi") //打印出 440
为什么和我们计算出来的不一致,难道公式是假的?那肯定不是的,小米手机虽然在手机信息上写的
5.99英寸
但是这是整个手机屏幕,而不是真正的显示区域,MIX2的真正显示区域是5.5英寸
,这样是不是就对应起来了。这样问题就来了
假设我们的设计小哥哥给的UI设计图是按照屏幕375dp设计的,那么在上述的设备上,屏幕的宽度是
1080/(440/160)=392.7dp
,也就是要比设计图要款。这种情况下,即时使用dp,也无法达到和设计图相同的效果。同事还存在部分设备宽度不足375dp
,那么就会出现超出屏幕的情况出现。除此之外还有很多设备并没有按照上述的公式来实现,因此dpi的值是非常乱的。用dp进行适配也是差强人意。
字节跳动适配方案
先了解几个知识点
- dp和px的转换公式为:px = dp * density
- dp转换的场景都是通过DisplayMetrics来进行计算的
- DisplayMetrics#density 就是上述的density
- DisplayMetrics#densityDpi 就是上述的dpi
- DisPlayMetrics#scaledDensity 字体的缩放因子,正常情况下和density相等,但是调节系统字体大小后会改变这个值
那么应用中所有dp的计算都是更DisplayMetrics这个类有关,所以只用针对这个类进行操作就好了。
我们可以将DisPlayMetrics理解为三个部分
- System,初始分配,包含第三方库。
- Application,整个应用的DisplayMetrics
- Activity,单个Activity页面的DisplayMetrics
//系统的屏幕尺寸 val systemDM = Resources.getSystem().displayMetrics //app整体的屏幕尺寸 val appDM = activity.application.resources.displayMetrics //activity的屏幕尺寸 val activityDM = activity.resources.displayMetrics
我们这里以宽度为375dp的宽度为基准去适配,这个值你可以改为任何值。
// 适配屏幕的宽度 activityDM.density = activityDM.widthPixels / tartgetDP.toFloat() // 适配相应比例的字体大小 activityDM.scaledDensity = activityDM.density * (systemDM.scaledDensity / systemDM.density) // 适配dpi activityDM.densityDpi = (160 * activityDM.density).toInt()
看下整个适配的工具类,特别简单
object ScreenUtil { fun adapterScreen(activity: Activity, targetDP: Int, isVertical: Boolean) { //系统的屏幕尺寸 val systemDM = Resources.getSystem().displayMetrics //app整体的屏幕尺寸 val appDM = activity.application.resources.displayMetrics //activity的屏幕尺寸 val activityDM = activity.resources.displayMetrics if (isVertical) { // 适配屏幕的高度 activityDM.density = activityDM.heightPixels / targetDP.toFloat() } else { // 适配屏幕的宽度 activityDM.density = activityDM.widthPixels / targetDP.toFloat() } // 适配相应比例的字体大小 activityDM.scaledDensity = activityDM.density * (systemDM.scaledDensity / systemDM.density) // 适配dpi activityDM.densityDpi = (160 * activityDM.density).toInt() } fun resetScreen(activity: Activity) { //系统的屏幕尺寸 val systemDM = Resources.getSystem().displayMetrics //app整体的屏幕尺寸 val appDM = activity.application.resources.displayMetrics //activity的屏幕尺寸 val activityDM = activity.resources.displayMetrics activityDM.density = systemDM.density activityDM.scaledDensity = systemDM.scaledDensity activityDM.densityDpi = systemDM.densityDpi appDM.density = systemDM.density appDM.scaledDensity = systemDM.scaledDensity appDM.densityDpi = systemDM.densityDpi } }
使用中出现的问题
使用时需要注意以下几点:
- 尽量只在当前页面生效,包括
activity,fragment,dialog,view
,需要在setCOntentView()
或者inflate
之前调用这个方法,在结束onDestroy,onDismiss,onDetachWindow()
的时候调用resetScreen()
方法。 - 在页面中需要弹出
toast
和dialog
的时候需要调用resetScreen
,不然toast
和dialog
的页面大小和字体大小会被影响。 - 记住一点使用前调用
adapterScreen
,时候后调用resetScreen
实际操作
工欲善其事必先利其器
我们要使用这种方式,首先要把Android Studio的xml预览界面调节成设计师给的设计图的屏幕尺寸。这里已经向抖音的设计师确认,给我们的所有设计图都是按照
750*1334象素 -> 375*667dp
的规格设计。也就是说density=2
,对应dpi=160*2=320
,对应的手机屏幕大小为4.8英寸
在预览界面怎么创建相应的界面呢?
tools -> AVD Manager -> Create Virtual Device… -> New Hardware Profile -> screen sieze:
4.8
Resolution:750
x1334
什么?还不会,那我只能把所有的图都贴出来了。
现在准备完成了,可以开始开发了
比对效果
未使用前,为了适配小屏手机,在大屏手机上看就会很丑
使用后,两个页面基本相同了
-
电脑屏幕抖动是怎么回事?
2021-07-29 07:54:09电脑屏幕抖动现象比较普遍,毕竟产生的原因很多,很容易就会出现屏幕抖动现象。下面可以用排除法,来解决电脑抖动的原因1.电流干扰所致:这种情况现象是所有显示屏(包括电视机、投影仪等)都会闪烁。可以比较简单的...电脑屏幕抖动现象比较普遍,毕竟产生的原因很多,很容易就会出现屏幕抖动现象。下面可以用排除法,来解决电脑抖动的原因
1.电流干扰所致:
这种情况现象是所有显示屏(包括电视机、投影仪等)都会闪烁。可以比较简单的测试方法是用笔记本,如果插上电源会闪烁,而不接电源则不会闪烁,则可以判断是电流干扰,这种情况在工业用电上比较常见,比较简单的方法是将电源插头上的地线去掉即可。
2.进入系统后一直抖动:
这种情况一般是刷新率设置错误。现在的显示器一般都可以自动调节,可以按显示器上的“AUTO”按钮高显示器自动调整即可。而有的显示器没有自动调整的按钮,此时你就需要更改显示器的属性了。右击桌面空白处选择“属性”,选择“设置”选项卡,再单击“高级”按钮,在弹出的对话框中选择“监视器”选项卡,选择“屏幕刷新率” 为“60赫兹”。如果还会闪烁,则再改成其它的“屏幕刷新率”
此外,如果你显示附件有磁场影响,如音响就在边上,也会造成这样的现象,将音响搬开即可,使用了很差的机箱,也会导致这样的问题。
-
WPS文字在表格中打字自动跳动
2020-12-23 23:12:21SQL Server 递归SQL Server 没有类似于OracleSTART WITH NAME='xx'CONNECT BY PRIOR ID=PARENT_ID这样的语句,但是可以通过自定义标准函数+With语句实 ...SQL优化 CREATE STATISTICSCREATE STATISTICS 语法:... -
汇编实现屏幕输出
2020-03-19 23:23:56需求在屏幕中心实现所需要求的内容 -
苹果手机进水屏幕乱跳怎么办
2021-09-30 08:45:46苹果手机进水屏幕乱跳可能是软件问题,解决一共分为4步,步骤如下: 1、进入通用页面 打开苹果手机里的“设置”,再点“通用”。 2、进入还原页面 在页面里点击“还原”。 3、进入还原网络设置页面 在页面... -
跳动模式:将3D触摸菜单中的“编辑主屏幕”替换为“跳动模式”,并永久地跳动图标
2021-02-17 00:53:03摇动模式 摇动主屏幕图标,然后将“编辑主屏幕”替换为“摇动模式” -
Unity屏幕晃动解决方法--多种情况不同应对
2021-02-23 16:48:57在寒假实习中做消除游戏时需要实现一个效果:多行消除时有一个屏幕晃动的特效,其实这个没什么难的,看了一篇别人的博客,他就完全通过改变摄像机的范围来模拟场景中所有物体的移动,但是我发现并不适用于我这里,... -
关于刷新UITableView中cell抖动以及点击cell上的按钮cell自动往上跳动问题
2021-08-10 17:28:37在iOS13之前的系统但我们点击cell中的按钮或者刷新cell的时候会发生cell自动往上跳动的想象,经过多方研究,解决方法如下: 设置UITableView的下列属性即可解决这个问题 self.tableView.estimatedRowHeight = 0; ... -
python3+uiautomator2判断手机屏幕状态(亮屏或灭屏)
2019-06-25 10:43:57判断手机屏幕状态(亮屏或灭屏) import uiautomator2 as u2 import logging logging.basicConfig(level = logging.INFO,format = '%(asctime)s - %(name)s - %(levelname)s - %(message)s') logger = logging.... -
电脑开机后屏幕全都是英文字母及数字跳动,什么处理?
2021-07-28 04:40:27电脑开机后屏幕全是英文字母及数字跳动是因为你上次没有正常关机,系统自动的修复一些东西,为了防止文件的丢失。1)这是系统在扫描硬盘,可能是自己操作的问题,如果非法关机,直接断电或者直接按电源关电,电脑开机... -
跳动的心windows3D屏保windows屏保
2019-08-05 23:22:47下载下来的SCR文件复制到 C:\WINDOWS\system32 。然后右击"桌面"-属性-屏幕保护程序选择即可。 -
Mac book pro解决屏幕闪烁黑屏问题
2018-07-04 09:25:31Mac Book Pro屏幕闪烁1、option+菜单栏电池 = 查看当前电池状态,确保电池没有问题2、可能是软件冲突造成的以下两个操作都要执行操作一:1、选取苹果菜单 >“关机”。2、等 Mac 关机后,按下内建键盘左侧的 ... -
5分钟搞定!一种非常简单的Android屏幕适配方案,成功入职字节跳动
2021-03-26 09:04:06前言 之前我有个学弟,应届毕业生,秋招拿了一些 offer,这几天非常纠结。 offer 要考虑的因素太多了,盲目地搜索了几天,网上各种各样的声音都有,收获不多。为此咨询我一下,面对这种情况应该如何选择,我相信这个... -
原生js实现小球在屏幕上自由移动,当遇到屏幕边缘时反弹
2021-01-08 12:43:563、当小球碰到屏幕边缘时怎么实现反弹 4、 如何实现多个小球 5、怎么实现小球的颜色及大小 关于第一步实现小球在桌面上移动的最大距离的思路 1、首先要获取桌面的宽度与高度,注意获取屏幕的宽度与高度需要封装一下... -
dogs-head-bounce:我创建了一个Python程序,该程序可以在屏幕上显示我的狗的头跳动
2021-04-19 02:11:36狗头弹跳 我创建了一个Python程序,该程序在屏幕上显示我的狗的头跳动。 我将在这里展示我是如何创建这个Pygame程序的。 制作起来非常简单容易。 png / gif文件必须位于程序的同一目录中。 -
android webView 页面滚动时屏幕闪烁问题
2019-01-09 18:11:15webView 加载页面后, 页面中有滚动部分时,导致屏幕局部闪烁问题 1. 关闭硬件加速 在Androidmanifest.xml中对应的Activity中添加如下设置,关闭硬件加速 android:hardwareAccelerated="false" 2.... -
教您电脑屏幕闪烁与屏幕抖动怎么办
2021-07-29 07:54:29最近看到一些朋友在贴吧上说,自己有的时候家里的电脑屏幕会突然抖动起来或者一直在闪烁,这样严重的影响到了电脑的使用,而且很多人都不知道遇见这种情况应该怎么办。那么在这里小编就来和大家说一说,以后遇见了... -
VB动画特效:随机跳动的小球
2021-05-09 01:12:47摘要:VB源码,图形处理,VB动画特效 使用VB编写一款动画特效,在图像上随机跳动的小球,智能判断屏幕边缘,当碰到边缘时自动回弹继续自由运动。类似小时候玩的撞球游戏效果,对此感兴趣的朋友你可以下载源代码研究。 -
别克君威轿车DVD图像上下跳动故障现象诊断与排除
2021-01-18 17:38:58规格,其播放时屏幕图像便会变成黑白的,雨且上下跳动。 改变电视机制式为PAL规格。其改变设定的具体操作如下。 ①先按下遥控器上的设定键(SET UP),进入设定菜单主页。 ②选择“通用设定”项,进人通用设定... -
文字跳动屏保.rar
2020-05-29 14:35:55java开发的文字跳动的屏幕保护程序代码,非应用程序,压缩包包含一个java文件,一个使用说明文件。 -
汽车电子中的别克君威轿车DVD图像上下跳动故障现象诊断与排除
2020-11-14 11:18:49规格,其播放时屏幕图像便会变成黑白的,雨且上下跳动。 改变电视机制式为PAL规格。其改变设定的具体操作如下。 ①先按下遥控器上的设定键(SET UP),进入设定菜单主页。 ②选择“通用设定”项,进人通用设定... -
html5使用canvas实现跟随光标跳动的火焰效果
2020-09-28 01:50:15本示例通过Javascript使用HTML5的canvas元素在屏幕上显示一个跳动的火焰,火焰会跟随光标跳动 -
红警维修—华为Nova7 SE泡水不开机,屏灯闪烁,5G手机开修了
2020-10-19 16:57:44在5G不断普及的同时,5G手机也是越来越受到人们的欢迎,刚刚发布的iPhone12也终于用上了5G,而且还可以根据实际情况智能切换,又不影响使用体验,还能省电。 不过今天这台5G手机就悲剧了,泡水里面的华为nova7SE... -
vue解决路由过渡动画抖动问题
2020-04-01 21:28:561.问题所在。 在缓慢的过渡,在切换到下一个路由(fade-enter-to)时,上一个路由(fade-leave-to)会占位使得下一个路由的位置下移,所以在快速过渡的情况才发生类似抖动的效果。 2.解决问题 只需要给fade-leave-... -
传媒行业报告:字节跳动专题
2021-03-19 23:52:58今日头条是北京字节跳动科技有限公司开发的一款基于数据挖掘的推荐引擎产 品,为用户推荐信息、提供连接人与信息的服务。由张一鸣于 2012 年 3 月创建, 2012 年 8 月发布第一个版本,今日头条在移动端引入个性化...