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)起來
測(cè)試代碼:
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);
/**
* 測(cè)量文字大小
*/
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)文章
recycleview實(shí)現(xiàn)拼多多首頁水平滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了recycleview實(shí)現(xiàn)拼多多首頁水平滑動(dòng)效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05
Android 通過當(dāng)前經(jīng)緯度獲得城市的實(shí)例代碼
Android 通過當(dāng)前經(jīng)緯度獲得城市的實(shí)例代碼,需要的朋友可以參考一下2013-06-06
Android App界面的ListView布局實(shí)戰(zhàn)演練
這篇文章主要介紹了Android App界面的ListView布局方法,文中分了三種情況通過實(shí)例來講解,ListView適用于功能最簡單的應(yīng)用程序UI布局,需要的朋友可以參考下2016-04-04
BroadcastReceiver動(dòng)態(tài)注冊(cè)案例詳解
這篇文章主要為大家詳細(xì)介紹了BroadcastReceiver動(dòng)態(tài)注冊(cè)案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
Android編程實(shí)現(xiàn)打勾顯示輸入密碼功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)打勾顯示輸入密碼功能,涉及Android控件布局及屬性相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
Android 自定義 View 中使用 Spannable的實(shí)例詳解
這篇文章主要介紹了Android 自定義 View 中使用 Spannable的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Flutter實(shí)現(xiàn)購物車功能(代碼+邏輯)
本文主要介紹了Flutter實(shí)現(xiàn)購物車功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
Android 中SQLite技術(shù)實(shí)例詳解
這篇文章主要介紹了Android 中SQLite技術(shù)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
淺談Android輕量級(jí)的數(shù)據(jù)緩存框架RxCache
本篇文章主要介紹了淺談Android輕量級(jí)的數(shù)據(jù)緩存框架RxCache,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08

