热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android实现带数字的圆形进度条(自定义进度条)

在项目开发中经常遇到带圆形进度条的需求,在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());
  }
}

使用

在布局文件中加入:

progress_reached_bar_height:当前进度的高度
progress_unreached_bar_height:剩余进度的高度
progress_text_size:圆圈内文字的大小

注意:

当前进度和剩余进度的高度要一致,圆圈大小和圆圈内文字的大小要配合Java代码调整。

项目源码:

https://github.com/hfrommane/ProgressBarWithNumber

以上所述是小编给大家介绍的Android实现带数字的圆形进度条(自定义进度条),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 本文基于对相关论文和开源代码的研究,详细介绍了LOAM(激光雷达里程计与建图)的工作原理,并对其关键技术进行了分析。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 构建基于BERT的中文NL2SQL模型:一个简明的基准
    本文探讨了将自然语言转换为SQL语句(NL2SQL)的任务,这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践,该比赛提供了金融和通用领域的表格数据,并标注了对应的自然语言与SQL语句对,旨在训练准确的NL2SQL模型。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文介绍如何使用 Sortable.js 库实现元素的拖拽和位置交换功能。Sortable.js 是一个轻量级、无依赖的 JavaScript 库,支持拖拽排序、动画效果和多种插件扩展。通过简单的配置和事件处理,可以轻松实现复杂的功能。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 探讨一个显示数字的故障计算器,它支持两种操作:将当前数字乘以2或减去1。本文将详细介绍如何用最少的操作次数将初始值X转换为目标值Y。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题,特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法,帮助开发者顺利打包并优化应用性能。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
  • 本文详细介绍了如何在 Spring Boot 应用中通过 @PropertySource 注解读取非默认配置文件,包括配置文件的创建、映射类的设计以及确保 Spring 容器能够正确加载这些配置的方法。 ... [详细]
author-avatar
linlidai911_729
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有