Android实现带数字的圆形进度条(自定义进度条)
更新时间：2017年02月06日 15:33:01 作者：Fun_He
在项目开发中经常遇到带圆形进度条的需求，在GitHub上逛了一圈，发现没有，今天小编抽空给大家分享Android实现带数字的圆形进度条(自定义进度条)，需要的朋友参考下
开发
设计搞了一个带圆形进度的进度条，在GitHub上逛了一圈，发现没有，自己撸吧。
先看界面效果：
主要思路是写一个继承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);
// 覆盖进度高度
protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);
// 覆盖进度颜色
protected int mReachedBarColor = DEFAULT_TEXT_COLOR;
// 未覆盖进度高度
protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);
// 未覆盖进度颜色
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;
// 覆盖的进度
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);
}
// 未覆盖的进度
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：当前进度的高度
progress_unreached_bar_height：剩余进度的高度
progress_text_size：圆圈内文字的大小
注意：
当前进度和剩余进度的高度要一致，圆圈大小和圆圈内文字的大小要配合Java代码调整。
项目源码：
https://github.com/hfrommane/ProgressBarWithNumber
以上所述是小编给大家介绍的Android实现带数字的圆形进度条(自定义进度条)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
解决webview 第二次调用loadUrl页面不刷新的问题
这篇文章主要介绍了解决webview 第二次调用loadUrl页面不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-03-03
这篇文章主要介绍了浅谈Android开发系列网络篇之Retrofit,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
之前我们在使用vue进行 h5 表单录入的过程中，遇到了Android软键盘弹出，覆盖 h5页面 输入框 问题，在此进行回顾并分享给大家,感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，被称之为 Android 世界的Swift，由 JetBrains 设计开发并开源。接下来本文通过实例代码给大家讲解Android中使用Kotlin实现一个简单的登录界面，一起看看吧2017-09-09
登陆界面创建一个复选按钮，通过按钮选取来进行事件处理。若按钮选中记住账号和密码的信息，本文教大家如何使用Android实现记住用户名和密码功能，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了android实现录屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
Android本地存储SharedPreferences详解
这篇文章主要介绍了Android本地存储SharedPreferences详解的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Android Native 内存泄漏系统化解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
在做webview应用时，当输入的文字过多时，输入的提示箭头会移动到输入框外，怎么解决这个问题呢？下面小编给大家介绍Android开发之WebView输入框提示解决办法，一起看看吧2016-06-06
这篇文章主要为大家详细介绍了Android自定义View实现饼状图带动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
最新评论