Android自定义ProgressBar，内部显示图标和文字，文字被进度条覆盖时会变色

最新推荐文章于 2023-10-13 22:03:28 发布
最新推荐文章于 2023-10-13 22:03:28 发布
阅读量1.2w 收藏 20
点赞数 14
分类专栏： Android 自定义UI 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuwan1992/article/details/65442269
版权

不多说，先上效果图：
效果图

Android内置的ProgressBar很鸡肋，样式过于简单，现在需要一个内部能显示图标和文字的ProgressBar，同时，当进度条与图标和文字重叠时，图标和文字会相应变化颜色。这里的关键效果就在于变色的处理，我这里是通过设置相交模式实现这一效果的，应用了SrcIn模式，在图标和文字上方绘制一层白色图层，随progress进度调整图层宽度，当白色图层与图标和文字相交时，会将图标和文字显示为白色。

相交模式

下面看一下主要实现代码：

public class CustomProgressBar extends ProgressBar {

    private Context mContext;
    private Paint mPaint;
    private PorterDuffXfermode mPorterDuffXfermode;
    private float mProgress;
    private int mState;

    // IconTextProgressBar的状态
    private static final int STATE_DEFAULT = 101;
    private static final int STATE_DOWNLOADING = 102;
    private static final int STATE_PAUSE = 103;
    private static final int STATE_DOWNLOAD_FINISH = 104;
    // IconTextProgressBar的文字大小(sp)
    private static final float TEXT_SIZE_SP = 17f;
    // IconTextProgressBar的图标与文字间距(dp)
    private static final float ICON_TEXT_SPACING_DP = 5f;

    public CustomProgressBar(Context context) {
        super(context, null, android.R.attr.progressBarStyleHorizontal);
        mContext = context;
        init();
    }

    public CustomProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
    }

    /**
     * 设置下载状态
     */
    public synchronized void setState(int state) {
        mState = state;
        invalidate();
    }

    /**
     * 设置下载进度
     */
    public synchronized void setProgress(float progress) {
        super.setProgress((int) progress);
        mProgress = progress;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (mState) {
            case STATE_DEFAULT:
                drawIconAndText(canvas, STATE_DEFAULT, false);
                break;

            case STATE_DOWNLOADING:
                drawIconAndText(canvas, STATE_DOWNLOADING, false);
                break;

            case STATE_PAUSE:
                drawIconAndText(canvas, STATE_PAUSE, false);
                break;

            case STATE_DOWNLOAD_FINISH:
                drawIconAndText(canvas, STATE_DOWNLOAD_FINISH, true);
                break;

            default:
                drawIconAndText(canvas, STATE_DEFAULT, false);
                break;
        }
    }

    private void init() {
        setIndeterminate(false);
        setIndeterminateDrawable(ContextCompat.getDrawable(mContext,
                android.R.drawable.progress_indeterminate_horizontal));
        setProgressDrawable(ContextCompat.getDrawable(mContext,
                R.drawable.pb_shape_blue));
        setMax(100);

        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setTextAlign(Paint.Align.LEFT);
        mPaint.setTextSize(MeasureUtil.sp2px(mContext, TEXT_SIZE_SP));
        mPaint.setTypeface(Typeface.MONOSPACE);

        mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    }

    private void initForState(int state) {
        switch (state) {
            case STATE_DEFAULT:
                setProgress(100);
                mPaint.setColor(Color.WHITE);
                break;

            case STATE_DOWNLOADING:
                mPaint.setColor(ContextCompat.getColor(mContext, R.color.pb_blue));
                break;

            case STATE_PAUSE:
                mPaint.setColor(ContextCompat.getColor(mContext, R.color.pb_blue));
                break;

            case STATE_DOWNLOAD_FINISH:
                setProgress(100);
                mPaint.setColor(Color.WHITE);
                break;

            default:
                setProgress(100);
                mPaint.setColor(Color.WHITE);
                break;
        }
    }

    private void drawIconAndText(Canvas canvas, int state, boolean onlyText) {
        initForState(state);

        String text = getText(state);
        Rect textRect = new Rect();
        mPaint.getTextBounds(text, 0, text.length(), textRect);

        if (onlyText) {
            // 仅绘制文字
            float textX = (getWidth() / 2) - textRect.centerX();
            float textY = (getHeight() / 2) - textRect.centerY();
            canvas.drawText(text, textX, textY, mPaint);
        } else {
            // 绘制图标和文字
            Bitmap icon = getIcon(state);

            float textX = (getWidth() / 2) -
                    getOffsetX(icon.getWidth(), textRect.centerX(), ICON_TEXT_SPACING_DP, true);
            float textY = (getHeight() / 2) - textRect.centerY();
            canvas.drawText(text, textX, textY, mPaint);
            float iconX = (getWidth() / 2) - icon.getWidth() -
                    getOffsetX(icon.getWidth(), textRect.centerX(), ICON_TEXT_SPACING_DP, false);
            float iconY = (getHeight() / 2) - icon.getHeight() / 2;
            canvas.drawBitmap(icon, iconX, iconY, mPaint);

            if (state == STATE_DEFAULT) return;

            Bitmap bufferBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
            Canvas bufferCanvas = new Canvas(bufferBitmap);
            bufferCanvas.drawBitmap(icon, iconX, iconY, mPaint);
            bufferCanvas.drawText(text, textX, textY, mPaint);
            // 设置混合模式
            mPaint.setXfermode(mPorterDuffXfermode);
            mPaint.setColor(Color.WHITE);
            RectF rectF = new RectF(0, 0, getWidth() * mProgress / 100, getHeight());
            // 绘制源图形
            bufferCanvas.drawRect(rectF, mPaint);
            // 绘制目标图
            canvas.drawBitmap(bufferBitmap, 0, 0, null);
            // 清除混合模式
            mPaint.setXfermode(null);

            if (!icon.isRecycled()) {
                icon.isRecycled();
            }
            if (!bufferBitmap.isRecycled()) {
                bufferBitmap.recycle();
            }
        }
    }

    private Bitmap getIcon(int state) {
        Bitmap icon;
        switch (state) {
            case STATE_DEFAULT:
                icon = BitmapFactory.decodeResource(getResources(), R.drawable.pb_download);
                break;

            case STATE_DOWNLOADING:
                icon = BitmapFactory.decodeResource(getResources(), R.drawable.pb_pause_blue);

                break;

            case STATE_PAUSE:
                icon = BitmapFactory.decodeResource(getResources(), R.drawable.pb_continue_blue);
                break;

            default:
                icon = BitmapFactory.decodeResource(getResources(), R.drawable.pb_download);
                break;
        }
        return icon;
    }

    private String getText(int state) {
        String text;
        switch (state) {
            case STATE_DEFAULT:
                text = getResources().getString(R.string.pb_download);
                break;

            case STATE_DOWNLOADING:
                DecimalFormat decimalFormat = new DecimalFormat("#0.00");
                text = decimalFormat.format(mProgress) + "%";
                break;

            case STATE_PAUSE:
                text = getResources().getString(R.string.pb_continue);
                break;

            case STATE_DOWNLOAD_FINISH:
                text = getResources().getString(R.string.pb_open);
                break;

            default:
                text = getResources().getString(R.string.pb_download);
                break;
        }
        return text;
    }

    private float getOffsetX(float iconWidth, float textHalfWidth, float spacing, boolean isText) {
        float totalWidth = iconWidth + MeasureUtil.dip2px(mContext, spacing) + textHalfWidth * 2;
        // 文字偏移量
        if (isText) return totalWidth / 2 - iconWidth - spacing;
        // 图标偏移量
        return totalWidth / 2 - iconWidth;
    }

}

这里再补充一种思路，相交模式中还有一种SrcATop，可以通过这种模式叠加绘制两层形状相同进度满格的ProgressBar，蓝色背景的在底部，显示白色字体，白色背景的在顶部，显示蓝色字体，然后利用canvas的clip方法再结合progress进度，将白色的ProgressBar从左往右一点点裁减掉，令底部蓝色的ProgressBar慢慢显示出来，达到一种动态增加的效果。注意这里与前一种实现方式相比还需要多准备一套白色的图标，具体实现可以自行动手尝试。

最后附上第一种实现的源码下载

liuwan1992
关注
  • 14
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android自定义View之圆形进度条
NextWram
03-15 4319
项目中有一个圆形进度条的效果，写下实现过程做记录 效果图 首先创建一个CircleProgressView.java public class CircleProgressView extends View { public CircleProgressView(Context context) { super(context); } public CircleProgressView(Context context, @Nullable Attribut.
android带文字的进度条,Android progressbar实现带底部指示器和文字的进度条
weixin_35276012的博客
05-29 902
本文实例为大家分享了android实现带指示器和文字的进度条，供大家参考，具体内容如下根据项目要求需要实现以下效果：列出源码：public class textprogressbar extends linearlayout {string text;paint mpaint;private rect textrect;private bitmap bitmap;private progressb...
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果
01-07
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果，不适用一张图片实现！ 具体思路：http://blog.csdn.net/springsky_/article/details/17954765
android 进度条 文字,Android控件TextProgressBar进度条上显文字
weixin_39533307的博客
05-27 308
01.public class TextProgressBar extends RelativeLayout implements OnChronometerTickListener {02. public static final String TAG = \"TextProgressBar\";03.04. static final int CHRONOMETER_ID = and...
android中在progressBar上添加文字显示百分比进度
iteye_8620的博客
11-23 1430
工作中遇到ProgressBar上加文字显示的问题，在网上查了下，发现好多都说可以用TextProgressBar来实现，但具体的使用方法却没有。后来在一个黑客网站发现了一个方法。觉得还不错，所以拿来用了，效果也还行。在此分享一下： 一般的ProgressBar都只是一个光光的条(这里说的都是水平进度条)，虽然比不用进度条时给用户的感觉要好，但是如果在形像化的东西上面再加上点文字，将...
css3制作动态进度条以及附加jQuery百分比数字显示
09-25
今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示,其效果对比flash来说却毫不逊色，有一个精致的动画进度条，上面还有当前进度的百分比数字显示，而且还会跟着进度条而移动,需要的朋友可以参考下
Android三种方式实现ProgressBar自定义圆形进度条
01-06
进度条样式在项目中经常可以见到，下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条。 Android进度条有4种风格可以使用。 默认值是progressBarStyle。 设置成progressBarStyleSmall后，图标变小。 设置成progressBarStyleLarge后，图标变大 设置成progressBarStyleHorizontal后，变成横向长方形。 自定义圆形进度条ProgressBar的一般有三种方式: 一、通过动画实现 定义res/anim/loading_anim.xml如下: <?xml version=1.0 en
Android中的花样ProgressBar含源码
05-27
多式样ProgressBar，各大小样式圆形ProgressBar，长形进度条，ProgressDialog 中的圆形进度条，AlertDialog 中的圆形ProgressBar，App Widget 中的进度条。包含源码。
Android 带文字的进度条，文字颜色随进度条的增加而渐变的效果
爆炸哈斯卡的博客
01-13 7282
Android自带的ProgressBar是不带文字的，加文字的话可以参考这篇博客：http://blog.csdn.net/lixiaodaoaaa/article/details/9852327本篇博客主要讲有了文字之后的ProgressBar文字的颜色随着进度条增加，看起来有一种进度条覆盖了文字的颜色，模仿点击下载和暂停等效果，效果如下： 代码中通过不断的重载setProgress方法，不停
android 进度条显示文字,Android控件TextProgressBar进度条上显文字
weixin_42298100的博客
05-29 926
01.public class TextProgressBar extends RelativeLayout implements OnChronometerTickListener {02. public static final String TAG = \"TextProgressBar\";03.04. static final int CHRONOMETER_ID = and...
android 自定义ProgressBar 文字跟随进度效果
六道对穿肠的学习之旅
11-24 2077
1 字体适配 private void textSizeAdaptive() { //1.获取当前设备的屏幕大小 DisplayMetrics displayMetrics = getResources().getDisplayMetrics(); //2.计算与你开发时设定的屏幕大小的纵横比(这里假设你开发时定的屏幕大小是480*800)
Android progressbar实现带底部指示器和文字的进度条
08-26
主要为大家详细介绍了Android progressbar实现带底部指示器和文字的进度条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android的可自定义进度条，允许添加图像，图标，文本，圆弧，圆。-Android开发
05-26
拱形图像进度条ArchedImageProgressBar是适用于AndroidOS的可自定义进度条库，允许添加图像，图标，文本，拱形，圆形和更多样式功能。 入门拱形图像进度栏拱形图像进度栏ArchedImageProgressBar是适用于AndroidOS的...
pycharm安装库报错read time out或者connect time out
最新发布
weixin_63521821的博客
10-13 4139
一、查看python和pycharm的配置环境是否正确。二、查看pip库是否为最新版本，如果不是，更新为最新版本。三、原路径下载太慢，使用镜像下载(清华源一般可以安装成功）
android-ProgressBar加文字
07-16 8634
01     public class MyProgress extends ProgressBar{ 　　02         String text; 　　03         Paint mPaint; 　　04 　　05         public MyProgress(Context context) { 　　06             super(context);
android圆形进度条ProgressBar颜色设置
aoshiwenrou的专栏
10-13 2405
xml布局文件需加入如下的进度条构件： Java代码         android:id="@+id/loadProgressBar"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:indetermi
Android 自定义ProgressBar 文字居中
qq_28884137的博客
03-07 803
android:indeterminate 属性表示为不确定进度条，如果设置为true，则进度条会不停地循环动画，表示任务仍在进行中，无法确定进度。这个例子中，updateProgressBar方法是在后台线程中运行的，通过循环更新进度条的进度，并使用handler.post方法在UI线程中更新ProgressBar的进度。ProgressBar有多种样式可供选择，包括水平进度条、圆形进度条、不确定进度条等。另外，如果需要在后台线程中更新进度条的进度，可以使用Handler和Runnable来实现。
Android简单自定义圆形和水平ProgressBar
热门推荐
其实并不难,是你太悲观
07-22 19万+
ProgressBar
Android 好看的自定义滚动式日期选择控件
菜鸟的自我修养
09-29 5万+
最近接触了日期选择的功能，那么肯定得需要一个日期选择控件，Android 系统有自带的 DatePicker 控件，但是不说这个控件有多 难看吧，现在 Android 手机版本那么多，用户弹出来的控件五花八门的也不太好，所以只好走自定义的道路了。先是在网上找了一 些demo看了看，发现不是很满足自己的需求，但是又懒得自己从头写，就找了一个还不错的demo，对代码进行了一些简化，并添 加了一些...
android 自定义圆形progressbar,Android-自定义ProgressBar实现圆弧进度条
05-24
实现圆弧进度条的自定义ProgressBar，可以使用Canvas和Paint来绘制。 首先，创建一个自定义的ProgressBar类，继承自ProgressBar类，并实现构造方法和onDraw方法： ``` public class CircleProgressBar extends ProgressBar { private Paint paint; // 画笔 private int roundColor; // 圆环颜色 private int progressColor; // 进度条颜色 private int textColor; // 文字颜色 private float textSize; // 文字大小 private float roundWidth; // 圆环宽度 private int max; // 最大进度 private boolean textIsDisplayable; // 是否显示进度文字 private int style; // 进度条样式 public static final int STROKE = 0; public static final int FILL = 1; public CircleProgressBar(Context context) { this(context, null); } public CircleProgressBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CircleProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // 获取自定义属性的值 TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar); roundColor = mTypedArray.getColor(R.styleable.CircleProgressBar_roundColor, Color.RED); progressColor = mTypedArray.getColor(R.styleable.CircleProgressBar_progressColor, Color.GREEN); textColor = mTypedArray.getColor(R.styleable.CircleProgressBar_textColor, Color.GREEN); textSize = mTypedArray.getDimension(R.styleable.CircleProgressBar_textSize, 15); roundWidth = mTypedArray.getDimension(R.styleable.CircleProgressBar_roundWidth, 5); max = mTypedArray.getInteger(R.styleable.CircleProgressBar_max, 100); textIsDisplayable = mTypedArray.getBoolean(R.styleable.CircleProgressBar_textIsDisplayable, true); style = mTypedArray.getInt(R.styleable.CircleProgressBar_style, 0); mTypedArray.recycle(); // 初始化画笔 paint = new Paint(); } @Override protected synchronized void onDraw(Canvas canvas) { super.onDraw(canvas); // 获取圆心坐标和半径 int centerX = getWidth() / 2; int centerY = getHeight() / 2; int radius = (int) (centerX - roundWidth / 2); // 绘制圆环 paint.setColor(roundColor); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(roundWidth); paint.setAntiAlias(true); canvas.drawCircle(centerX, centerY, radius, paint); // 绘制进度条 paint.setStrokeWidth(roundWidth); paint.setColor(progressColor); RectF oval = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius); switch (style) { case STROKE: paint.setStyle(Paint.Style.STROKE); canvas.drawArc(oval, 0, 360 * getProgress() / getMax(), false, paint); break; case FILL: paint.setStyle(Paint.Style.FILL_AND_STROKE); if (getProgress() != 0) canvas.drawArc(oval, 0, 360 * getProgress() / getMax(), true, paint); break; } // 绘制文字 paint.setStrokeWidth(0); paint.setColor(textColor); paint.setTextSize(textSize); paint.setTypeface(Typeface.DEFAULT_BOLD); int percent = (int) (((float) getProgress() / (float) getMax()) * 100); if (textIsDisplayable && percent >= 0) { String text = percent + "%"; float textWidth = paint.measureText(text); canvas.drawText(text, centerX - textWidth / 2, centerY + textSize / 2, paint); } } } ``` 在这个类中，我们定义了几个自定义属性，包括圆环颜色、进度条颜色、文字颜色、文字大小、圆环宽度、最大进度、是否显示进度文字、进度条样式等。在构造方法中，我们获取了这些属性的值，并初始化了画笔。在onDraw方法中，我们首先获取了圆心坐标和半径，然后使用画笔绘制了圆环和进度条，最后绘制了进度文字。 接下来，在布局文件中使用这个自定义ProgressBar： ``` <com.example.circleprogressbar.CircleProgressBar android:id="@+id/circle_progressbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" app:roundColor="#cccccc" app:roundWidth="5dp" app:progressColor="#FF4081" app:textColor="#FF4081" app:textSize="20sp" app:textIsDisplayable="true" app:style="STROKE" /> ``` 最后，在Java代码中设置进度值即可： ``` CircleProgressBar circleProgressBar = findViewById(R.id.circle_progressbar); circleProgressBar.setProgress(50); // 设置进度为50% ``` 这样就完成了自定义的圆弧进度条的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值