自定义View实现自动数字增长的TextView

Posted 2022-12-14 yayun0516

 

用过理财工具的对软件里会自动增长的TextView都不会陌生，这种动效会让你有一种money无限多的赶脚，这种特效可不可以模仿呢？今天通过一个自定义的TextView来模仿一下。

首先定义一个接口，制定一下规则：

public interface IRaiseNumber 

    void start();
    void setFloat(float fromNum, float toNum);
    void setInteger(int fromNum, int toNum);
    void setDuration(long duration);
    void setOnEndListener(RiseNumberTextView.EndListener callback);

自定义TextView代码如下：

public class RiseNumberTextView extends TextView implements IRaiseNumber 

    private static final int STOPPED = 0;
    private static final int RUNNING = 1;
    private int mPlayingState = STOPPED;
    private float toNumber;
    private float fromNumber;
    private long duration = 1500;
    private int numberType = 2;
    private DecimalFormat  fnum = new DecimalFormat("##0.00");
    private EndListener mEndListener = null;

    public RiseNumberTextView(Context context) 
        this(context, null);
    

    public RiseNumberTextView(Context context, AttributeSet attr) 
        super(context, attr);
        setTextColor(context.getResources().getColor(R.color.rise_number_text_color_red));
        setTextSize(30);
    

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

    public boolean isRunning() 
        //返回当前运行状态
        return (mPlayingState == RUNNING);
    

    private void runFloat() 
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(fromNumber, toNumber);
        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) 
                            //大于等于1时认为动画运行结束
                            mPlayingState = STOPPED;
                            if (mEndListener != null)
                                mEndListener.onEndFinish();
                        
                    

                );
        valueAnimator.start();
    

    private void runInt() 
        ValueAnimator valueAnimator = ValueAnimator.ofInt((int) fromNumber,
                (int) toNumber);
        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();
    

    @Override
    public void start() 
        if (!isRunning()) 
            mPlayingState = RUNNING;
            if (numberType == 1)
                runInt();
            else
                runFloat();
        
    

    @Override
    public void setFloat(float fromNum, float toNum) 
        toNumber = toNum;
        numberType = 2;
        fromNumber = fromNum;
    

    @Override
    public void setInteger(int fromNum, int toNum) 
        toNumber = toNum;
        numberType = 1;
        fromNumber = fromNum;
    

    @Override
    public void setDuration(long duration) 
        this.duration = duration;
    

    @Override
    public void setOnEndListener(EndListener callback) 
        mEndListener = callback;
    

    public interface EndListener 
        void onEndFinish();
    

在布局文件中引用这个自定义个View，如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ad.countviewdemo.RiseNumberTextView
        android:id="@+id/risenumber_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/risenumber_textview"
        android:text="开始" />
</RelativeLayout>

最后在MainActivity.java中控制这个TextView，如下：

public class MainActivity extends Activity 
    private RiseNumberTextView rnTextView;

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

    private void setupViews() 
        rnTextView = (RiseNumberTextView)
                findViewById(R.id.risenumber_textview);
        // 设置数据
        rnTextView.setInteger(888, 1666);
        // 设置动画播放时间
        rnTextView.setDuration(2000);
        // 监听动画播放结束
        rnTextView.setOnEndListener(new RiseNumberTextView.EndListener() 

            @Override
            public void onEndFinish() 
                Toast.makeText(MainActivity.this, "数据增长完毕...",
                        Toast.LENGTH_SHORT).show();
            
        );

        Button btn = (Button) findViewById(R.id.button1);
        btn.setOnClickListener(new View.OnClickListener() 

            @Override
            public void onClick(View v) 
                if (rnTextView.isRunning()) 
                    Toast.makeText(MainActivity.this, 
                            "数字还没增长完，请稍候尝试...", 
                            Toast.LENGTH_SHORT).show();
                 else 
                    // 开始播放动画
                    rnTextView.start();
                
            
        );
    

 

运行实例如下：

 

对于Float类型的，只需调用setFloat方法，如下：