Android自定义控件仿余额宝收益数字变动效果

之前一直是看别人的一些博客，或者好的代码，然后自己收藏。自己用到后才记得拿来用或者进行修改，在别人的轮子上再进行改。现在开始尝试自己开始写些东西。不做伸手党，从我做起。今天第一天来做个简单的控件。很简单的一个效果，支付宝余额宝界面进入时，我们会看到余额宝金额会有一个从0开始变动直到最大值的效果，今天来仿它实现。

一、预期效果和分析

余额宝界面截图

我们要仿的就是上图中的进入页面时三个数字的逐渐增长的效果。话不多说，我们开始分析。
首先该控件就是用于显示一个文本内容，本质就是一个TextView，所以我们实现的自定义控件就继承TextView；在其基础上，我们只要每隔一段时间，更新TextView的显示的内容就可以达到变动的效果；每显示一次，我们要显示的数值都要在前一次显示的基础上加上一个值，为了方便，这个值可以取一个平均值，用总数值除我们要显示的次数获取得到，基本的分析思路就是上面所述。

二、代码实现分析

• 自定义控件一般我们要实现两个构造函数，分别是一个参数和两个参数。在代码中实例化时使用一个参数的即可；在布局中引用时因为会用到最基本的layout_width和layout_height两个属性，会调用两个参数的构造函数。
• 基于上面的分析，也为了我们方便操作。需要定义一些常量和变量。

private static final int COUNT = 80;//表示数字共变化多少次
private int mTextColor = 0xF3E5C9;//我们给控件一个默认的显示颜色
private float mValue = 0.0f;//我们要显示的数字内容 
private float mAverage = 0.0f;//一个平均数值；使我们每次加的数值都是一个平均值
private int mCount = 0;//当前文本内容变化的次数

• 考虑到文本内容每隔一段时间就会变化，最基本的放在一个线程中，每隔一段时间显示一次文本内容，就可以实现了。这里有个需要注意的地方就是设置显示内容属于操作UI线程，我们新开启的线程内是不能操作UI线程的，需要用到post()方法来操作文本内容。

while (mCount < COUNT) {    
    mCount++;    
    mValue += mAverage;    
    try {        
        Thread.sleep(15);    
    } catch (InterruptedException e) {        
        e.printStackTrace();    
    }    
    post(new Runnable() {        
          @Override        
          public void run() {            
                setText(String.format("%.2f", mValue));        
          }    
    });
}

当内容变换次数小于变换总次数时，显示次数增加1，执行内容变换。为了有延时效果，第一次进来就停留15毫秒；然后post()方法在UI线程中操作文本内容变化。

• 为了方便和突出特点，让自定义控件直接实现Runnable接口。使用格式如下：

YuEView yuEView = new YuEView(this);
yuEView.setValue(150.876f);
yuEView.setTextSize(50);
yuEView.setTextColor(Color.YELLOW);
rl.addView(yuEView);
new Thread(yuEView).start();//突出此自定义控件特点的使用特征

• 另外一点，因为处理的是数字，所以会涉及一个小数点后多少位的问题。我看过余额宝的那个界面，既可以保留两位，也可以保留到4位。这里我自己在实现的时候，简单的就保留到了小数点后两位。如果要实现其他位数的，应该特殊处理。这一点目前处理的不是太好。

三、自定义TextView的实现代码：YuEView

public class YuEView extends TextView implements Runnable{    
      private static final int COUNT = 80;    
      private int mTextColor = 0xF3E5C9;
      private float mValue = 0.0f;    
      private float mAverage = 0.0f;    
      private int mCount = 0;    
      public YuEView(Context context) {        
             this(context, null);    
      }    
      public YuEView(Context context, AttributeSet attrs) {
            super(context, attrs);        
            mAverage = mValue / COUNT;
            setTextColor(mTextColor);    
            setText(String.valueOf(0.0f));    
      }    
      public double getValue() {        
            return mValue;    
      }    
      public void setValue(float mValue) {        
            mAverage = mValue / COUNT;    
      }    
      public int getTextColor() {        
            return mTextColor;    
      }    
      public void setTextColor(int mTextColor) {
            this.mTextColor = mTextColor;    
       }    
      @Override    
      public void run() {        
            while (mCount < COUNT) {            
                  mCount++;            
                  mValue += mAverage;            
                  try {                
                          Thread.sleep(15);            
                  } catch (InterruptedException e) {  
                          e.printStackTrace();            
                  }            
                  post(new Runnable() {                
                          @Override                
                          public void run() {
                                  setText(String.format("%.2f", mValue));
                          }            
                  });        
           }    
      }
}

四、控件效果图

目前还不会弄动态图片，先放一张静态图片充当一下吧。赶兴趣的可以自己实现，或者把代码拷贝直接能用。

运行效果图

扫描下方的二维码，加入关注，所发布的博客文章会及时发布到公众号，方便及时查看，加入我吧，一起进步。

喜欢而非坚持