Android 自定义进度条

最新推荐文章于 2025-09-05 00:15:00 发布
转载 最新推荐文章于 2025-09-05 00:15:00 发布 · 454 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.it610.com/article/1232552644023783424.htm

本文详细介绍了一种自定义横向进度条的实现方法，包括继承ProgressBar、设置默认值、获取属性样式、重写onMeasure和onDraw方法等步骤，以及如何在Android中调整进度条的外观和行为。

正文
HorizontalProgressBarWithNumber
横向的进度条；里面有详细的注释

首先继承自ProgressBar，这个是对基础的ProgressBar 进行进一步的自定义，

public class HorizontalProgressBarWithNumber extends ProgressBar{
******
}
当我们想要自定义VIew的时候，先要构思效果，那么就要设置各种属性,如下

/**
* 设置各种默认值
*/
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_SIZE_TEXT_OFFSET = 10;

/**
* painter of all drawing things 所有画图所用的画笔
/
protected Paint mPaint = new Paint();
/*
* color of progress number 进度号码的颜色
/
protected int mTextColor = DEFAULT_TEXT_COLOR;
/*
* size of text (sp) 文本的大小
*/
protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);

/**
 * offset of draw progress  进度条文本补偿宽度
 */
protected int mTextOffset = dp2px(DEFAULT_SIZE_TEXT_OFFSET);

/**
 * height of reached progress bar  进度条高度 
 */
protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);

/**
 * color of reached bar   成功的文本颜色
 */
protected int mReachedBarColor = DEFAULT_TEXT_COLOR;
/**
 * color of unreached bar 未完成的bar颜色
 */
protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR;
/**
 * height of unreached progress bar  未覆盖的进度条高度
 */
protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);
/**
 * view width except padding  除padding外的视图宽度
 */
protected int mRealWidth;

protected boolean mIfDrawText = 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);//文本颜色
}

接下来就是初始化的代码：
/**
* get the styled attributes 获取属性的样式
*
* @param attrs
*/
private void obtainStyledAttributes(AttributeSet attrs)
{
// init values from custom attributes
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);

    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);
    mTextOffset = (int) attributes
            .getDimension(
                    R.styleable.HorizontalProgressBarWithNumber_progress_text_offset,
                    mTextOffset);

    int textVisible = attributes
            .getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility,
                    VISIBLE);
    if (textVisible != VISIBLE)
    {
        mIfDrawText = false;
    }
    attributes.recycle();
}

上面当中的参数和属性都在attr.xml中声明的,如下

接下来，我们要重写onMeasure方法，在其中获取父控件传递过来的参数

protected synchronized void onMeasure(int widthMeasureSpec,
int heightMeasureSpec)
{
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec);//高度
setMeasuredDimension(width, height);//必须调用该方法来存储View经过测量的到的宽度和高度

 mRealWidth = getMeasuredWidth() - getPaddingRight() - getPaddingLeft();//真正的宽度值是减去左右padding

}
其中measureHeight() 方法是获取视图的高度，视图的样式中拥有进度条和文本，要判断文本的高度和进度条的高度；

/**
 *  EXACTLY：父控件告诉我们子控件了一个确定的大小，你就按这个大小来布局。比如我们指定了确定的dp值和macth_parent的情况。 
 *  AT_MOST：当前控件不能超过一个固定的最大值，一般是wrap_content的情况。 
 *  UNSPECIFIED:当前控件没有限制，要多大就有多大，这种情况很少出现。
 * @param measureSpec  
 * @return  视图的高度
 */
private int measureHeight(int measureSpec)
{
    
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);//父布局告诉我们控件的类型
    int specSize = MeasureSpec.getSize(measureSpec);//父布局传过来的视图大小
    if (specMode == MeasureSpec.EXACTLY)
    {
        result = specSize;
    } else
    {
        /**
         * mPaint.descent() 最高点的高度
         * mPaint.ascent() 最低点的高度
         */
        float textHeight = (mPaint.descent() - mPaint.ascent());// 设置文本的高度
        /**
         * Math.abs() 返回绝对值
         *  Math.max 返回最大值
         *  Math.min 返回最小值
         */
        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;
}

以上全部完成后，就可以开始onDraw()方法了;

/**
 * 开始画
 */
@Override
protected synchronized void onDraw(Canvas canvas)
{

    canvas.save();
    /**
     * 设置偏移后的坐标原点 以原来为基础上偏移后， 例如： (100,100), translate(1,1), 坐标原点(101,101);
     */
    canvas.translate(getPaddingLeft(), getHeight() / 2);
    boolean noNeedBg = false;
    float radio = getProgress() * 1.0f / getMax();//设置进度
    float progressPosX = (int) (mRealWidth * radio);//设置当前进度的宽度
    String text = getProgress() + "%";//设置文本

// mPaint.getTextBounds(text, 0, text.length(), mTextBound);

    float textWidth = mPaint.measureText(text);//返回文本的宽度
    float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;//设置文本的高度

    if (progressPosX + textWidth > mRealWidth)
    {//当文本和当前进度的宽度大于bar的宽度时
        progressPosX = mRealWidth - textWidth;
        noNeedBg = true;
    }

    // draw reached bar   画出bar
    float endX = progressPosX - mTextOffset / 2;//绘制已到达的进度
    if (endX > 0)
    {//绘制已到达的进度
        mPaint.setColor(mReachedBarColor);
        mPaint.setStrokeWidth(mReachedProgressBarHeight);
        canvas.drawLine(0, 0, endX, 0, mPaint);
    }
    // draw progress bar
    // measure text bound
    if (mIfDrawText)
    {//绘制文本
        mPaint.setColor(mTextColor);
        canvas.drawText(text, progressPosX, -textHeight, mPaint);
    }

    // draw unreached bar
    if (!noNeedBg)
    {//绘制未到达的进度条
        float start = progressPosX + mTextOffset / 2 + textWidth;
        mPaint.setColor(mUnReachedBarColor);
        mPaint.setStrokeWidth(mUnReachedProgressBarHeight);
        canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
    }
    canvas.restore();
}

在分享两个转换的方法
/**
* dp 2 px
*
* @param dpVal
*/
protected int dp2px(int dpVal)
{
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dpVal, getResources().getDisplayMetrics());
}

/**
 * sp 2 px
 * 
 * @param spVal
 * @return
 */
protected int sp2px(int spVal)
{
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
            spVal, getResources().getDisplayMetrics());

}

最后自定义View 全部实现，奉上全部代码
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_SIZE_TEXT_OFFSET = 10;


/**
 * painter of all drawing things  所有画图所用的画笔
 */
protected Paint mPaint = new Paint();
/**
 * color of progress number  进度号码的颜色
 */
protected int mTextColor = DEFAULT_TEXT_COLOR;
/**
 * size of text (sp)  文本的大小
 */
protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);

/**
 * offset of draw progress  进度条文本补偿宽度
 */
protected int mTextOffset = dp2px(DEFAULT_SIZE_TEXT_OFFSET);

/**
 * height of reached progress bar  进度条高度 
 */
protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);

/**
 * color of reached bar   成功的文本颜色
 */
protected int mReachedBarColor = DEFAULT_TEXT_COLOR;
/**
 * color of unreached bar 未完成的bar颜色
 */
protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR;
/**
 * height of unreached progress bar  未覆盖的进度条高度
 */
protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);
/**
 * view width except padding  除padding外的视图宽度
 */
protected int mRealWidth;

protected boolean mIfDrawText = 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);//文本颜色
}

@Override
protected synchronized void onMeasure(int widthMeasureSpec,
        int heightMeasureSpec)
{
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = measureHeight(heightMeasureSpec);//高度
    setMeasuredDimension(width, height);//必须调用该方法来存储View经过测量的到的宽度和高度

    mRealWidth = getMeasuredWidth() - getPaddingRight() - getPaddingLeft();//真正的宽度值是减去左右padding
}


/**
 *  EXACTLY：父控件告诉我们子控件了一个确定的大小，你就按这个大小来布局。比如我们指定了确定的dp值和macth_parent的情况。 
 *  AT_MOST：当前控件不能超过一个固定的最大值，一般是wrap_content的情况。 
 *  UNSPECIFIED:当前控件没有限制，要多大就有多大，这种情况很少出现。
 * @param measureSpec  
 * @return  视图的高度
 */
private int measureHeight(int measureSpec)
{
    
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);//父布局告诉我们控件的类型
    int specSize = MeasureSpec.getSize(measureSpec);//父布局传过来的视图大小
    if (specMode == MeasureSpec.EXACTLY)
    {
        result = specSize;
    } else
    {
        /**
         * mPaint.descent() 最高点的高度
         * mPaint.ascent() 最低点的高度
         */
        float textHeight = (mPaint.descent() - mPaint.ascent());// 设置文本的高度
        /**
         * Math.abs() 返回绝对值
         *  Math.max 返回最大值
         *  Math.min 返回最小值
         */
        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;
}

/**
 * get the styled attributes  获取属性的样式
 * 
 * @param attrs
 */
private void obtainStyledAttributes(AttributeSet attrs)
{
    // init values from custom attributes
    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);

    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);
    mTextOffset = (int) attributes
            .getDimension(
                    R.styleable.HorizontalProgressBarWithNumber_progress_text_offset,
                    mTextOffset);

    int textVisible = attributes
            .getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility,
                    VISIBLE);
    if (textVisible != VISIBLE)
    {
        mIfDrawText = false;
    }
    attributes.recycle();
}


/**
 * 开始画
 */
@Override
protected synchronized void onDraw(Canvas canvas)
{

    canvas.save();
    /**
     * 设置偏移后的坐标原点 以原来为基础上偏移后， 例如： (100,100), translate(1,1), 坐标原点(101,101);
     */
    canvas.translate(getPaddingLeft(), getHeight() / 2);
    boolean noNeedBg = false;
    float radio = getProgress() * 1.0f / getMax();//设置进度
    float progressPosX = (int) (mRealWidth * radio);//设置当前进度的宽度
    String text = getProgress() + "%";//设置文本

// mPaint.getTextBounds(text, 0, text.length(), mTextBound);

    float textWidth = mPaint.measureText(text);//返回文本的宽度
    float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;//设置文本的高度

    if (progressPosX + textWidth > mRealWidth)
    {//当文本和当前进度的宽度大于bar的宽度时
        progressPosX = mRealWidth - textWidth;
        noNeedBg = true;
    }

    // draw reached bar   画出bar
    float endX = progressPosX - mTextOffset / 2;//设置文本补偿宽度
    if (endX > 0)
    {
        mPaint.setColor(mReachedBarColor);
        mPaint.setStrokeWidth(mReachedProgressBarHeight);
        canvas.drawLine(0, 0, endX, 0, mPaint);
    }
    // draw progress bar
    // measure text bound
    if (mIfDrawText)
    {
        mPaint.setColor(mTextColor);
        canvas.drawText(text, progressPosX, -textHeight, mPaint);
    }

    // draw unreached bar
    if (!noNeedBg)
    {
        float start = progressPosX + mTextOffset / 2 + textWidth;
        mPaint.setColor(mUnReachedBarColor);
        mPaint.setStrokeWidth(mUnReachedProgressBarHeight);
        canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
    }

    canvas.restore();

}

/**
 * dp 2 px
 * 
 * @param dpVal
 */
protected int dp2px(int dpVal)
{
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
            dpVal, getResources().getDisplayMetrics());
}

/**
 * sp 2 px
 * 
 * @param spVal
 * @return
 */
protected int sp2px(int spVal)
{
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
            spVal, getResources().getDisplayMetrics());

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mRealWidth = w - getPaddingRight() - getPaddingLeft();
}

}

实现
xml界面

mainActivity() 实现
public class MainActivity extends Activity {
private HorizontalProgressBarWithNumber mProgressBar;

private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
int progress = mProgressBar.getProgress();
mProgressBar.setProgress(++progress);
if (progress >= 100) {
mHandler.removeMessages(MSG_PROGRESS_UPDATE);
}
mHandler.sendEmptyMessageDelayed(MSG_PROGRESS_UPDATE, 100);
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mProgressBar = (HorizontalProgressBarWithNumber) findViewById(R.id.id_progressbar01);
mHandler.sendEmptyMessage(MSG_PROGRESS_UPDATE);
}
龙华大道1号http://www.kinghill.cn/LongHuaDaDao1Hao/index.html

福伴
关注
Android自定义进度条
LightSun----让成功成为可能!
05-11 2635
Android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子 很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如 ok，我们开始吧：   一）变换前背景   先来看看progressbar的属性： 1.  2.             android:id="@+id/progressBar" 3.             s
Android 自定义进度条
05-22
Android 自定义进度条
Android实现自定义水平渐变进度条（附带源码）
最新发布
欢迎来到我的博客！这里是一个专注于计算机技术的分享平台，涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者，都能在这里找到有价值的内容。
09-05 464
Android实现自定义水平渐变进度条（附带源码）
Android自定义进度条集合（源码）
08-15
Android自定义进度条集合（源码）：固定进度条，可拖动进度条、Seekbar进度条、装逼炫酷进度条、气泡进度条、梅花进度条、IOS进度条、圆形进度条，吃豆豆进度条....，等等27个自定义进度条。源码直接解压可用。也可自行扩展。
android的进度条使用
aofan9566的博客
10-07 173
android的进度条1、实现的效果2、布局代码先写一个my_browser.xml文件 存放WebView<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l...
Android自定义进度条效果
08-27
Android自定义进度条效果详解 Android自定义进度条效果是Android开发中一个常见的需求，主要用于展示进度条的变化过程。以下是Android自定义进度条效果的知识点总结： 1. 自定义进度条效果的思路 在实现Android...
Android自定义进度条的圆角横向进度条实例详解
09-01
首先，我们理解一下Android中的自定义进度条是如何工作的。 1. **自定义进度条的核心概念** - **invalidate()方法**：这个方法用于指示一个View需要重绘，它会将该View添加到UI线程的重绘队列中。当你修改了View的...
Android自定义进度条样式一
08-20
本主题将深入探讨如何创建一个自定义的进度条样式，即“Android自定义进度条样式一”。我们将讨论以下几个关键知识点： 1. **自定义View的原理** 自定义进度条本质上是自定义一个Android的View类。在Android中，你...
android自定义进度条渐变圆形
09-03
在Android开发中，自定义视图是实现特定UI效果的重要手段，本示例中的"android自定义进度条渐变圆形"是一个很好的实践案例，它展示了如何创建一个具有渐变色的圆形进度条。这种进度条常用于显示任务的完成度或扫描...
Android--自定义进度条
本人随手记录，内容只是个人看懂程度，对内容有任何疑问请勿打扰
02-25 244
实际上我们平时看的进度条是图片。比如进度条的背景，然后还有进度条的进度，进度本质上就是一张图片，持续变宽的过程。 这里没有去写例子，只是稍微的理解了下 ...
Android中自定义进度条
weixin_34408624的博客
05-21 80
1 http://my.oschina.net/amigos/blog/59871 2 http://winwyf.blog.51cto.com/4561999/857867 3 待续、、、
android自定义进度条
qq_38308419的博客
01-27 181
Android 自定义进度条
Android自定义进度条实现与效果展示
在Android开发中，自定义控件是一个非常重要的技能，它可以帮助开发者创建出更具个性化的用户...通过本知识点的学习，开发者应该能够掌握Android自定义进度条的制作技巧，并且可以在实际项目中根据需要进行调整和扩展。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值