資源簡(jiǎn)介
###序言:最近一段時(shí)間由于要忙學(xué)校畢業(yè)的事情和公司項(xiàng)目的事情,很久沒(méi)有更新博客了,這兩天項(xiàng)目中有個(gè)需要用到圓形進(jìn)度條的地方,想著這段時(shí)間正在學(xué)習(xí)自定義View以及屬性動(dòng)畫(huà)的知識(shí),然后剛好用這個(gè)來(lái)練練手,無(wú)圖無(wú)真相,直接看圖:

簡(jiǎn)單自定義了一個(gè)比較通用的圓形進(jìn)度條,像上圖所示的可以定義圓的半徑,進(jìn)度顏色,寬度,中間字體等信息。下面我就一步一步來(lái)為大家講解:
>####1、首先我們先要找出有哪些屬性需要自定義的,進(jìn)度條顏色、進(jìn)度顏色、整個(gè)進(jìn)度條的半徑、進(jìn)度的寬度、進(jìn)度條內(nèi)文字顏色及大小、最大進(jìn)度、當(dāng)前進(jìn)度,后來(lái)我加了一個(gè)方向的屬性,方向表示進(jìn)度從哪里開(kāi)始(默認(rèn)有四個(gè)方向,上左下右),確定好之后我們就在attrs中定義出來(lái):
<declare-styleable name="CustomCircleProgressBar">
<attr name="outside_color" format="color" />
<attr name="outside_radius" format="dimension" />
<attr name="inside_color" format="color" />
<attr name="progress_text_color" format="color" />
<attr name="progress_text_size" format="dimension" />
<attr name="progress_width" format="dimension" />
<attr name="max_progress" format="integer" />
<attr name="progress" format="float" />
<attr name="direction">
<enum name="left" value="0" />
<enum name="top" value="1" />
<enum name="right" value="2" />
<enum name="bottom" value="3" />
</attr>
</declare-styleable>
>####2、然后在自定義**View**的構(gòu)造方法中獲取一下這些值:
public CustomCircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCircleProgressBar, defStyleAttr, 0);
outsideColor = a.getColor(R.styleable.CustomCircleProgressBar_outside_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
outsideRadius = a.getDimension(R.styleable.CustomCircleProgressBar_outside_radius, DimenUtil.dp2px(getContext(), 60.0f));
insideColor = a.getColor(R.styleable.CustomCircleProgressBar_inside_color, ContextCompat.getColor(getContext(), R.color.inside_color));
progressTextColor = a.getColor(R.styleable.CustomCircleProgressBar_progress_text_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
progressTextSize = a.getDimension(R.styleable.CustomCircleProgressBar_progress_text_size, DimenUtil.dp2px(getContext(), 14.0f));
progressWidth = a.getDimension(R.styleable.CustomCircleProgressBar_progress_width, DimenUtil.dp2px(getContext(), 10.0f));
progress = a.getFloat(R.styleable.CustomCircleProgressBar_progress, 50.0f);
maxProgress = a.getInt(R.styleable.CustomCircleProgressBar_max_progress, 100);
direction = a.getInt(R.styleable.CustomCircleProgressBar_direction, 3);
a.recycle();
paint = new Paint();
}
>####3、接下來(lái)我們要重寫(xiě)onMeasure方法,讓其可以自適應(yīng)你的設(shè)置:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width;
int height;
int size = MeasureSpec.getSize(widthMeasureSpec);
int mode = MeasureSpec.getMode(widthMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
width = size;
} else {
width = (int) ((2 * outsideRadius) progressWidth);
}
size = MeasureSpec.getSize(heightMeasureSpec);
mode = MeasureSpec.getMode(heightMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
height = size;
} else {
height = (int) ((2 * outsideRadius) progressWidth);
}
setMeasuredDimension(width, height);
}
>####4、這兩塊就不多說(shuō)了,相信大多數(shù)看官應(yīng)該都知道,接下來(lái)我們來(lái)分析要畫(huà)些什么?怎么畫(huà)?首先肯定是畫(huà)最底層的那個(gè)圓環(huán)了,給畫(huà)筆設(shè)置空心屬性,然后設(shè)置線的寬度,就可以畫(huà)一個(gè)圓環(huán)了:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int circlePoint = getWidth() / 2;
//第一步:畫(huà)背景(即內(nèi)層圓)
paint.setColor(insideColor); //設(shè)置圓的顏色
paint.setStyle(STROKE); //設(shè)置空心
paint.setStrokeWidth(progressWidth); //設(shè)置圓的寬度
paint.setAntiAlias(true); //消除鋸齒
canvas.drawCircle(circlePoint, circlePoint, outsideRadius, paint); //畫(huà)出圓
}

>####5、然后我們接著畫(huà)外面的進(jìn)度,外面進(jìn)度就是一段弧,根據(jù)我們獲取的進(jìn)度和總進(jìn)度來(lái)畫(huà)這段弧,畫(huà)弧需要用到`canvas.drawArc()`這個(gè)方法,這個(gè)方法有兩個(gè)重載方法:
`drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)`
`drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle,boolean useCenter,Paint paint)`
其實(shí),可以看作是一個(gè)方法,因?yàn)閌RectF`這個(gè)東西呢就是由`left top right bottom`構(gòu)成的,那`RectF`這玩意兒到底什么東西呢,我也不知道,那就去看源碼唄:
RectF holds four float coordinates for a rectangle.
The rectangle isrepresented by the coordinates of its 4 edges (left, top, right bottom).
These fields can be accessed directly.
Use width() and height() to retrieve the rectangle's width and height.
Note: most methods do not check to see that the coordinates are sorted correctly (i.e. left <= right and top <= bottom).
>簡(jiǎn)單點(diǎn)說(shuō),這東西可以構(gòu)造一個(gè)矩形,左上右下就是矩形四條邊離`X Y`軸的距離(這里分正負(fù),圓點(diǎn)下邊和圓點(diǎn)右邊為正),詳細(xì)可以看下面這個(gè)圖,以圓心(屏幕的中心)構(gòu)造一個(gè)矩形,矩形的左上右下邊距離`X Y`軸的距離就是我們所需要的`left top right bottom`值了:

寫(xiě)法一:
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius); //用于定義的圓弧的形狀和大小的界限
寫(xiě)法二:
RectF oval = new RectF();
oval.left=circlePoint - outsideRadius;
oval.top=circlePoint - outsideRadius;
oval.right=circlePoint outsideRadius;
oval.bottom=circlePoint outsideRadius;
>然后`drawArc()`方法中的第二(五)個(gè)參數(shù)`startAngle`表示我們畫(huà)弧度開(kāi)始的角度,這里的值為**0-360**,**0**表示三點(diǎn)鐘方向,**90**表示六點(diǎn)鐘方向,以此類(lèi)推;后面那個(gè)參數(shù)`sweepAngle`表示要畫(huà)多少弧度,這里的取值也是從**0-360**,我們通常使用當(dāng)前進(jìn)度占總進(jìn)度的百分之多少,再乘以弧度**360**就是我們所要畫(huà)的弧度了;再后面那個(gè)參數(shù)`useCenter`表示是否連接圓心一起畫(huà),下面來(lái)看看代碼:
//第二步:畫(huà)進(jìn)度(圓弧)不連接圓心
paint.setColor(outsideColor); //設(shè)置進(jìn)度的顏色
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius); //用于定義的圓弧的形狀和大小的界限
canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), false, paint); //根據(jù)進(jìn)度畫(huà)圓弧

//第二步:畫(huà)進(jìn)度(圓弧)連接圓心
paint.setColor(outsideColor); //設(shè)置進(jìn)度的顏色
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius); //用于定義的圓弧的形狀和大小的界限
canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), true, paint); //根據(jù)進(jìn)度畫(huà)圓弧

>6、接下來(lái)就是畫(huà)圓環(huán)內(nèi)的百分比文字了,可能有的人就說(shuō),畫(huà)文字嘛,那不是很簡(jiǎn)單,直接`drawText`方法畫(huà)不就好了,要什么值就傳什么唄!大兄弟別急撒,下面給大家看看直接畫(huà)文字的效果:
paint.setColor(progressTextColor);
paint.setTextSize(progressTextSize);
paint.setStrokeWidth(0);
progressText = (int) ((progress / maxProgress) * 100) "%";
canvas.drawText(progressText, circlePoint , circlePoint, paint);

>**WTF**,發(fā)生了什么???所以說(shuō)大兄弟,憋著急,這里`drawText`方法是從文字的左上角開(kāi)始畫(huà)的,所以我們需要剪去文字一半的寬高:
rect = new Rect();
paint.getTextBounds(progressText, 0, progressText.length(), rect);
canvas.drawText(progressText, circlePoint- rect.width() / 2 , circlePoint- rect.height() / 2, paint);

>再次**WTF**,可能又有人說(shuō),LZ你騙人,它還是沒(méi)有居中,這尼瑪心中頓時(shí)有一萬(wàn)只草泥馬在奔騰,別急,還沒(méi)講完,給你看看源碼你就知道了:
/**
* Draw the text, with origin at (x,y), using the specified paint. The
* origin is interpreted based on the Align setting in the paint.
*
* @param text The text to be drawn
* @param x The x-coordinate of the origin of the text being drawn
* @param y The y-coordinate of the baseline of the text being drawn
* @param paint The paint used for the text (e.g. color, size, style)
*/
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags,
paint.getNativeInstance(), paint.mNativeTypeface);
}
>不知道各位有沒(méi)有看到第三個(gè)參數(shù)`y`的解釋?zhuān)皇强v軸的坐標(biāo),而是基準(zhǔn)線`y`坐標(biāo),至于這個(gè)基準(zhǔn)線,LZ不打算在這里展開(kāi)講,因?yàn)檫@個(gè)也有很多內(nèi)容,給大家推薦一篇講的非常詳細(xì)的博客:
[自定義控件之繪圖篇( 五):drawText()詳解](http://blog.csdn.net/harvic880925/article/details/50423762)
接下來(lái)來(lái)看看咱是怎么寫(xiě)的:
//第三步:畫(huà)圓環(huán)內(nèi)百分比文字
rect = new Rect();
paint.setColor(progressTextColor);
paint.setTextSize(progressTextSize);
paint.setStrokeWidth(0);
progressText = getProgressText();
paint.getTextBounds(progressText, 0, progressText.length(), rect);
Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
int baseline = (getMeasuredHeight() - fontMetrics.bottom fontMetrics.top) / 2 - fontMetrics.top; //獲得文字的基準(zhǔn)線
canvas.drawText(progressText, getMeasuredWidth() / 2 - rect.width() / 2, baseline, paint);
>再來(lái)看看最終的效果:

好了,現(xiàn)在進(jìn)度和文字都畫(huà)出來(lái)了,個(gè)人覺(jué)得就這樣直接展示在用戶(hù)眼前顯得有點(diǎn)生硬,有沒(méi)有什么辦法讓它的進(jìn)度從零開(kāi)始跑動(dòng)畫(huà)到我們要設(shè)置的進(jìn)度值呢,答案是肯定的咯,這里我們可以用屬性動(dòng)畫(huà)來(lái)實(shí)現(xiàn),前面幾篇博客我們有講到屬性動(dòng)畫(huà)的知識(shí),如果你還沒(méi)有看過(guò)的話(huà),請(qǐng)移步:
####[Android自定義view之屬性動(dòng)畫(huà)熟悉](http://www.jianshu.com/p/50d974db7bc5)
####[Android自定義view之屬性動(dòng)畫(huà)初見(jiàn)](http://www.jianshu.com/p/0e10a6ed80dc)
這里我們使用的是`ValueAnimator`,通過(guò)監(jiān)聽(tīng)動(dòng)畫(huà)改變進(jìn)度的值來(lái)設(shè)置圓環(huán)的進(jìn)度:
private void startAnim(float startProgress) {
animator = ObjectAnimator.ofFloat(0, startProgress);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
CustomCircleProgressBar.this.progress = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animator.setStartDelay(500); //設(shè)置延遲開(kāi)始
animator.setDuration(2000);
animator.setInterpolator(new LinearInterpolator()); //動(dòng)畫(huà)勻速
animator.start();
}
到此就完成了自定義的原型進(jìn)度條了。源碼已上傳至[Github](https://github.com/Jakemesdg/CustomCircleProgressBar),有需要的同學(xué)可以下載下來(lái)看看,歡迎**Star,F(xiàn)ork**
#####同時(shí)感謝以上引用到博客的主人,感謝!!!
###這是我建的一個(gè)android小白的群,歡迎各位有興趣的小白加群共同學(xué)習(xí),知無(wú)不言;也歡迎各位大神進(jìn)群指導(dǎo),共勉。群號(hào):541144061

簡(jiǎn)單自定義了一個(gè)比較通用的圓形進(jìn)度條,像上圖所示的可以定義圓的半徑,進(jìn)度顏色,寬度,中間字體等信息。下面我就一步一步來(lái)為大家講解:
>####1、首先我們先要找出有哪些屬性需要自定義的,進(jìn)度條顏色、進(jìn)度顏色、整個(gè)進(jìn)度條的半徑、進(jìn)度的寬度、進(jìn)度條內(nèi)文字顏色及大小、最大進(jìn)度、當(dāng)前進(jìn)度,后來(lái)我加了一個(gè)方向的屬性,方向表示進(jìn)度從哪里開(kāi)始(默認(rèn)有四個(gè)方向,上左下右),確定好之后我們就在attrs中定義出來(lái):
<declare-styleable name="CustomCircleProgressBar">
<attr name="outside_color" format="color" />
<attr name="outside_radius" format="dimension" />
<attr name="inside_color" format="color" />
<attr name="progress_text_color" format="color" />
<attr name="progress_text_size" format="dimension" />
<attr name="progress_width" format="dimension" />
<attr name="max_progress" format="integer" />
<attr name="progress" format="float" />
<attr name="direction">
<enum name="left" value="0" />
<enum name="top" value="1" />
<enum name="right" value="2" />
<enum name="bottom" value="3" />
</attr>
</declare-styleable>
>####2、然后在自定義**View**的構(gòu)造方法中獲取一下這些值:
public CustomCircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCircleProgressBar, defStyleAttr, 0);
outsideColor = a.getColor(R.styleable.CustomCircleProgressBar_outside_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
outsideRadius = a.getDimension(R.styleable.CustomCircleProgressBar_outside_radius, DimenUtil.dp2px(getContext(), 60.0f));
insideColor = a.getColor(R.styleable.CustomCircleProgressBar_inside_color, ContextCompat.getColor(getContext(), R.color.inside_color));
progressTextColor = a.getColor(R.styleable.CustomCircleProgressBar_progress_text_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
progressTextSize = a.getDimension(R.styleable.CustomCircleProgressBar_progress_text_size, DimenUtil.dp2px(getContext(), 14.0f));
progressWidth = a.getDimension(R.styleable.CustomCircleProgressBar_progress_width, DimenUtil.dp2px(getContext(), 10.0f));
progress = a.getFloat(R.styleable.CustomCircleProgressBar_progress, 50.0f);
maxProgress = a.getInt(R.styleable.CustomCircleProgressBar_max_progress, 100);
direction = a.getInt(R.styleable.CustomCircleProgressBar_direction, 3);
a.recycle();
paint = new Paint();
}
>####3、接下來(lái)我們要重寫(xiě)onMeasure方法,讓其可以自適應(yīng)你的設(shè)置:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width;
int height;
int size = MeasureSpec.getSize(widthMeasureSpec);
int mode = MeasureSpec.getMode(widthMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
width = size;
} else {
width = (int) ((2 * outsideRadius) progressWidth);
}
size = MeasureSpec.getSize(heightMeasureSpec);
mode = MeasureSpec.getMode(heightMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
height = size;
} else {
height = (int) ((2 * outsideRadius) progressWidth);
}
setMeasuredDimension(width, height);
}
>####4、這兩塊就不多說(shuō)了,相信大多數(shù)看官應(yīng)該都知道,接下來(lái)我們來(lái)分析要畫(huà)些什么?怎么畫(huà)?首先肯定是畫(huà)最底層的那個(gè)圓環(huán)了,給畫(huà)筆設(shè)置空心屬性,然后設(shè)置線的寬度,就可以畫(huà)一個(gè)圓環(huán)了:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int circlePoint = getWidth() / 2;
//第一步:畫(huà)背景(即內(nèi)層圓)
paint.setColor(insideColor); //設(shè)置圓的顏色
paint.setStyle(STROKE); //設(shè)置空心
paint.setStrokeWidth(progressWidth); //設(shè)置圓的寬度
paint.setAntiAlias(true); //消除鋸齒
canvas.drawCircle(circlePoint, circlePoint, outsideRadius, paint); //畫(huà)出圓
}

>####5、然后我們接著畫(huà)外面的進(jìn)度,外面進(jìn)度就是一段弧,根據(jù)我們獲取的進(jìn)度和總進(jìn)度來(lái)畫(huà)這段弧,畫(huà)弧需要用到`canvas.drawArc()`這個(gè)方法,這個(gè)方法有兩個(gè)重載方法:
`drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)`
`drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle,boolean useCenter,Paint paint)`
其實(shí),可以看作是一個(gè)方法,因?yàn)閌RectF`這個(gè)東西呢就是由`left top right bottom`構(gòu)成的,那`RectF`這玩意兒到底什么東西呢,我也不知道,那就去看源碼唄:
RectF holds four float coordinates for a rectangle.
The rectangle isrepresented by the coordinates of its 4 edges (left, top, right bottom).
These fields can be accessed directly.
Use width() and height() to retrieve the rectangle's width and height.
Note: most methods do not check to see that the coordinates are sorted correctly (i.e. left <= right and top <= bottom).
>簡(jiǎn)單點(diǎn)說(shuō),這東西可以構(gòu)造一個(gè)矩形,左上右下就是矩形四條邊離`X Y`軸的距離(這里分正負(fù),圓點(diǎn)下邊和圓點(diǎn)右邊為正),詳細(xì)可以看下面這個(gè)圖,以圓心(屏幕的中心)構(gòu)造一個(gè)矩形,矩形的左上右下邊距離`X Y`軸的距離就是我們所需要的`left top right bottom`值了:

寫(xiě)法一:
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius); //用于定義的圓弧的形狀和大小的界限
寫(xiě)法二:
RectF oval = new RectF();
oval.left=circlePoint - outsideRadius;
oval.top=circlePoint - outsideRadius;
oval.right=circlePoint outsideRadius;
oval.bottom=circlePoint outsideRadius;
>然后`drawArc()`方法中的第二(五)個(gè)參數(shù)`startAngle`表示我們畫(huà)弧度開(kāi)始的角度,這里的值為**0-360**,**0**表示三點(diǎn)鐘方向,**90**表示六點(diǎn)鐘方向,以此類(lèi)推;后面那個(gè)參數(shù)`sweepAngle`表示要畫(huà)多少弧度,這里的取值也是從**0-360**,我們通常使用當(dāng)前進(jìn)度占總進(jìn)度的百分之多少,再乘以弧度**360**就是我們所要畫(huà)的弧度了;再后面那個(gè)參數(shù)`useCenter`表示是否連接圓心一起畫(huà),下面來(lái)看看代碼:
//第二步:畫(huà)進(jìn)度(圓弧)不連接圓心
paint.setColor(outsideColor); //設(shè)置進(jìn)度的顏色
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius); //用于定義的圓弧的形狀和大小的界限
canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), false, paint); //根據(jù)進(jìn)度畫(huà)圓弧

//第二步:畫(huà)進(jìn)度(圓弧)連接圓心
paint.setColor(outsideColor); //設(shè)置進(jìn)度的顏色
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius); //用于定義的圓弧的形狀和大小的界限
canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), true, paint); //根據(jù)進(jìn)度畫(huà)圓弧

>6、接下來(lái)就是畫(huà)圓環(huán)內(nèi)的百分比文字了,可能有的人就說(shuō),畫(huà)文字嘛,那不是很簡(jiǎn)單,直接`drawText`方法畫(huà)不就好了,要什么值就傳什么唄!大兄弟別急撒,下面給大家看看直接畫(huà)文字的效果:
paint.setColor(progressTextColor);
paint.setTextSize(progressTextSize);
paint.setStrokeWidth(0);
progressText = (int) ((progress / maxProgress) * 100) "%";
canvas.drawText(progressText, circlePoint , circlePoint, paint);

>**WTF**,發(fā)生了什么???所以說(shuō)大兄弟,憋著急,這里`drawText`方法是從文字的左上角開(kāi)始畫(huà)的,所以我們需要剪去文字一半的寬高:
rect = new Rect();
paint.getTextBounds(progressText, 0, progressText.length(), rect);
canvas.drawText(progressText, circlePoint- rect.width() / 2 , circlePoint- rect.height() / 2, paint);

>再次**WTF**,可能又有人說(shuō),LZ你騙人,它還是沒(méi)有居中,這尼瑪心中頓時(shí)有一萬(wàn)只草泥馬在奔騰,別急,還沒(méi)講完,給你看看源碼你就知道了:
/**
* Draw the text, with origin at (x,y), using the specified paint. The
* origin is interpreted based on the Align setting in the paint.
*
* @param text The text to be drawn
* @param x The x-coordinate of the origin of the text being drawn
* @param y The y-coordinate of the baseline of the text being drawn
* @param paint The paint used for the text (e.g. color, size, style)
*/
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags,
paint.getNativeInstance(), paint.mNativeTypeface);
}
>不知道各位有沒(méi)有看到第三個(gè)參數(shù)`y`的解釋?zhuān)皇强v軸的坐標(biāo),而是基準(zhǔn)線`y`坐標(biāo),至于這個(gè)基準(zhǔn)線,LZ不打算在這里展開(kāi)講,因?yàn)檫@個(gè)也有很多內(nèi)容,給大家推薦一篇講的非常詳細(xì)的博客:
[自定義控件之繪圖篇( 五):drawText()詳解](http://blog.csdn.net/harvic880925/article/details/50423762)
接下來(lái)來(lái)看看咱是怎么寫(xiě)的:
//第三步:畫(huà)圓環(huán)內(nèi)百分比文字
rect = new Rect();
paint.setColor(progressTextColor);
paint.setTextSize(progressTextSize);
paint.setStrokeWidth(0);
progressText = getProgressText();
paint.getTextBounds(progressText, 0, progressText.length(), rect);
Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
int baseline = (getMeasuredHeight() - fontMetrics.bottom fontMetrics.top) / 2 - fontMetrics.top; //獲得文字的基準(zhǔn)線
canvas.drawText(progressText, getMeasuredWidth() / 2 - rect.width() / 2, baseline, paint);
>再來(lái)看看最終的效果:

好了,現(xiàn)在進(jìn)度和文字都畫(huà)出來(lái)了,個(gè)人覺(jué)得就這樣直接展示在用戶(hù)眼前顯得有點(diǎn)生硬,有沒(méi)有什么辦法讓它的進(jìn)度從零開(kāi)始跑動(dòng)畫(huà)到我們要設(shè)置的進(jìn)度值呢,答案是肯定的咯,這里我們可以用屬性動(dòng)畫(huà)來(lái)實(shí)現(xiàn),前面幾篇博客我們有講到屬性動(dòng)畫(huà)的知識(shí),如果你還沒(méi)有看過(guò)的話(huà),請(qǐng)移步:
####[Android自定義view之屬性動(dòng)畫(huà)熟悉](http://www.jianshu.com/p/50d974db7bc5)
####[Android自定義view之屬性動(dòng)畫(huà)初見(jiàn)](http://www.jianshu.com/p/0e10a6ed80dc)
這里我們使用的是`ValueAnimator`,通過(guò)監(jiān)聽(tīng)動(dòng)畫(huà)改變進(jìn)度的值來(lái)設(shè)置圓環(huán)的進(jìn)度:
private void startAnim(float startProgress) {
animator = ObjectAnimator.ofFloat(0, startProgress);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
CustomCircleProgressBar.this.progress = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animator.setStartDelay(500); //設(shè)置延遲開(kāi)始
animator.setDuration(2000);
animator.setInterpolator(new LinearInterpolator()); //動(dòng)畫(huà)勻速
animator.start();
}
到此就完成了自定義的原型進(jìn)度條了。源碼已上傳至[Github](https://github.com/Jakemesdg/CustomCircleProgressBar),有需要的同學(xué)可以下載下來(lái)看看,歡迎**Star,F(xiàn)ork**
#####同時(shí)感謝以上引用到博客的主人,感謝!!!
###這是我建的一個(gè)android小白的群,歡迎各位有興趣的小白加群共同學(xué)習(xí),知無(wú)不言;也歡迎各位大神進(jìn)群指導(dǎo),共勉。群號(hào):541144061
代碼片段和文件信息
/**
?*?Automatically?generated?file.?DO?NOT?MODIFY
?*/
package?com.share.jack.customcircleprogressbar.test;
public?final?class?BuildConfig?{
??public?static?final?boolean?DEBUG?=?Boolean.parseBoolean(“true“);
??public?static?final?String?APPLICATION_ID?=?“com.share.jack.customcircleprogressbar.test“;
??public?static?final?String?BUILD_TYPE?=?“debug“;
??public?static?final?String?FLAVOR?=?““;
??public?static?final?int?VERSION_CODE?=?1;
??public?static?final?String?VERSION_NAME?=?“1.0“;
}
?屬性????????????大小?????日期????時(shí)間???名稱(chēng)
-----------?---------??----------?-----??----
?????目錄???????????0??2017-04-12?14:58??CustomCircleProgressBar\
?????目錄???????????0??2017-04-14?14:25??CustomCircleProgressBar\.git\
?????文件??????????28??2017-04-14?10:45??CustomCircleProgressBar\.git\COMMIT_EDITMSG
?????文件?????????260??2017-04-12?14:56??CustomCircleProgressBar\.git\config
?????文件??????????73??2017-04-12?14:56??CustomCircleProgressBar\.git\desc
?????文件?????????106??2017-04-12?14:58??CustomCircleProgressBar\.git\FETCH_HEAD
?????文件??????????23??2017-04-12?14:56??CustomCircleProgressBar\.git\HEAD
?????目錄???????????0??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\
?????文件?????????478??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\applypatch-msg.sample
?????文件?????????896??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\commit-msg.sample
?????文件?????????189??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\post-update.sample
?????文件?????????424??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-applypatch.sample
?????文件????????1642??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-commit.sample
?????文件????????1348??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-push.sample
?????文件????????4951??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-reba
?????文件?????????544??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-receive.sample
?????文件????????1239??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\prepare-commit-msg.sample
?????文件????????3610??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\update.sample
?????文件????????4862??2017-04-14?14:19??CustomCircleProgressBar\.git\index
?????目錄???????????0??2017-04-12?14:56??CustomCircleProgressBar\.git\info\
?????文件?????????240??2017-04-12?14:56??CustomCircleProgressBar\.git\info\exclude
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\
?????文件?????????512??2017-04-14?10:45??CustomCircleProgressBar\.git\logs\HEAD
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\heads\
?????文件?????????512??2017-04-14?10:45??CustomCircleProgressBar\.git\logs\refs\heads\master
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\remotes\
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\remotes\origin\
?????文件?????????480??2017-04-14?10:46??CustomCircleProgressBar\.git\logs\refs\remotes\origin\master
?????目錄???????????0??2017-04-14?10:54??CustomCircleProgressBar\.git\ob
?????目錄???????????0??2017-04-14?10:45??CustomCircleProgressBar\.git\ob
............此處省略2125個(gè)文件信息
評(píng)論
共有 條評(píng)論