之前一直是看别人的一些博客，或者好的代码，然后自己收藏。自己用到后才记得拿来用或者进行修改，在别人的轮子上再进行改。现在开始尝试自己开始写些东西。不做伸手党，从我做起。今天第一天来做个简单的控件。很简单的一个效果，支付宝余额宝界面进入时，我们会看到余额宝金额会有一个从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));
}
});
}
}
}
四、控件效果图
目前还不会弄动态图片，先放一张静态图片充当一下吧。赶兴趣的可以自己实现，或者把代码拷贝直接能用。
运行效果图
扫描下方的二维码，加入关注，所发布的博客文章会及时发布到公众号，方便及时查看，加入我吧，一起进步。
喜欢而非坚持
网友评论