Android自定義控件實(shí)現(xiàn)帶文本與數(shù)字的圓形進(jìn)度條
本文實(shí)例為大家分享了Android實(shí)現(xiàn)圓形進(jìn)度條的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)的效果圖如下所示:


第一步:繪制下方有缺口的空心圓,稱為外圍大弧吧
anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
第二步:計(jì)算繪制圓弧進(jìn)度條時(shí)的起始角度,設(shè)置為外圍大弧的左端點(diǎn)為進(jìn)度值得起點(diǎn),掃過的角度所占外圍大弧的百分比就是進(jìn)度值
第三步:繪制數(shù)字、文字、百分號(hào)
第四步:使用Handler Runnable 和DecelerateInterpolator是進(jìn)度條和數(shù)字動(dòng)起來
測試代碼:
final CustomCircleBar circle=(CustomCircleBar)findViewById(R.id.win_home);
circle.setPercent(10);
circle.setCustomText("呵呵");
circle.setProgessColor(getResources().getColor(R.color.blue));
final Random random=new Random();
circle.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v){
circle.setPercent(random.nextInt(100));
}
});
完成代碼如下:
public class CustomCircleBar extends View {
private Context context;
/**
* 進(jìn)度值
*/
private int percent;
/**
* 顏色值
*/
private int mProgessColor;
/**
* 下邊的文字名稱
*/
private String mCustomText;
/**
* 外圈圓環(huán)的畫筆
*/
private Paint paintBar = new Paint();
/**
* 下邊文字的畫筆
*/
private Paint paintText = new Paint();
/**
* 動(dòng)態(tài)獲取屬性值
*/
private TypedValue typedValue;
/**
* 先加速后減速
*/
DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
/**
* 動(dòng)畫持續(xù)時(shí)間
*/
private int duration = 10;
private int curTime = 0;
public CustomCircleBar(Context context) {
super(context);
this.context=context;
init();
}
public CustomCircleBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
init();
}
public CustomCircleBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context=context;
init();
}
public void setPercent(int percent) {
this.percent = percent;
/*isShown():Returns the visibility of this view and all of its ancestors*/
if (isShown()) {
/**
* 設(shè)置進(jìn)度后重新開始一次動(dòng)畫
*/
curTime=0;
this.invalidate();
}
}
public void setProgessColor(int mProgessColor) {
this.mProgessColor = mProgessColor;
if (isShown()) {
this.invalidate();
}
}
public void setCustomText(String mCustomText) {
this.mCustomText = mCustomText;
}
private Handler mHandler = new Handler();
private Runnable mAnimation = new Runnable() {
@Override
public void run() {
if (curTime < duration) {
curTime++;
/** 導(dǎo)致重繪,調(diào)用onDraw,onDraw最后調(diào)用
* mHandler.postDelayed(mAnimation, 20);更新進(jìn)度條,界面重繪
* 每次20毫秒,繪制10次,因此動(dòng)畫時(shí)間200毫秒
*/
CustomCircleBar.this.invalidate();
}
}
};
private void init() {
/**
* 數(shù)據(jù)初始化,沒有設(shè)置屬性時(shí)候的默認(rèn)值
*/
percent = 0;
mProgessColor=Color.rgb(95,112,72);
mCustomText="Home";
typedValue=new TypedValue();
context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float mWidth = getWidth();
float mHeight = getHeight();
/**
* 下邊是進(jìn)度條畫筆的設(shè)置
*/
/** Restores the paint to its default settings. */
paintBar.reset();
/**
* 圓環(huán)寬度4個(gè)像素
*/
paintBar.setStrokeWidth(4);
/**
* 空心圓環(huán)而非填充的額扇形
*/
paintBar.setStyle(Paint.Style.STROKE);
paintBar.setAntiAlias(true);
paintBar.setColor(mProgessColor);
/**
* 調(diào)整下不透明度,使邊框弧和進(jìn)度條區(qū)分開
*/
paintBar.setAlpha(80);
/**
* 接下來是文字畫筆的設(shè)置
*/
paintText.setTextSize(20);
paintText.setColor(getResources().getColor(typedValue.resourceId));
paintText.setStyle(Paint.Style.STROKE);
paintText.setAntiAlias(true);
/**
* 從中間開始繪制文本
*/
paintText.setTextAlign(Paint.Align.CENTER);
/**
* 測量文字大小
*/
Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
/**
* 計(jì)算文字高度
*/
float textHeight = fontMetrics.bottom - fontMetrics.top;
/**
* 計(jì)算圓的半徑
*/
float radius = Math.min(mWidth, mHeight) / 2 - 10;
/* ❑ save:用來保存Canvas的狀態(tài)。save之后,可以調(diào)用Canvas的平移、放縮、旋轉(zhuǎn)、錯(cuò)切、裁剪等操作。
❑ restore:用來恢復(fù)Canvas之前保存的狀態(tài)。防止save后對(duì)Canvas執(zhí)行的操作對(duì)后續(xù)的繪制有影響。*/
/*保存畫布,繪制進(jìn)度條*/
canvas.save();
/*clipRect:該方法用于裁剪畫布,也就是設(shè)置畫布的顯示區(qū)域
調(diào)用clipRect()方法后,只會(huì)顯示被裁剪的區(qū)域,之外的區(qū)域?qū)⒉粫?huì)顯示 */
canvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
/*因?yàn)閏lipRect的原因,外邊的圓環(huán)下邊留個(gè)缺口繪制文字*/
canvas.drawCircle(mWidth / 2, mHeight / 2, radius, paintBar);
/**
* 三角函數(shù)計(jì)算,下方缺口扇形的角度的一半
*/
float theta_offset = (float) Math.acos((radius - textHeight / 2) / radius);
/**
* 大弧圍成的扇形的角度
*/
float theta_full = 360 - 2 * theta_offset;
/**
* 進(jìn)度值圍成的弧對(duì)應(yīng)的角度
*/
float thetaProcess = mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration) * percent * theta_full / 100;
/**
* 設(shè)置進(jìn)度值顏色完全不透明
*/
paintBar.setAlpha(255);
paintBar.setColor(mProgessColor);
/**
* 注意弧形的起始角度,下邊因顯示文字導(dǎo)致圓環(huán)斷開成一條弧,弧有左右兩個(gè)端點(diǎn),從左端點(diǎn)開始畫弧
*/
canvas.drawArc(new RectF(mWidth / 2 - radius, mHeight / 2 - radius, mWidth / 2 + radius, mHeight / 2 + radius), theta_offset+90, thetaProcess, false, paintBar);
/**
* 恢復(fù)畫布
*/
canvas.restore();
/**
* 開始繪制文字
*/
paintText.setTextSize(20);
fontMetrics = paintText.getFontMetrics();
float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
canvas.drawText(mCustomText, mWidth / 2, mHeight / 2 + radius - textHeight / 2 + textBaseLineOffset, paintText);
/**
* 繪制百分號(hào)
*/
paintText.setTextSize(mHeight * 1 / 8);
fontMetrics = paintText.getFontMetrics();
textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
canvas.drawText("%", mWidth / 2, mHeight / 2 + radius / 3 + textBaseLineOffset, paintText);
/**
* 繪制百分比
*/
paintText.setTextSize(mHeight * 3 / 8);
canvas.drawText("" + (int)(percent*mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration)), mWidth / 2, mHeight / 2, paintText);
/**
* 20毫秒后執(zhí)行動(dòng)畫
*/
mHandler.postDelayed(mAnimation, 20);
}
}
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android中BroadcastReceiver(異步接收廣播Intent)的使用
Broadcast Receiver是Android的五大組件之一,使用頻率也很高,用于異步接收廣播Intent,本文將詳細(xì)介紹,需要的朋友可以參考下2012-12-12
Android手冊(cè)之Toolbar搜索聯(lián)動(dòng)及監(jiān)聽小技巧
這篇文章主要為大家介紹了Android手冊(cè)之Toolbar搜索聯(lián)動(dòng)及監(jiān)聽小技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
Android編程實(shí)現(xiàn)獲取新浪天氣預(yù)報(bào)數(shù)據(jù)的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)獲取新浪天氣預(yù)報(bào)數(shù)據(jù)的方法,涉及Android基于新浪接口的調(diào)用及數(shù)據(jù)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
學(xué)習(xí)使用Material Design控件(三)使用CardView實(shí)現(xiàn)卡片效果
這篇文章主要為大家介紹了學(xué)習(xí)使用Material Design控件的詳細(xì)教程,如何使用CardView實(shí)現(xiàn)卡片效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Android仿360桌面手機(jī)衛(wèi)士懸浮窗效果
這篇文章主要介紹了Android仿360手機(jī)衛(wèi)士懸浮窗效果的桌面實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Android運(yùn)用BroadcastReceiver實(shí)現(xiàn)強(qiáng)制下線
本篇文章主要介紹了Android運(yùn)用BroadcastReceiver實(shí)現(xiàn)強(qiáng)制下線,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Kotlin RadioGroup與ViewPager實(shí)現(xiàn)底層分頁按鈕方法
安卓的控件是挺多的,沒有辦法一個(gè)一個(gè)的來說明,我們挑出了一些重點(diǎn)的控件,組成一些常見的布局,這樣以后在遇到相同功能的界面時(shí),就會(huì)有自己的思路,或者進(jìn)行復(fù)用2022-12-12
Kotlin設(shè)計(jì)模式之委托模式使用方法詳解
Kotlin提供了兩個(gè)本機(jī)功能來實(shí)現(xiàn)委托模式,第一個(gè)是接口委托(例如策略模式),另一種是屬性委托,它專注于類成員/屬性(例如延遲加載、observable等),它們共同提供了一組豐富而簡潔的功能,通過本博客,您將了解在什么情況下使用此模式2023-09-09

