Android TextView自定义数字滚动动画

背景

在开发需求当中,当有总收益、总用户数等数字要显示时,为了更好的给用户提供展示效果,往往会想加入炫酷的数字滚动动画,使呆板平静的数字变得灵活起来,给人一种增值的直观感受。

简介

NumberRollingView是一个自定义的自带数字滚动动画的TextView,通过使用setContent(String str)方法进行数字字符串设置,传入相应的金额数字字符串(如"9686.86")或者整数数字字符串(如"968"),设置的数字必须是正数。当显示页面初始化完成的过程中,就可以看到数字滚动的效果了。

效果图:

使用

1.在attr.xml中配置NumberRollingView的自定义属性

<declare-styleable name="NumberRollingView"> <!--帧数--> <attr name="frameNum" format="integer"></attr> <!--内容的格式--> <attr name="textType"> <enum name="money" value="0"></enum> <enum name="num" value="1"></enum> </attr> <!--是否设置每三位数字一个逗号--> <attr name="useCommaFormat" format="boolean"></attr> <!--是否当内容改变的时候使用动画,反之则不使用动画--> <attr name="runWhenChange" format="boolean"></attr> </declare-styleable>

frameNum:动画的帧数,默认为30帧;
textType:内容的格式,有money(金额、两位小数)和num(整数)两种格式,默认为0(金额格式);
useCommaFormat:是否设置每三位数字一个逗号,默认为true(设置逗号显示);
runWhenChange:是否当内容改变的时候使用动画,反之则不使用动画,默认为true(内容改变时使用动画);

2.在XML布局文件中引用View

<com.wiggins.digitalchange.widget.NumberRollingView android:id="@+id/tv_money" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0.00" android:textColor="@color/white" android:textSize="@dimen/font_max" android:textStyle="bold" /> <com.wiggins.digitalchange.widget.NumberRollingView android:id="@+id/tv_num" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0" android:textColor="@color/white" android:textSize="@dimen/font_max" android:textStyle="bold" app:textType="num" />

前者是金额数字View,后者是整数数字View。

3.Java文件中调用

tvMoney.setContent("9686.86"); tvNum.setContent("9686");

4.取消数字的自动格式化(设置每三位数字一个逗号)

默认情况下显示的数字经过了格式化处理,设置每三位数字添加一个逗号分隔,这使得数字看起来清晰明了,不会显得臃肿繁杂。如果不想将数字进行格式化处理,可以在布局文件中将useCommaFormat属性设置为false,或者在代码中设置setUseCommaFormat(boolean useCommaFormat)为false,这样显示的数字就不会是带有逗号了。

5.设置无论内容是否改变都要执行滚动动画

默认情况下NumberRollingView会自动判断传入的内容是否有变化,当内容发生变化时执行数字滚动动画,内容未变时不执行数字滚动动画。如果想无论内容是否有变化都要执行滚动动画的话,可以在布局文件中将runWhenChange属性设置为false,或者在代码中设置setRunWhenChange(boolean runWhenChange)为false,这样无论内容是否有变化都会执行滚动动画。

6.设置动画帧数

默认情况下数字滚动动画帧数为30帧,如果需要修改动画帧数,可根据实际需要在在布局文件中将frameNum属性设置为自己想要的帧数,或者在代码中设置setFrameNum(int frameNum)为自己想要的帧数即可。

7.数字字符串格式化(每三位数字添加一个逗号)

/** * @param str 字符串只能为两位小数或者整数 * @param isDecimal 是否是小数 * @Description 格式化字符串,每三位用逗号隔开 */ public static String addComma(String str, boolean isDecimal) { //先将字符串颠倒顺序 str = new StringBuilder(str).reverse().toString(); if (str.equals("0")) { return str; } String str2 = ""; for (int i = 0; i < str.length(); i++) { if (i * 3 + 3 > str.length()) { str2 += str.substring(i * 3, str.length()); break; } str2 += str.substring(i * 3, i * 3 + 3) + ","; } if (str2.endsWith(",")) { str2 = str2.substring(0, str2.length() - 1); } //最后再将顺序反转过来 String temp = new StringBuilder(str2).reverse().toString(); if (isDecimal) { //去掉最后的"," return temp.substring(0, temp.lastIndexOf(",")) + temp.substring(temp.lastIndexOf(",") + 1, temp.length()); } else { return temp; } }

8.开始金额数字动画的方法

如果传入的金额中包含格式化的字符如","或"-"符号,就将符号去除;将传入的数字进行格式转换,转换为Double类型的金额格式,如果发生转换异常则直接进行显示;同时判断传入的数字大小,如果为0则直接显示,若不为0则设置每帧间隔的大小,发送Message消息给Handler进行内容的更新。

/** * @Description 开始金额数字动画的方法 */ public void startMoneyAnim(String moneyStr) { // 如果传入的数字已经格式化了,则将包含的符号去除 String money = moneyStr.replace(",", "").replace("-", ""); try { finalMoneyNum = Double.parseDouble(money); if (finalMoneyNum == 0) { // 如果传入的数字为0则直接使用setText()进行显示 NumberRollingView.this.setText(moneyStr); return; } nowMoneyNum = 0; threadPool.execute(new Runnable() { @Override public void run() { Message msg = handler.obtainMessage(); // 将传入的数字除以帧数,得到每帧间隔的大小 double size = finalMoneyNum / frameNum; msg.what = MONEY_TYPE; // 如果每帧的间隔小于0.01,则设置间隔为0.01 msg.obj = size < 0.01 ? 0.01 : size; // 发送消息改变UI handler.sendMessage(msg); } }); } catch (NumberFormatException e) { e.printStackTrace(); //如果转换Double失败则直接用setText() NumberRollingView.this.setText(moneyStr); } }

9.开始数字动画的方法

同上述金额数字一般,先进行格式化符号去除,然后进行类型转换,将其转换为Integer类型的整数格式,如果发生转换异常则直接进行显示;为了更加人性化,我们将传入的数字与帧数作了比较,如果数值小于帧数就直接显示,当然你想不管数字大小都能进行动画展示,只需将下面的帧数间隔的获取稍加改造即可;若大于等于设置的帧数则设置每帧间隔的大小,发送Message消息给Handler进行内容的更新。

/** * @Description 开始数字动画的方法 */ public void startNumAnim(String numStr) { // 如果传入的数字已经格式化了,则将包含的符号去除 String num = numStr.replace(",", "").replace("-", ""); try { finalNum = Integer.parseInt(num); if (finalNum < frameNum) { // 如果传入的数字比帧数小,则直接使用setText() NumberRollingView.this.setText(numStr); return; } // 默认从0开始动画 nowNum = 0; threadPool.execute(new Runnable() { @Override public void run() { Message msg = handler.obtainMessage(); // 将传入的数字除以帧数,得到每帧间隔的大小 int temp = finalNum / frameNum; msg.what = NUM_TYPE; msg.obj = temp; // 发送消息改变UI handler.sendMessage(msg); } }); } catch (NumberFormatException e) { e.printStackTrace(); //如果转换Integer失败则直接用setText NumberRollingView.this.setText(numStr); } }

项目地址 :传送门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-09-21 18:34:24

Android TextView自定义数字滚动动画的相关文章

Android TextView实现垂直滚动效果的方法_Android

本文实例讲述了Android TextView实现垂直滚动效果的方法.分享给大家供大家参考,具体如下: 在TextView中,如果文本很长,可能需要实现垂直滚动显示文本的效果.这里需要在XML布局文件中为TextView设置如下几个属性. Android:scrollbars="vertical" android:scrollbarStyle="X" 其中X为outsideOverlay或insideOverlay. android:scrollbarFadeDur

Android TextView实现垂直滚动效果的方法

本文实例讲述了Android TextView实现垂直滚动效果的方法.分享给大家供大家参考,具体如下: 在TextView中,如果文本很长,可能需要实现垂直滚动显示文本的效果.这里需要在XML布局文件中为TextView设置如下几个属性. Android:scrollbars="vertical" android:scrollbarStyle="X" 其中X为outsideOverlay或insideOverlay. android:scrollbarFadeDur

Android自定义带增长动画和点击弹窗提示效果的柱状图DEMO_Android

项目中最近用到各种图表,本来打算用第三方的,例如MPAndroid,这是一个十分强大的图表库,应用起来十分方便,但是最终发现和设计不太一样,没办法,只能自己写了.今天将写好的柱状图的demo贴在这,该柱状图可根据数据的功能有一下几点:      1. 根据数据的多少,动态的绘制柱状图柱子的条数:      2. 柱状图每条柱子的绘制都有动态的动画效果:      3. 每条柱子有点击事件,点击时弹出提示框,显示相关信息,规定时间后,弹窗自动消失.      好了,先上演示图:      下边贴出

Android中TextView实现垂直滚动和上下滚动效果

布局里面就是两个自定义的TextView,上面的左右滑动的是AutoHorizontalScrollTextView; 下面上下滚动的是AutoVerticalScrollTextView; 上面左右滑动的非常好实现,直接把AutoHorizontalScrollTextView复制到项目中,复制全类名到布局文件中,和系统TextView一样,只需设置文本其他什么都不用设置: 下面垂直滚动的AutoVerticalScrollTextView相比AutoHorizontalScrollTextV

Android中自定义PopupWindow实现弹出框并带有动画效果_Android

使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { public Lost lost; public void onLost(Lost lost){ this.lost = lost; } private View conentView; public View getConentView() { return conentView; } public L

android PullToRrefresh自定义下拉刷新动画

参考自 http://blog.csdn.net/wwj_748/article/details/42523611 首先,下载著名的刷新框架https://github.com/chrisbanes/Android-PullToRefresh,其中simple为demo,library和extras作为项目包导入到simple中 一,定义刷新动画的layout 在library下的com.handmark.pulltorefresh.library.internal包中的FlipLoadingL

Android TextView显示Html类解析的网页和图片及自定义标签用法示例_Android

本文实例讲述了Android TextView显示Html类解析的网页和图片及自定义标签.分享给大家供大家参考,具体如下: Android系统显示HTML网页的最佳控件为WebView,有时候为了满足特定需求,需要在TextView中显示HTML网页.图片及解析自定义标签. 1.TextView显示Html类解析的网页 CharSequence richText = Html.fromHtml("<strong>萝卜白菜的博客</strong>--<a href='

Android仿淘宝头条基于TextView实现上下滚动通知效果

最近有个项目需要实现通知栏的上下滚动效果,仿淘宝头条的那种. 我从网上看了一些代码,把完整的效果做了出来.如图所示: 具体代码片段如下: 1.在res文件夹下新建anmin文件夹,在这个文件夹里创建两个文件 (1).anim_marquee_in.xml进入时动画 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/ap

Android中自定义PopupWindow实现弹出框并带有动画效果

使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { public Lost lost; public void onLost(Lost lost){ this.lost = lost; } private View conentView; public View getConentView() { return conentView; } public L