Android帶圓形數(shù)字進(jìn)度的自定義進(jìn)度條示例
更新時(shí)間：2017年02月08日 10:21:11 作者：Funzion
本篇文章主要介紹了Android帶圓形數(shù)字進(jìn)度的自定義進(jìn)度條示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
開發(fā)
設(shè)計(jì)搞了一個(gè)帶圓形進(jìn)度的進(jìn)度條，在GitHub上逛了一圈，發(fā)現(xiàn)沒有，自己擼吧。
先看界面效果：
主要思路是寫一個(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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android動態(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自定義控件之可拖動控制的圓環(huán)控制條實(shí)例代碼
這篇文章主要介紹了Android自定義控件之可拖動控制的圓環(huán)控制條實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)大圖滾動顯示效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家分享了Android五子棋游戲程序完整實(shí)例，內(nèi)容豐富，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
android TextView不用ScrollViewe也可以滾動的方法
這篇文章主要介紹了android TextView不用ScrollViewe也可以滾動的方法，很簡單實(shí)用的代碼，大家參考使用吧2013-11-11
Android連接MySQL數(shù)據(jù)庫實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Android連接MySQL數(shù)據(jù)庫實(shí)現(xiàn)方法,在Android應(yīng)用程序中連接MySQL數(shù)據(jù)庫可以幫助開發(fā)人員實(shí)現(xiàn)更豐富的數(shù)據(jù)管理功能,而且在Android中操作數(shù)據(jù)庫真的太智能了,需要的朋友可以參考下2024-02-02
Android Studio中引入Lambda表達(dá)式的方法
這篇文章主要給大家介紹了在Android Studio中引入Lambda表達(dá)式的方法，文中通過圖文介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
activity 獲取rootView 設(shè)置backGroundColor的方法
下面小編就為大家?guī)硪黄猘ctivity 獲取rootView 設(shè)置backGroundColor的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
RecyclerView有很高的自由度，本篇文章主要介紹了android給RecyclerView加上折疊的效果示例，讓RecyclerView帶上折疊的效果，有興趣的可以了解一下。2017-02-02
android非RxJava環(huán)境下使用Handler實(shí)現(xiàn)預(yù)加載
這篇文章主要介紹了android非RxJava環(huán)境下使用Handler實(shí)現(xiàn)預(yù)加載的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Android編程實(shí)現(xiàn)點(diǎn)擊鏈接打開APP功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)點(diǎn)擊鏈接打開APP功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android實(shí)現(xiàn)點(diǎn)擊鏈接打開APP功能的具體步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01