Android自定义View之数字自动增长

第一次写文，请多指教，有何问题及改进建议都可以告诉我-.-

Idea来自金山词霸App的单词计数，下面先放图

autoNumber.gif

如上图，就是，下面开始进入自定义View

自定义View步骤

1. 自定义属性

2. 生成构造方法

3. onMeasure（可选）

4. onSizeChanged（可选）

5. onLayout（可选）

6. onDraw

我这里只重写了onSizeChanged，onMeasure和onLayout没有重写

1.自定义属性

values里面新建attrs

<resources>
    <declare-styleable name="AutoNumberView">
        //变化速度
        <attr name="auto_speed" format="integer"/>
        //边框颜色
        <attr name="stroke_color" format="color"/>
        //数字颜色
        <attr name="text_color" format="color"/>
    </declare-styleable>
</resources>

2.生成构造方法

    public AutoNumberView(Context context) {
        super(context);
    }

    public AutoNumberView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //自定义属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AutoNumberView);

        strokeColor = typedArray.getColor(R.styleable.AutoNumberView_stroke_color, context.getResources().getColor(R.color.colorPrimaryDark));
        autoSpeed = typedArray.getInteger(R.styleable.AutoNumberView_auto_speed, 1000);
        textColor = typedArray.getColor(R.styleable.AutoNumberView_text_color, context.getResources().getColor(R.color.black));
        typedArray.recycle();
        init();
        initAnimation();
    }

初始化动画和画笔

private void init() {
        paint = new Paint();
        paint.setColor(strokeColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setAntiAlias(true);

        textPaint = new Paint();
        textPaint.setColor(textColor);
        textPaint.setStyle(Paint.Style.STROKE);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setAntiAlias(true);
    }

    private void initAnimation() {
        //根据属性动画值重绘数字
        valueAnimator = ValueAnimator.ofFloat(0,1).setDuration(autoSpeed);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                value = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
    }

3.onSizeChanged

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        int min = Math.min(w, h);
        //中心点X，Y
        centerX = w / 2;
        centerY = h / 2;

        radius = (int) (min * 0.8f / 2);
        textPaint.setTextSize(radius / 2);
        //计算数字位于中心点的矩形
        targetRect = new Rect(-min / 2, -min / 2, min / 2, min / 2);
        Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
        //中线
        baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
    }

4.onDraw

    @Override
    protected void onDraw(Canvas canvas) {
        //移动中心点
        canvas.translate(centerX, centerY);
        //边框
        canvas.drawCircle(0, 0, radius, paint);
        //数字
        canvas.drawText(String.valueOf((int)(value * number)), targetRect.centerX(), baseline, textPaint);
    }

5.使用方法

public class MainActivity extends AppCompatActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        //设置数值
        autoNumberView.get(0).setNumber((int) (Math.random() * 500 + 1000));
        autoNumberView.get(1).setNumber((int) (Math.random() * 500 + 1000));
        autoNumberView.get(2).setNumber((int) (Math.random() * 500 + 1000));
        showLoading.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                //启动
                for (AutoNumberView auto : autoNumberView) {
                    auto.startAnimation();
                }
            }
        });

        numberValue.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //设置数值
                value.setText("设置值:" + progress + "* Math.random() * 1000");
                for (AutoNumberView auto : autoNumberView) {
                    auto.setNumber((int) ((Math.random() * 1000) * progress));
                }
            }
        });

        autoSpeed.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //设置速度
                speed.setText("设置速度:" + progress + "* 100");
                for (AutoNumberView auto : autoNumberView) {
                    auto.setAutoSpeed(100 * progress);
                }
            }
        });
    }
}

最后全部代码地址(GitHub - alaidev/AutoNumber)