登录
当前位置： 首页 > 编程笔记 >

Android应用中炫酷的横向和环形进度条的实例分享

辛才俊
2023-03-14
本文向大家介绍Android应用中炫酷的横向和环形进度条的实例分享，包括了Android应用中炫酷的横向和环形进度条的实例分享的使用技巧和注意事项，需要的朋友参考一下

一、概述
最近需要用进度条，秉着不重复造轮子的原则，上github上搜索了一番，看了几个觉得比较好看的ProgressBar，比如：daimajia的等。简单看了下代码，基本都是继承自View，彻彻底底的自定义了一个进度条。盯着那绚丽滚动条，忽然觉得，为什么要通过View去写一个滚动条，系统已经提供了ProgressBar以及属于它的特性，我们没必要重新去构建一个，但是系统的又比较丑，不同版本变现还不一定一样。那么得出我们的目标：改变系统ProgressBar的样子。
对没错，我们没有必要去从0打造一个ProgressBar，人家虽然长的不好看，但是特性以及稳定性还是刚刚的，我们只需要为其整下容就ok了。
接下来，我们贴下效果图：
1、横向的进度条

2、圆形的进度条

没错，这就是我们的进度条效果，横向的模仿了daimajia的进度条样子。不过我们继承子ProgressBar，简单的为其整个容，代码清晰易懂 。为什么说，易懂呢？
横向那个进度条，大家会drawLine()和drawText()吧，那么通过getWidth()拿到控件的宽度，再通过getProgress()拿到进度，按比例控制绘制线的长短，字的位置还不是分分钟的事。

二、实现
 横向的滚动条绘制肯定需要一些属性，比如已/未到达进度的颜色、宽度，文本的颜色、大小等。
 本来呢，我是想通过系统ProgressBar的progressDrawable，从里面提取一些属性完成绘制需要的参数的。但是，最终呢，反而让代码变得复杂。所以最终还是改用自定义属性。 说道自定义属性，大家应该已经不陌生了。
1、HorizontalProgressBarWithNumber
（1）自定义属性
values/attr_progress_bar.xml:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 
  <declare-styleable name="HorizontalProgressBarWithNumber"> 
    <attr name="progress_unreached_color" format="color" /> 
    <attr name="progress_reached_color" format="color" /> 
    <attr name="progress_reached_bar_height" format="dimension" /> 
    <attr name="progress_unreached_bar_height" format="dimension" /> 
    <attr name="progress_text_size" format="dimension" /> 
    <attr name="progress_text_color" format="color" /> 
    <attr name="progress_text_offset" format="dimension" /> 
    <attr name="progress_text_visibility" format="enum"> 
      <enum name="visible" value="0" /> 
      <enum name="invisible" value="1" /> 
    </attr> 
  </declare-styleable> 
   
  <declare-styleable name="RoundProgressBarWidthNumber"> 
    <attr name="radius" format="dimension" /> 
  </declare-styleable> 
 
</resources>

（2）构造中获取

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 
   */ 
  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 
   */ 
  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); 
     
    setHorizontalScrollBarEnabled(true); 
 
    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(); 
  }

嗯，看起来代码挺长，其实都是在获取自定义属性，没什么技术含量。

（3）onMeasure
刚才不是出onDraw里面写写就行了么，为什么要改onMeasure呢，主要是因为我们所有的属性比如进度条宽度让用户自定义了，所以我们的测量也得稍微变下。

@Override 
protected synchronized void onMeasure(int widthMeasureSpec, 
    int heightMeasureSpec) 
{ 
  int heightMode = MeasureSpec.getMode(heightMeasureSpec); 
 
  if (heightMode != MeasureSpec.EXACTLY) 
  { 
 
    float textHeight = (mPaint.descent() + mPaint.ascent()); 
    int exceptHeight = (int) (getPaddingTop() + getPaddingBottom() + Math 
        .max(Math.max(mReachedProgressBarHeight, 
            mUnReachedProgressBarHeight), Math.abs(textHeight))); 
 
    heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight, 
        MeasureSpec.EXACTLY); 
  } 
  super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 
}

宽度我们不变，所以的自定义属性不涉及宽度，高度呢，只考虑不是EXACTLY的情况（用户明确指定了，我们就不管了），根据padding和进度条宽度算出自己想要的，如果非EXACTLY下，我们进行exceptHeight封装，传入给控件进行测量高度。
测量完，就到我们的onDraw了~~~
（4）onDraw

@Override 
  protected synchronized void onDraw(Canvas canvas) 
  { 
    canvas.save(); 
    //画笔平移到指定paddingLeft， getHeight() / 2位置，注意以后坐标都为以此为0，0 
    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; 
 
    //如果到达最后，则未到达的进度条不需要绘制 
    if (progressPosX + textWidth > mRealWidth) 
    { 
      progressPosX = mRealWidth - textWidth; 
      noNeedBg = true; 
    } 
 
    // 绘制已到达的进度 
    float endX = progressPosX - mTextOffset / 2; 
    if (endX > 0) 
    { 
      mPaint.setColor(mReachedBarColor); 
      mPaint.setStrokeWidth(mReachedProgressBarHeight); 
      canvas.drawLine(0, 0, endX, 0, mPaint); 
    } 
   
    // 绘制文本 
    if (mIfDrawText) 
    { 
      mPaint.setColor(mTextColor); 
      canvas.drawText(text, progressPosX, -textHeight, mPaint); 
    } 
 
    // 绘制未到达的进度条 
    if (!noNeedBg) 
    { 
      float start = progressPosX + mTextOffset / 2 + textWidth; 
      mPaint.setColor(mUnReachedBarColor); 
      mPaint.setStrokeWidth(mUnReachedProgressBarHeight); 
      canvas.drawLine(start, 0, mRealWidth, 0, mPaint); 
    } 
 
    canvas.restore(); 
 
  } 
 
  @Override 
  protected void onSizeChanged(int w, int h, int oldw, int oldh) 
  { 
    super.onSizeChanged(w, h, oldw, oldh); 
    mRealWidth = w - getPaddingRight() - getPaddingLeft(); 
 
  }

其实核心方法就是onDraw了，但是呢，onDraw也很简单，绘制线、绘制文本、绘制线，结束。

还有两个简单的辅助方法：

/** 
 * 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，你还得考虑progress的更新，考虑状态的销毁与恢复等等复杂的东西。
接下来看我们的RoundProgressBarWidthNumber圆形的进度条。

2、RoundProgressBarWidthNumber   
圆形的进度条和横向的进度条基本变量都是一致的，于是我就让RoundProgressBarWidthNumber extends HorizontalProgressBarWithNumber 了。
然后需要改变的就是测量和onDraw了：
完整代码：

package com.zhy.view; 
 
import android.content.Context; 
import android.content.res.TypedArray; 
import android.graphics.Canvas; 
import android.graphics.Paint.Cap; 
import android.graphics.Paint.Style; 
import android.graphics.RectF; 
import android.util.AttributeSet; 
 
import com.zhy.library.view.R; 
 
public class RoundProgressBarWidthNumber extends 
    HorizontalProgressBarWithNumber { 
  /** 
   * mRadius of view 
   */ 
  private int mRadius = dp2px(30); 
 
  public RoundProgressBarWidthNumber(Context context) { 
    this(context, null); 
  } 
 
  public RoundProgressBarWidthNumber(Context context, AttributeSet attrs) { 
    super(context, attrs); 
 
    mReachedProgressBarHeight = (int) (mUnReachedProgressBarHeight * 2.5f); 
    TypedArray ta = context.obtainStyledAttributes(attrs, 
        R.styleable.RoundProgressBarWidthNumber); 
    mRadius = (int) ta.getDimension( 
        R.styleable.RoundProgressBarWidthNumber_radius, mRadius); 
    ta.recycle(); 
 
    mTextSize = sp2px(14); 
 
    mPaint.setStyle(Style.STROKE); 
    mPaint.setAntiAlias(true); 
    mPaint.setDither(true); 
    mPaint.setStrokeCap(Cap.ROUND); 
 
  } 
 
  @Override 
  protected synchronized void onMeasure(int widthMeasureSpec, 
      int heightMeasureSpec) { 
    int heightMode = MeasureSpec.getMode(heightMeasureSpec); 
    int widthMode = MeasureSpec.getMode(widthMeasureSpec); 
 
    int paintWidth = Math.max(mReachedProgressBarHeight, 
        mUnReachedProgressBarHeight); 
 
    if (heightMode != MeasureSpec.EXACTLY) { 
 
      int exceptHeight = (int) (getPaddingTop() + getPaddingBottom() 
          + mRadius * 2 + paintWidth); 
      heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight, 
          MeasureSpec.EXACTLY); 
    } 
    if (widthMode != MeasureSpec.EXACTLY) { 
      int exceptWidth = (int) (getPaddingLeft() + getPaddingRight() 
          + mRadius * 2 + paintWidth); 
      widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth, 
          MeasureSpec.EXACTLY); 
    } 
 
    super.onMeasure(heightMeasureSpec, heightMeasureSpec); 
 
  } 
 
  @Override 
  protected synchronized void onDraw(Canvas canvas) { 
 
    String text = getProgress() + "%"; 
    // mPaint.getTextBounds(text, 0, text.length(), mTextBound); 
    float textWidth = mPaint.measureText(text); 
    float textHeight = (mPaint.descent() + mPaint.ascent()) / 2; 
 
    canvas.save(); 
    canvas.translate(getPaddingLeft(), getPaddingTop()); 
    mPaint.setStyle(Style.STROKE); 
    // draw unreaded bar 
    mPaint.setColor(mUnReachedBarColor); 
    mPaint.setStrokeWidth(mUnReachedProgressBarHeight); 
    canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); 
    // draw reached bar 
    mPaint.setColor(mReachedBarColor); 
    mPaint.setStrokeWidth(mReachedProgressBarHeight); 
    float sweepAngle = getProgress() * 1.0f / getMax() * 360; 
    canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), 0, 
        sweepAngle, false, mPaint); 
    // draw text 
    mPaint.setStyle(Style.FILL); 
    canvas.drawText(text, mRadius - textWidth / 2, mRadius - textHeight, 
        mPaint); 
 
    canvas.restore(); 
 
  } 
 
}

首先获取它的专有属性mRadius，然后根据此属性去测量，测量完成绘制；
绘制的过程呢？
先绘制一个细一点的圆，然后绘制一个粗一点的弧度，二者叠在一起就行。文本呢，绘制在中间~~~总体，没什么代码量。
好了，两个进度条就到这了，是不是发现简单很多。总体设计上，存在些问题，如果抽取一个BaseProgressBar用于获取公共的属性；然后不同样子的进度条继承分别实现自己的测量和样子，这样结构可能会清晰些~~~

三、使用
布局文件

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  xmlns:zhy="http://schemas.android.com/apk/res-auto" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:padding="25dp" > 
 
    <com.zhy.view.HorizontalProgressBarWithNumber 
      android:id="@+id/id_progressbar01" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="50dip" 
      android:padding="5dp" /> 
 
     
 
    <com.zhy.view.HorizontalProgressBarWithNumber 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="50dip" 
      android:padding="5dp" 
      android:progress="50" 
      zhy:progress_text_color="#ffF53B03" 
      zhy:progress_unreached_color="#ffF7C6B7" /> 
 
    <com.zhy.view.RoundProgressBarWidthNumber 
      android:id="@+id/id_progress02" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="50dip" 
      android:padding="5dp" 
      android:progress="30" /> 
 
    <com.zhy.view.RoundProgressBarWidthNumber 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="50dip" 
      android:padding="5dp" 
      android:progress="50" 
      zhy:progress_reached_bar_height="20dp" 
      zhy:progress_text_color="#ffF53B03" 
      zhy:radius="60dp" /> 
    
  </LinearLayout> 
 
</ScrollView>

MainActivity

package com.zhy.sample.progressbar; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.os.Handler; 
 
import com.zhy.annotation.Log; 
import com.zhy.view.HorizontalProgressBarWithNumber; 
 
public class MainActivity extends Activity { 
 
  private HorizontalProgressBarWithNumber mProgressBar; 
  private static final int MSG_PROGRESS_UPDATE = 0x110; 
 
  private Handler mHandler = new Handler() { 
    @Log 
    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); 
    }; 
  }; 
 
  @Log 
  @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); 
 
  } 
 
}
 类似资料：
  • Android实现环形进度条的实例

    本文向大家介绍Android实现环形进度条的实例，包括了Android实现环形进度条的实例的使用技巧和注意事项，需要的朋友参考一下 Android实现环形进度条的效果图如下： 自定义控件：AttendanceProgressBar 代码如下： 因为是自定义控件，所以在attr.xml文件定义了一些控件属性，以便在xml文件中设置这些属性 代码如下： 最后，在xml文件中，可以这样使用 这只是初步处

  • Android中制作进度框和环形进度条的简单实例分享

    本文向大家介绍Android中制作进度框和环形进度条的简单实例分享，包括了Android中制作进度框和环形进度条的简单实例分享的使用技巧和注意事项，需要的朋友参考一下 进度框 环形进度条 先来看一下效果： 下面直接上代码了： 设置进度刷新显示  调用  setProgress()即可。

  • Android实现环形进度条

    本文向大家介绍Android实现环形进度条，包括了Android实现环形进度条的使用技巧和注意事项，需要的朋友参考一下 一个通俗易懂的环形进度条，可以定制颜色角度，监听进度。 定义一个attrs.xml 自定义CircleProgressView 代码就这么些，接下来我们测算一下 源码：下载地址 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • Android横向进度条演示效果

    本文向大家介绍Android横向进度条演示效果，包括了Android横向进度条演示效果的使用技巧和注意事项，需要的朋友参考一下 进度条：相信大家也都明白，有了进度条，那么给用户就不会造成，长时间的等待而觉得自己的程序挂掉了，所以，这个小demo还是可一看看的，那么接下来，然我们来看看到底是如何实现的。 1.效果图： 2.布局说明： 1.textview显示进度条 2.ProgressBar进度条

  • Android环形进度条(安卓默认形式)实例代码

    本文向大家介绍Android环形进度条(安卓默认形式)实例代码，包括了Android环形进度条(安卓默认形式)实例代码的使用技巧和注意事项，需要的朋友参考一下 Android开发中，有很多的功能在实际应用中都起了很大的作用，比如android进度条的实现方式，下面给大家介绍Android环形进度条(安卓默认形式)，具体内容如下所示： .xml .java 以上内容是小编给大家介绍的Android环

  • 六种酷炫Python运行进度条效果的实现代码

    本文向大家介绍六种酷炫Python运行进度条效果的实现代码，包括了六种酷炫Python运行进度条效果的实现代码的使用技巧和注意事项，需要的朋友参考一下 本文介绍了目前6种比较常用的进度条，让大家都能直观地看到脚本运行最新的进展情况 1.普通进度条 在代码迭代运行中可以自己进行统计计算，并使用格式化字符串输出代码运行进度 进度条1 2.带时间进度条 导入time模块来计算代码运行的时间，加上代码迭代

相关阅读

Android环形进度条(安卓默认形式)实例代码六种酷炫Python运行进度条效果的实现代码Android自定义View实现环形进度条的思路与实例Android实现炫酷的CheckBox效果Android带进度的圆形进度条

相关文章

树形DP概念和实例讲解[实例]Selenium实战应用[实例]Python lxml应用图论中的有向无环图循环调度算法示例

相关问答

图例中的条形标签phonegap android应用程序中固定分区的zxing条形码扫描仪ChartJS条形图，带有每个条形图对应的图例Android-在进度条的中心显示文本使用Xamarin Android应用程序中的条形码扫描仪

相关工具

无尽的进度条进度条FG 骑士进度条纵向Table里嵌套横向Table横向Scrollview添加图片

相关文档

Python 进阶应用教程PWA 应用实战百度分析云使用手册百度统计分析云使用手册基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.