Android自定義View之數字自動增長

第一次寫博文，請多指教，有何問題及改進建議都可以告訴我-.-

Idea來自金山詞霸App的單詞計數，下面先放圖

如上圖，就是，下面開始進入自定義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;
    }
           

關于drawText居中

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 {

    @BindView(R.id.showLoading)
    Button showLoading;

    @BindViews({R.id.auto_number, R.id.auto_number1, R.id.auto_number2})
    List<AutoNumberView> autoNumberView;

    @BindView(R.id.number_value)
    SeekBar numberValue;

    @BindView(R.id.auto_speed)
    SeekBar autoSpeed;

    @BindView(R.id.value)
    TextView value;

    @BindView(R.id.speed)
    TextView speed;

    @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));
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        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);
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}
           

最後完整代碼位址