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

 

用过理财工具的对软件里会自动增长的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"?>
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

            android:id="@+id/risenumber_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

最后在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方法，如下：