最近在學值動畫的時候耐床,一直感覺學得差不多了澜公,但自己感覺又下不了手冕末,所以自己就從最簡單的做起萍歉,寫了個帶數(shù)字的ProgressBar。
從圖上面看栓霜,其實就幾個部分組成的:最外層是一個圓翠桦,還有帶進度的圓弧,中間帶數(shù)字的進度胳蛮。
思路解析:
這里的進度條按照兩類來走销凑,第一類是按照圖上第一個進度條來顯示的,圓弧的顏色是一成不變的仅炊,而且顏色的比例也是按照進度來繪制的斗幼。第二類是按照圖上第二個進度條來顯示的,圓弧的顏色是通過一個顏色集合來不斷地變動的抚垄,而且這個弧度的差值永遠是90度蜕窿,不斷改變弧度的起點和終點,所以看到的效果就是弧度一直在圈上跑步一樣呆馁。中間的數(shù)字就是由顏色的值動畫和縮放動畫組成的桐经,所以圖一和圖二看到的數(shù)字一直有顏色的改變和縮放的效果,是不是經(jīng)過這么一說浙滤,更一目了然了呢阴挣。
使用:
<declare-styleable name="CircleProgressBarView">
<!--當前的進度-->
<attr name="number_progress" format="integer" />
<!--外環(huán)的寬度-->
<attr name="border_width" format="dimension" />
<!--未達到進度的外環(huán)顏色-->
<attr name="unreached_color" format="color" />
<!--達到進度的外環(huán)顏色-->
<attr name="reached_color" format="color" />
<!--中間數(shù)字的顏色-->
<attr name="number_corlor" format="color" />
<!--中間數(shù)字的大小-->
<attr name="number_size" format="dimension" />
<!--如果這里是true的話,外環(huán)就用顏色數(shù)組來繪制了-->
<attr name="isColorful" format="boolean" />
</declare-styleable>
屬性也就定義了那么多纺腊,如果你覺得還有需要添加那些屬性或是有些改動可以直接回復我畔咧。可以在xml文件中定義這些屬性的值揖膜,你也可以通過代碼來設置這些屬性:
/**
* 給中間的數(shù)字進度設置顏色
* @param numberColor
*/
public void setNumberColor(int numberColor) {
this.numberColor = numberColor;
numPaint.setColor(this.numberColor);
invalidate();
}
/**
* 給中間的數(shù)字進度設置大小誓沸,這里還比較了先前設置的文字大小做了對比,如果大于之前設置的文本兩倍壹粟,直接拋出異常拜隧,為了之前的控件測量有效
* @param numberColor
*/
public void setCuNumScale(float numberSize) {
if (numberSize > 2 * this.numberSize) {
throw new RuntimeException("you do not set the number textSize twice as big as your before your setting");
}
this.numberSize = numberSize;
numPaint.setTextSize(this.numberSize);
invalidate();
}
public void setReachedColor(int reachedColor) {
this.reachedColor = reachedColor;
reachedPaint.setColor(this.reachedColor);
invalidate();
}
public void setProgress(int progress) {
if (this.progress != progress) {
this.progress = progress;
//這里每次進來的時候讓那個中間數(shù)字進行放大一下
startNumAnimation();
if (listener != null) {
listener.onChange(this.progress);
}
}
}
public void setBorderWidth(float borderWidth) {
this.borderWidth = borderWidth;
unReachedPaint.setStrokeWidth(this.borderWidth);
reachedPaint.setStrokeWidth(this.borderWidth);
invalidate();
}
public void setUnReachedColor(int unReachedColor) {
this.unReachedColor = unReachedColor;
unReachedPaint.setColor(this.unReachedColor);
invalidate();
}
public void setNumberSize(float numberSize) {
this.numberSize = numberSize;
numPaint.setTextSize(this.numberSize);
invalidate();
}
public void setIsColorFul(boolean isColorFul) {
this.isColorFul = isColorFul;
invalidate();
}
后面的幾個方法就不做介紹了,通過看屬性的定義也能知道是啥意思了趁仙。
關于我:
email:a1002326270@163.com
github:enter