Android帶圓形數(shù)字進(jìn)度的自定義進(jìn)度條示例
開(kāi)發(fā)
設(shè)計(jì)搞了一個(gè)帶圓形進(jìn)度的進(jìn)度條,在GitHub上逛了一圈,發(fā)現(xiàn)沒(méi)有,自己擼吧。
先看界面效果:
主要思路是寫(xiě)一個(gè)繼承ProgressBar的自定義View,不廢話,直接上代碼:
package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF; import android.util.AttributeSet; import android.util.TypedValue; import android.widget.ProgressBar; public class HorizontalProgressBarWithNumber extends ProgressBar { private static final int DEFAULT_TEXT_SIZE = 10; private static final int DEFAULT_TEXT_COLOR = 0XFFFC00D1; private static final int DEFAULT_COLOR_UNREACHED_COLOR = 0xFFd3d6da; private static final int DEFAULT_HEIGHT_REACHED_PROGRESS_BAR = 2; private static final int DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR = 2; private static final int DEFAULT_CIRCLE_COLOR = 0XFF3F51B5; protected Paint mPaint = new Paint(); // 字體顏色 protected int mTextColor = DEFAULT_TEXT_COLOR; // 字體大小 protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE); // 覆蓋進(jìn)度高度 protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR); // 覆蓋進(jìn)度顏色 protected int mReachedBarColor = DEFAULT_TEXT_COLOR; // 未覆蓋進(jìn)度高度 protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR); // 未覆蓋進(jìn)度顏色 protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR; // 圓的顏色 protected int mCircleColor = DEFAULT_CIRCLE_COLOR; protected int mRealWidth; protected boolean mIfDrawText = true; protected boolean mIfDrawCircle = true; protected static final int VISIBLE = 0; public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs) { this(context, attrs, 0); } public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); obtainStyledAttributes(attrs); mPaint.setTextSize(mTextSize); mPaint.setColor(mTextColor); mPaint.setAntiAlias(true); } private void obtainStyledAttributes(AttributeSet attrs) { // 獲取自定義屬性 final TypedArray attributes = getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalProgressBarWithNumber); mTextColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_text_color, DEFAULT_TEXT_COLOR); mTextSize = (int) attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_text_size, mTextSize); mCircleColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_circle_color, DEFAULT_CIRCLE_COLOR); mReachedBarColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_reached_color, mTextColor); mUnReachedBarColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_unreached_color, DEFAULT_COLOR_UNREACHED_COLOR); mReachedProgressBarHeight = (int) attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_reached_bar_height, mReachedProgressBarHeight); mUnReachedProgressBarHeight = (int) attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_unreached_bar_height, mUnReachedProgressBarHeight); int textVisible = attributes.getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility, VISIBLE); if (textVisible != VISIBLE) { mIfDrawText = false; } attributes.recycle(); int left = (int) (mReachedProgressBarHeight * 0.8), right = (int) (mReachedProgressBarHeight * 0.8); int top = (int) (mReachedProgressBarHeight * 0.3 + dp2px(1)), bottom = (int) (mReachedProgressBarHeight * 0.3 + dp2px(1)); setPadding(left, top, right, bottom); } @Override protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = measureHeight(heightMeasureSpec); setMeasuredDimension(width, height); mRealWidth = getMeasuredWidth() - getPaddingRight() - getPaddingLeft(); } private int measureHeight(int measureSpec) { int result; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { result = specSize; } else { float textHeight = (mPaint.descent() - mPaint.ascent()); result = (int) (getPaddingTop() + getPaddingBottom() + Math.max( Math.max(mReachedProgressBarHeight, mUnReachedProgressBarHeight), Math.abs(textHeight))); if (specMode == MeasureSpec.AT_MOST) { result = Math.min(result, specSize); } } return result; } @Override protected synchronized void onDraw(Canvas canvas) { canvas.save(); canvas.translate(getPaddingLeft(), getHeight() / 2); boolean noNeedBg = false; float radio = getProgress() * 1.0f / getMax(); float progressPosX = (int) (mRealWidth * radio); String text = getProgress() + "%"; float textWidth = mPaint.measureText(text); float textHeight = (mPaint.descent() + mPaint.ascent()) / 2; float radius = (mReachedProgressBarHeight + getPaddingBottom() + getPaddingTop()) / 2; // 覆蓋的進(jìn)度 float endX = progressPosX; if (endX > -1) { mPaint.setColor(mReachedBarColor); RectF rectF = new RectF(0, 0 - getPaddingTop() - getPaddingBottom(), endX, mReachedProgressBarHeight - getPaddingBottom()); canvas.drawRoundRect(rectF, 25, 25, mPaint); } // 未覆蓋的進(jìn)度 if (!noNeedBg) { float start = progressPosX; mPaint.setColor(mUnReachedBarColor); RectF rectF = new RectF(start, 0 - getPaddingTop() - getPaddingBottom(), mRealWidth + getPaddingRight() - radius, mReachedProgressBarHeight - getPaddingBottom()); canvas.drawRoundRect(rectF, 25, 25, mPaint); } // 圓 if (mIfDrawCircle) { mPaint.setColor(mCircleColor); canvas.drawCircle(progressPosX, 0, radius, mPaint); } // 文本 if (mIfDrawText) { mPaint.setColor(mTextColor); canvas.drawText(text, progressPosX - textWidth / 2, -textHeight, mPaint); } canvas.restore(); } /** * dp 2 px */ protected int dp2px(int dpVal) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics()); } /** * sp 2 px */ protected int sp2px(int spVal) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics()); } }
使用
在布局文件中加入:
<com.fun.progressbarwithnumber.HorizontalProgressBarWithNumber android:id="@+id/hpbwn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" fun:progress_circle_color="#ff000000" fun:progress_reached_bar_height="20dp" fun:progress_reached_color="#FFFF4081" fun:progress_text_color="#ffffffff" fun:progress_text_size="14sp" fun:progress_unreached_bar_height="20dp" fun:progress_unreached_color="#ffBCB4E8" />
- progress_reached_bar_height:當(dāng)前進(jìn)度的高度
- progress_unreached_bar_height:剩余進(jìn)度的高度
- progress_text_size:圓圈內(nèi)文字的大小
注意:
當(dāng)前進(jìn)度和剩余進(jìn)度的高度要一致,圓圈大小和圓圈內(nèi)文字的大小要配合Java代碼調(diào)整。
項(xiàng)目源碼:ProgressBarWithNumber_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android動(dòng)態(tài)自定義圓形進(jìn)度條
- Android編程之ProgressBar圓形進(jìn)度條顏色設(shè)置方法
- Android實(shí)現(xiàn)帶數(shù)字的圓形進(jìn)度條(自定義進(jìn)度條)
- Android編程實(shí)現(xiàn)WebView添加進(jìn)度條的方法
- Android自定義控件實(shí)現(xiàn)圓形進(jìn)度條
- Android自定義Material進(jìn)度條效果
- Android自定義view實(shí)現(xiàn)進(jìn)度條指示效果
- android自定義view制作圓形進(jìn)度條效果
- Android編程基于自定義View實(shí)現(xiàn)絢麗的圓形進(jìn)度條功能示例
- Android實(shí)現(xiàn)環(huán)形進(jìn)度條的實(shí)例
- Android編程實(shí)現(xiàn)類似于圓形ProgressBar的進(jìn)度條效果
相關(guān)文章
Android自定義控件之可拖動(dòng)控制的圓環(huán)控制條實(shí)例代碼
這篇文章主要介紹了Android自定義控件之可拖動(dòng)控制的圓環(huán)控制條實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Android實(shí)現(xiàn)大圖滾動(dòng)顯示效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)大圖滾動(dòng)顯示效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12android TextView不用ScrollViewe也可以滾動(dòng)的方法
這篇文章主要介紹了android TextView不用ScrollViewe也可以滾動(dòng)的方法,很簡(jiǎn)單實(shí)用的代碼,大家參考使用吧2013-11-11Android連接MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Android連接MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)方法,在Android應(yīng)用程序中連接MySQL數(shù)據(jù)庫(kù)可以幫助開(kāi)發(fā)人員實(shí)現(xiàn)更豐富的數(shù)據(jù)管理功能,而且在Android中操作數(shù)據(jù)庫(kù)真的太智能了,需要的朋友可以參考下2024-02-02Android Studio中引入Lambda表達(dá)式的方法
這篇文章主要給大家介紹了在Android Studio中引入Lambda表達(dá)式的方法,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-03-03activity 獲取rootView 設(shè)置backGroundColor的方法
下面小編就為大家?guī)?lái)一篇activity 獲取rootView 設(shè)置backGroundColor的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04android非RxJava環(huán)境下使用Handler實(shí)現(xiàn)預(yù)加載
這篇文章主要介紹了android非RxJava環(huán)境下使用Handler實(shí)現(xiàn)預(yù)加載的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Android編程實(shí)現(xiàn)點(diǎn)擊鏈接打開(kāi)APP功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)點(diǎn)擊鏈接打開(kāi)APP功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android實(shí)現(xiàn)點(diǎn)擊鏈接打開(kāi)APP功能的具體步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01