利用RiseNumberTextView组件简单实现数字滚动效果

最新推荐文章于 2024-08-12 04:06:28 发布
最新推荐文章于 2024-08-12 04:06:28 发布
阅读量374 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43825573/article/details/106719005
版权

利用RiseNumberTextView组件简单实现数字滚动效果

利用RiseNumberTextView组件简单实现数字滚动效果

一、简介

在日常开发需求中，很多时候需要向用户展现数字变化的动态效果，比如余额，正确率之类的变化，使得用户更直观地感受数字的变动，因此本文主要介绍如何使用开源组件RiseNumberTextView来实现类似支付宝界面余额变动的效果。

效果：
在这里插入图片描述

二、前期准备

  1. 下载jar包： https://github.com/downloads/JakeWharton/NineOldAndroids/nineoldandroids-2.4.0.jar
  2. 将下载好的jar包复制到app/libs目录下
    下载jar包
  3. 右键点击jar包，选择Add As Library，将该jar包导入库中
    导入库

三、编写组件

  1. 创建一个包存放组件的接口与类文件
    创建包
  2. RiseNumberBase 接口声明
    接口说明：
接口说明
start()开始滚动效果
withNumber(float number)显示浮点型数字
withNumber(int number)显示整型数字
setDuration(long duration)持续时间
package lib;

public interface RiseNumberBase {
    public void start();
    public RiseNumberTextView withNumber(float number);
    public RiseNumberTextView withNumber(int number);
    public RiseNumberTextView setDuration(long duration);
    public void setOnEnd(RiseNumberTextView.EndListener callback);
}
  1. RiseNumberTextView 接口实现，如果想修改数字滚动功能，可在下面的代码中修改
package lib;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

import com.nineoldandroids.animation.ValueAnimator;  //使用到刚才导入的jar包

import java.text.DecimalFormat;

/*RiseNumberTextView继承了TextView来实现接口RiseNumberBase*/
public class RiseNumberTextView extends TextView implements RiseNumberBase{

    private static final int STOPPED = 0;

    private static final int RUNNING = 1;

    private int mPlayingState = STOPPED;

    private float number;

    private float fromNumber;

    private long duration=1500;

    private int numberType=2;

    private DecimalFormat   fnum;

    private EndListener mEndListener=null;

    final static int[] sizeTable = { 9, 99, 999, 9999, 99999, 999999, 9999999,
            99999999, 999999999, Integer.MAX_VALUE };

    public RiseNumberTextView(Context context){
        super(context);
    }

    public RiseNumberTextView(Context context,AttributeSet attr){
        super(context,attr);
    }

    public RiseNumberTextView(Context context,AttributeSet attr,int defStyle)
    {
        super(context,attr,defStyle);
    }

    public interface EndListener {
        public void onEndFinish();
    }

	/*判断滚动状态*/
    public boolean isRunning() {  
        return (mPlayingState == RUNNING);
    }
    
	/*实现浮点型数字滚动*/
    private void runFloat(){
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(fromNumber, number);
        valueAnimator.setDuration(duration);

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {

                setText(fnum.format(Float.parseFloat(valueAnimator.getAnimatedValue().toString())));
                if (valueAnimator.getAnimatedFraction()>=1){
                    mPlayingState = STOPPED;
                    if (mEndListener!=null)
                    mEndListener.onEndFinish();
                }
            }


        });
        valueAnimator.start();
    }

	/*实现整数型数字滚动*/
    private void runInt(){
        ValueAnimator valueAnimator = ValueAnimator.ofInt((int)fromNumber, (int)number);
        valueAnimator.setDuration(duration);

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {

                setText(valueAnimator.getAnimatedValue().toString());
                if (valueAnimator.getAnimatedFraction()>=1){
                    mPlayingState = STOPPED;
                    if (mEndListener!=null)
                    mEndListener.onEndFinish();
                }
            }
        });
        valueAnimator.start();
    }
	
	/*判断整数型数字的位数*/
    static int sizeOfInt(int x) {
        for (int i = 0;; i++)
            if (x <= sizeTable[i])
                return i + 1;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        fnum=   new DecimalFormat("##0.00");
    }

	/*定义开始滚动*/
    @Override
    public void start() {

        if (!isRunning()) {
            mPlayingState = RUNNING;
            if (numberType==1)
                runInt();
            else
                runFloat();
        }
    }

	/*
		**
	这边定义了如何选择滚动效果的初始数字
	如果数字小于100，则初始数字为500
	如果数字大于1000，则初始数字为：显示数字-10^(显示数字的位数-2)
	*/
    @Override
    public RiseNumberTextView withNumber(float number) {

        this.number=number;
        numberType=2;
        if (number>1000){
            fromNumber=number-(float)Math.pow(10,sizeOfInt((int)number)-2);
        }else {
            fromNumber=number/2;
        }

        return this;
    }

    @Override
    public RiseNumberTextView withNumber(int number) {
        this.number=number;
        numberType=1;
        if (number>1000){
            fromNumber=number-(float)Math.pow(10,sizeOfInt((int)number)-2);
        }else {
            fromNumber=number/2;
        }

        return this;

    }

    @Override
    public RiseNumberTextView setDuration(long duration) {
        this.duration=duration;
        return this;
    }

    @Override
    public void setOnEnd(EndListener callback) {
        mEndListener=callback;
    }


}

四、组件编写完毕，开始使用

本示例模仿支付宝余额界面，通过点击充值与提现按钮使余额数字产生滚动效果。

  1. 在MainActivity中声明一个RiseNumberTextView组件，并设置两个按钮点击事件，使得点击按钮触发数字滚动
package com.hymn.rise;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

import lib.RiseNumberTextView;  //记得导入组件类

public class MainActivity extends AppCompatActivity {

    private RiseNumberTextView RNTextView;  //声明一个数字滚动组件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RNTextView=(RiseNumberTextView)findViewById(R.id.text);//给组件套上样式
		
		/* 设置按钮点击事件 */
        findViewById(R.id.chongzhi).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                init();
            }
        });


    	findViewById(R.id.tixian).setOnClickListener(new View.OnClickListener() {

        public void onClick(View w ) {
            init();
        }
    });

    init();
}

    private void init(){
        RNTextView.withNumber(99999).start();
    }
}
  1. 编写activity_main.xml,使用线性布局放置一个数字滚动组件与两个按钮
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_weight="2"
        android:background="#03A9F4"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="余额（元）"
            android:textColor="#CFCFCF"
            android:textSize="22sp" />

        <lib.RiseNumberTextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:textColor="#FFFFFF"
            android:textSize="48sp" />
    </LinearLayout>


    <TextView
        android:id="@+id/chongzhi"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_weight="0.5"
        android:background="#59AAAD"
        android:drawableLeft="@drawable/chong"
        android:gravity="center"
        android:text="充值"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/tixian"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_weight="0.5"
        android:gravity="center"
        android:drawableLeft="@drawable/chong"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:text="提现"
        android:background="#7EA0AF"/>

</LinearLayout>

参考

https://github.com/sd6352051/RiseNumber

作者：陈良俊
原文链接：

Hymn1226
关注
NumberRunningTextView(数字会滚动的TextView)
Chay_Chan的博客
04-16 3万+
NumberRunningTextView介绍  NumberRunningTextView是一个自带数字滚动动画的TextView,通过使用setContent(String str)方法，传入相应的金额数字字符串（如”1354.00”），或者数字的字符串（如200）,当页面初始化完成的时候，就可以看到数字滚动的效果，和支付宝中进入余额宝界面，显示余额滚动的效果类似，具体的效果如下：使用在布局文件
设置带滚动条的TextView
Hello_MissのHome
04-26 2628
<br />本来是想做一个显示文字信息的，当文字很多时View的高度不能超过一个固定的值，当文字很少时View的高度小于那个固定值时，按View的高度显示。因为ScrollView没有maxHeight，无法满足需求，只好另找方法了。<br /> <br />View本身是可以设置ScrollBar，这样就不一定需要依赖ScrollView了。TextView有个属性maxLine，这样也就满足了需求了，只要设置一个TextView带ScrollBar的，然后设置maxLine就可以了。<br /> <br
Android 数字翻滚增加
最新发布
weixin_40889024的博客
08-12 23
Android 数字翻滚增加：一项创新的用户界面设计 在智能手机应用程序中，用户体验（UX）是至关重要的。在众多UI效果中，数字翻滚这一效果凭借其生动活泼的视觉效果，成为了越来越多开发者的选择。本文将探讨如何在Android应用程序中实现数字翻滚效果，并附上相关代码示例以及图示，让我们更好地理解这一技术。 什么是数字翻滚 ...
android实现TextView多行文本滚动
我思故我在
10-16 1073
Android中我们为了实现文本的滚动可以在ScrollView中嵌入一个TextView，其实TextView自己也可以实现多行滚动的，毕竟ScrollView必须只能有一个直接的子类布局。只要在layout中简单设置几个属性就可以轻松实现 [code="java"] android:maxLines="15" android:textColor...
利用RiseNumberTextView组件简单实现数字滚动效果，android面试试题
m0_66264938的博客
01-23 413
} public RiseNumberTextView(Context context,AttributeSet attr){ super(context,attr); } public RiseNumberTextView(Context context,AttributeSet attr,int defStyle) { super(context,attr,defStyle); } public interface EndListener { public void onEndFinish(); } /
Android 仿余额宝数字跳动动画效果完整代码
08-28
Android 仿余额宝数字跳动动画效果完整代码是 Android 开发中常见的一种动画效果，它可以实现数字跳动的动画效果，例如余额宝的数字跳动动画效果。这种动画效果可以通过自定义控件和 ValueAnimator 来实现。 在 ...
闪动、上升的数字（仿支付宝）(两个效果的demo)
08-07
2. **RunningTextView**：这个组件则模拟了数字连续滚动的效果，常见于显示实时数据更新，如跑马灯式的数字滚动。它的实现可能包括： - 循环滚动：使用一个较大的字符串，包含数字的多次重复，通过改变TextView的...
自定义View实现自动数字增长的TextView
张亚运的专栏
05-14 3309
用过理财工具的对软件里会自动增长的TextView都不会陌生，这种动效会让你有一种money无限多的赶脚，这种特效可不可以模仿呢？今天通过一个自定义的TextView来模仿一下。首先定义一个接口，制定一下规则：public interface IRaiseNumber { void start();    void setFloat(float fromNum, float toNum);
Rise Number TextView
06-08
Rise Number TextView
Android代码-数字滚动效果 RollingText 可高度定制，数字滚动效果
08-06
RollingTextView 中文版README Features easy to use, API is similar to TextView, and the setText method can be animated with up and down rolling support XML to set up common properties such as android:textSize/ android:textColor/ android:textStyle highly customizable to support animation effects of any single character Animation Strategy Different rolling effects can be achieved by setting different animation strategies > The default animation is to roll down when small characters change t
Android属性动画实现TextView类似支付宝余额数字滚动
04-21
项目中的小需求,完成类似于支付宝余额的数字滚动效果,找了网上的一个小demo,再加上郭婶的关于属性动画的文章,整理一部分代码分享给有需要的人.
Android数字上下滚动（积分效果）
08-11
Android数字自动滚动效果，修复之前报错不能运行的情况
Android 水平滚动数字选择器，和日历滚动一样
09-23
该Android水平数字滚动器，完全自定义，继承view,在界面中可以左右滚动一行很长的数据，可以并且选中屏幕中间的数字，中间的数字最大最大，两边数字变淡变小，可以根据个人需要调整字体和颜色，在实际项目开发中可以直接用，很美观，摸索很久搞出来的!
安卓 Textview 简易数字跳动效果和上下滚动切换效果
Mr_Liangxiaobai的博客
03-16 2221
安卓 TextView 简易实现数字跳动的动画效果从一个数加或者减到另一个数，不断跳动显示。上下整体滚动切换（动画效果可自定义，比如左右切换或者翻转等）
android数字滚动动画,Android TextView自定义数字滚动动画
weixin_42298802的博客
05-25 745
背景在开发需求当中，当有总收益、总用户数等数字要显示时，为了更好的给用户提供展示效果，往往会想加入炫酷的数字滚动动画，使呆板平静的数字变得灵活起来，给人一种增值的直观感受。简介NumberRollingView是一个自定义的自带数字滚动动画的TextView，通过使用setContent(String str)方法进行数字字符串设置，传入相应的金额数字字符串(如"9686.86")或者整数数字字符...
android的TextView实现滚动效果
肖潇不写代码
07-25 1170
用ScrollView和重写TextView这两种方式都很麻烦，另外一种简单的方式如下: 在你的布局的xml文件中TextView加上两个属性： android:maxLines = "30" //最大显示行数，超过了就滚动 android:scrollbars = "vertical" //方向 然后在你的java代码中用： 你的TextView变量.setMovementMethod(new ScrollingMovementMethod()) ...
Android实现余额宝数字跳动动画详解及代码示例
本文档详细介绍了如何在Android平台上实现一个仿照余额宝的数字跳动动画效果。首先，作者强调了视觉呈现的重要性，认为直观的示例对于理解和学习这种动画至关重要。为了达到这个效果，开发者需要遵循以下步骤： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值