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

摘要： 第一次寫文，請多指教，有何問題及改進建議都可以告訴我-.- Idea來自金山詞霸App的單詞計數，下面先放圖 autoNumber.gif 如上圖，就是，下面開始進入自定義View 自定義View步驟 1. 自定義屬性 2. 生成...

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

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

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

最後全部程式碼地址( ofollow,noindex">GitHub/">GitHub - alaidev/AutoNumber )