Android自定义ViewAndroid 自定义view移动开发小水吧

仿余额宝数字滚动增长的效果实现

2017-03-17  本文已影响271人  贾亦真亦贾

这个已经是被大家做烂了的效果了,之所以我自己做这个效果而不是直接从网上拷贝一个来用,主要是因为网上的工具不太符合我的要求,大部分网友写的工具都不可以带单位的,只是数字方面的增长效果,而我的APP中需要带上单位,比如公里、升之类的,与其改人家的源码不如自己写一个了。
先看效果图:

1.gif

Android中的动画

这里用到了属性动画,Android中的动画主要分为三大类,分别是视图动画和属性动画。
视图动画分为Tween Animation(补间动画)和Frame Animation(逐帧动画)
属性动画分为ValueAnimator 和 ObjectAnimator;

这里一定要注意一下各种动画引入时Android的版本号,否则动画不会启用,视图动画是API Level 1就引入的,所以支持所有Android的版本,而属性动画是API Level 11引入的,即Android 3.0才开始有属性动画相关的API,故而在使用属性动画时一定要判断API的版本,避免一些不必要的Bug.

实现思路

整个思路很简单,在使用这个组件的过程中有几个点是要考虑进去的,第一,可以是整数类型也可以是浮点型的数字,所以这里要做标识区分开,第二,可以加入单位(核心需求),第三,可以开启是否四舍五入,比如需要整数类型的时候,而传入的数字是浮点型,这时会自动把传入的浮点型转化为整数类型,这里就要考虑四舍五入的问题了。

代码实现

下面来看是如何实现的
实现类:


import android.animation.ValueAnimator;
import android.util.Log;
import android.view.animation.AccelerateInterpolator;
import android.widget.TextView;

/**
 * 类描述: 创建人:贾真
 * 创建时间:2017/1/23 15:44 
 */
public class AutoIncrementUtil {

   public static final String FLOATTYPE="FloatType";
    public static final String INTTYPE="IntType";

    public static void startAnimation(String type,final TextView tvView,float floatValue
        ,boolean isRoundUp,final String danwei,int duration){
        ValueAnimator animator=null;
        if(type.equals(FLOATTYPE)){
              animator=ValueAnimator.ofFloat(0,floatValue);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    float curValue = (float)valueAnimator.getAnimatedValue();
                    Log.e("curValue ",curValue+"");
                    tvView.setText(NumUtil.FormatFloat(curValue)+danwei);
                }
            });
        }else if(type.equals(INTTYPE)){
            String targetValueString =NumUtil.FormatRoundUp(isRoundUp,floatValue);
            animator=ValueAnimator.ofInt(0,Integer.parseInt(targetValueString));
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    int curValue = (int)valueAnimator.getAnimatedValue();
                    tvView.setText(curValue+danwei);
                }
            });
        }
        animator.setDuration(duration);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.start();
    }

}

数字转化工具类:

import java.text.DecimalFormat;


public class NumUtil {

    private NumUtil(){


    }

    public static String FormatFloat(float value){
        DecimalFormat df = new DecimalFormat("0.00");
        return df.format(value);
    }
    public static String FormatRoundUp(boolean isRoundUp,float value){
        DecimalFormat df;
        if(isRoundUp){
            df = new DecimalFormat("######0"); //四色五入转换成整数

            return df.format(value);
        }else{
            Float f= new Float(value);
            int i=f.intValue();
            return String.valueOf(i);
        }
    }
}

如何使用:

  AutoIncrementUtil.startAnimation(AutoIncrementUtil.INTTYPE,NumView,153261.93f,false,"公里",1500);

应该说是非常简单了,主要用到了属性动画的ValueAnimator的两个方法,ofInt和ofFloat,剩下的都是按部就班的调用相关的方法即可,大家稍微阅读一下源码就应该懂了。

上一篇下一篇

猜你喜欢

热点阅读