Android实现底部带刻度的进度条样式

由于公司需要一个带刻度的进度条样式,网上找了一圈,有些是加个刻度的背景图片,这样对于我的项目来说,不合适,因为刻度需要动态去改变,所以换背景图片的方案肯定是不行的,唯一的办法就是自己绘制一个进度条,进度条的绘制相对来说是比较简单的。我自己对自定义控件这一块也不是很了解,全当学习一下吧,写这篇博客也是记录一下,如果有人也有这样样式的进度条需求,也可以直接拿过去用,比较自己也用过很多大神的东西。

开始就先上图吧

样式就是上图这样了,由于是通过canvas绘制的,所以想要的样式都可以自己去绘制,我这边就搞一个简单的就行了。

首先得继承View,由于这个控件比较简单,我就没有搞那种在布局文件中设值的属性了,继承之后第一步,需要测量布局,得到画布的大小,这个值其实就是我们在布局文件中设置的控件的宽高。

@Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int realWidth = startMeasure(widthMeasureSpec);
    int realHeight = startMeasure(heightMeasureSpec);

    setMeasuredDimension(realWidth, realHeight);
  }
 private int startMeasure(int msSpec) {
    int result = 0;
    int mode = MeasureSpec.getMode(msSpec);
    int size = MeasureSpec.getSize(msSpec);
    if (mode == MeasureSpec.EXACTLY) {
      result = size;
    } else {
      result = PxUtils.dpToPx(400, mContext);
    }
    return result;
  }

这边拿到画布的大小,设置进度条显示的宽度,我这边设置的为画布宽度的80%

@Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = getWidth();
    mHight = getHeight();
    progressWidth = mWidth*0.8f;
  }

然后就是初始化画笔了,具体我就不多赘述了,我使用了五个画笔,分别是进度条背景底框,进度,刻度绘制,刻度下的字,当前数值的文字具体看代码。

private void initPaint() {
    //画进度条静态空心背景
    paintProgressBackground = new Paint();
    paintProgressBackground.setAntiAlias(true);
    paintProgressBackground.setStyle(Paint.Style.STROKE);
    paintProgressBackground.setColor(getResources().getColor(R.color.progressborder));
    paintProgressBackground.setDither(true);
    //画进度的画笔,实心
    paintProgress = new Paint();
    paintProgress.setAntiAlias(true);
    paintProgress.setStyle(Paint.Style.FILL);
    paintProgress.setColor(getResources().getColor(R.color.progressfill));
    paintProgress.setDither(true);
    //画刻度的画笔
    paintNum = new Paint();
    paintNum.setAntiAlias(true);
    paintNum.setColor(getResources().getColor(R.color.progresstext));
    paintNum.setStrokeWidth(2);
    paintNum.setStyle(Paint.Style.FILL);
    paintNum.setDither(true);
    //画刻度数值的画笔
    paintTikeStr = new Paint();
    paintTikeStr.setAntiAlias(true);
    paintTikeStr.setStyle(Paint.Style.FILL);
    paintTikeStr.setTextAlign(Paint.Align.LEFT);
    paintTikeStr.setColor(getResources().getColor(R.color.progresstext));
    paintTikeStr.setTextSize(16);
    //画数值的画笔
    paintText = new Paint();
    paintText.setAntiAlias(true);
    paintText.setColor(getResources().getColor(R.color.progresstext));
    paintText.setStrokeWidth(1);
    paintText.setStyle(Paint.Style.FILL);//实心画笔
    paintText.setDither(true);

  }

接下来就是onDraw方法进行绘制了,用canvas绘制,绘制的起点是你画布的左上角,横向为x,纵向为y,所以绘制的时候只要确定好x,y的坐标,那就好画了。

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    //进度条的底框
    canvas.drawRect(0+leftPadding,0,progressWidth+leftPadding,progressHeight,paintProgressBackground);
    //进度条的当前进度
    canvas.drawRect(0+leftPadding,0,progressWidth*percent+leftPadding,progressHeight,paintProgress);
    drawScale(canvas,percent);

    drawText(canvas,percent);
  }

进度条其实很容易绘制,就是画两个矩形,一个地没有进度的矩形,另一个是当前进度的矩形就行了 ,percent是当前进度的百分比,之所以加个leftPadding是因为如果从0开始就顶到画布左边了,后面画刻度下的字体就会存在截断现象,显示不全。drawRect的每个参数是什么意思我就不多说了,这个很多文章都有介绍。

 /**
   * 绘制刻度和刻度下的数字
   * @param canvas
   * @param percent
   */
  private void drawScale(Canvas canvas,float percent){
    float span = progressWidth/8f;
    for (int i=0;i<9;i++){
      canvas.save(); //记录画布状态
      canvas.translate(span*i+leftPadding, 0);
      canvas.drawLine(0,numY,0,numY+10,paintNum);
      String text = String.valueOf(tikeStrArray[i]);
      Paint.FontMetricsInt fontMetrics = paintTikeStr.getFontMetricsInt();
      float baseline = ((numY + 20) + (fontMetrics.bottom - fontMetrics.top) / 2);
      canvas.drawText(text, -getTextViewLength(paintTikeStr, text) / 2, baseline, paintTikeStr);
      canvas.restore();
    }
  }

跟其他进度条不同的是,带刻度的最重要是怎么绘制刻度了,我这边默认总共9个刻度,可以自行修改,怎么画出刻度线,重要的就是通过canvas的平移,translate来实现,x为每次绘制的位置,画一条就会平移一段距离再画一条,原理就是这样。numY的参数其实就是与画布顶点的距离,由于我的进度条设置的是30的高度,刻度要紧挨着进度底部,所以开始画的y坐标也是30,+10是绘制刻度线的长度,所以刻度线长度就是10。刻度下的文字,也是获取文字的宽度,取中心位置。

  private float getTextViewLength(Paint paint, String text) {
    if (TextUtils.isEmpty(text)) return 0;
    float textLength = paint.measureText(text);
    return textLength;
  }

接下来就是绘制右边显示当前数组的文字了,只要确定好位置,就很简单了。

  * 绘制显示的数值
   * @param canvas
   * @param percent
   */
  private void drawText(Canvas canvas, float percent) {
    if (TextUtils.isEmpty(unit)) return;
    float length;
    paintText.setTextSize(16);
    numerical = StringUtil.floatFormat(startNum + (maxNum - startNum) * percent) + unit;
    length = paintText.measureText(numerical);
    canvas.drawText(numerical,progressWidth+leftPadding+textSpan , length / 2, paintText);
  }

显示的值是多少,也很简单算出来,具体怎么算的再上面的代码中。

基本上这个进度条就完工了,由于是做记录,就没写的很详细了,下面贴一下全部代码。

package com.anderson.dashboardview.view;
 import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import com.anderson.dashboardview.R;
import com.anderson.dashboardview.util.PxUtils;
import com.anderson.dashboardview.util.StringUtil;
/**
 * 带刻度的进度条
 */
public class HorizontalProgressBar extends View {
  private Context mContext;
  private Paint paintProgressBackground;
  private Paint paintProgress;
  private Paint paintNum;
  private Paint paintTikeStr;
  private int mWidth, mHight;
  private float percent = 0;
  private float progressWidth = 320;
  private float startNum;//开始的数值
  private float maxNum;//最大的数值
  private float[] tikeStrArray = null;
  private int tikeGroup;
  private int mTikeCount;//刻度的个数
  private Paint paintText;
  private String unit = "m";//显示单位
  private String numerical;
  private int leftPadding = 25;//左边距
  private int textSpan = 2;//数值文字与进度条的间隔
  private int progressHeight = 30;//进度条高度
  private float numY = 30;//在进度条底部绘制,相当于进度条的高度
  public HorizontalProgressBar(Context context) {
    super(context);
    init(context);
  }
  public HorizontalProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
  }
  public HorizontalProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context);
  }
  private void init(Context context) {
    mContext = context;
    initPaint();
  }
  private void initPaint() {
    //画进度条静态空心背景
    paintProgressBackground = new Paint();
    paintProgressBackground.setAntiAlias(true);
    paintProgressBackground.setStyle(Paint.Style.STROKE);
    paintProgressBackground.setColor(getResources().getColor(R.color.progressborder));
    paintProgressBackground.setDither(true);
    //画进度的画笔,实心
    paintProgress = new Paint();
    paintProgress.setAntiAlias(true);
    paintProgress.setStyle(Paint.Style.FILL);
    paintProgress.setColor(getResources().getColor(R.color.progressfill));
    paintProgress.setDither(true);
    //画刻度的画笔
    paintNum = new Paint();
    paintNum.setAntiAlias(true);
    paintNum.setColor(getResources().getColor(R.color.progresstext));
    paintNum.setStrokeWidth(2);
    paintNum.setStyle(Paint.Style.FILL);
    paintNum.setDither(true);
    //画刻度数值的画笔
    paintTikeStr = new Paint();
    paintTikeStr.setAntiAlias(true);
    paintTikeStr.setStyle(Paint.Style.FILL);
    paintTikeStr.setTextAlign(Paint.Align.LEFT);
    paintTikeStr.setColor(getResources().getColor(R.color.progresstext));
    paintTikeStr.setTextSize(16);
    //画数值的画笔
    paintText = new Paint();
    paintText.setAntiAlias(true);
    paintText.setColor(getResources().getColor(R.color.progresstext));
    paintText.setStrokeWidth(1);
    paintText.setStyle(Paint.Style.FILL);//实心画笔
    paintText.setDither(true);
  }
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = getWidth();
    mHight = getHeight();
    progressWidth = mWidth*0.8f;
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int realWidth = startMeasure(widthMeasureSpec);
    int realHeight = startMeasure(heightMeasureSpec);
    setMeasuredDimension(realWidth, realHeight);
  }
  private int startMeasure(int msSpec) {
    int result = 0;
    int mode = MeasureSpec.getMode(msSpec);
    int size = MeasureSpec.getSize(msSpec);
    if (mode == MeasureSpec.EXACTLY) {
      result = size;
    } else {
      result = PxUtils.dpToPx(400, mContext);
    }
    return result;
  }
  private float getTextViewLength(Paint paint, String text) {
    if (TextUtils.isEmpty(text)) return 0;
    float textLength = paint.measureText(text);
    return textLength;
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //进度条的底框
    canvas.drawRect(0+leftPadding,0,progressWidth+leftPadding,progressHeight,paintProgressBackground);
    //进度条的当前进度
    canvas.drawRect(0+leftPadding,0,progressWidth*percent+leftPadding,progressHeight,paintProgress);
    drawScale(canvas,percent);
    drawText(canvas,percent);
  }
  /**
   * 绘制刻度和刻度下的数字
   * @param canvas
   * @param percent
   */
  private void drawScale(Canvas canvas,float percent){
    float span = progressWidth/8f;
    for (int i=0;i<9;i++){
      canvas.save(); //记录画布状态
      canvas.translate(span*i+leftPadding, 0);
      canvas.drawLine(0,numY,0,numY+10,paintNum);
      String text = String.valueOf(tikeStrArray[i]);
      Paint.FontMetricsInt fontMetrics = paintTikeStr.getFontMetricsInt();
      float baseline = ((numY + 20) + (fontMetrics.bottom - fontMetrics.top) / 2);
      canvas.drawText(text, -getTextViewLength(paintTikeStr, text) / 2, baseline, paintTikeStr);
      canvas.restore();
    }
  }
  /**
   * 绘制显示的数值
   * @param canvas
   * @param percent
   */
  private void drawText(Canvas canvas, float percent) {
    if (TextUtils.isEmpty(unit)) return;
    float length;
    paintText.setTextSize(16);
    numerical = StringUtil.floatFormat(startNum + (maxNum - startNum) * percent) + unit;
    length = paintText.measureText(numerical);
    canvas.drawText(numerical,progressWidth+leftPadding+textSpan , length / 2, paintText);
  }
  /**
   * 设置百分比
   * @param percent
   */
  public void setPercent(int percent) {
     this.percent = percent / 100f;
    invalidate();
  }
  /**
   * 设置起始值
   * @param startNum
   */
  public void setStartNum(float startNum) {
    this.startNum = startNum;
  }
  /**
   * 设置最大值
   * @param maxNum
   */
  public void setMaxNum(float maxNum) {
    this.maxNum = maxNum;
    float[] tikeintArray = new float[9];
    //默认8个大刻度
    tikeintArray[0] = startNum;
    for (int i = 1;i<8;i++){
      tikeintArray[i] = tikeintArray[i-1]+((maxNum-startNum)/8);
    }
    tikeintArray[8] = maxNum;
    setTikeArray(tikeintArray);
  }
  public void setTikeArray(float[] array){
    this.tikeStrArray = array;
    tikeGroup = 5; // 默认1个长刻度间隔4个短刻度,加起来一组5
    if (tikeStrArray != null && tikeStrArray.length != 0) {
      //根据需要绘制的刻度数组大小计算刻度总数
      mTikeCount = (tikeStrArray.length - 1) * tikeGroup + 1;
    } else {
      tikeStrArray = new float[0];
      mTikeCount = 36;
    }
  }
}

总结

以上所述是小编给大家介绍的Android实现底部带刻度的进度条样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • Android进度条控件progressbar使用方法详解

    一.简介 二.方法 1)进度条ProgressBar使用方法 1.在layout布局文件中创建ProgressBar控件 <ProgressBar style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="30&

  • Android实现渐变圆环、圆形进度条效果

    最近做了一个功能,里面涉及到了渐变圆形的需求.就是一个颜色可以渐变的圆环,最后实现的效果如下图: 左图是带渐变效果,右图是不带渐变效果.原理还是绘图,Canvas可以绘制的对象有:弧线(arcs).填充颜色(argb和color). Bitmap.圆(circle和oval).点(point).线(line).矩形(Rect).图片(Picture).圆角矩形 (RoundRect).文本(text).顶点(Vertices).路径(path).通过组合这些对象我们可以画出一些简单有趣的界面出来

  • Android ProgressBar直线进度条的实例代码

    直线进度条效果图: 点击下载后的效果图: 布局xml文件: empty Java代码: package com.example.android_rogressbar; import android.os.Handler; import android.os.Message; import android.os.StrictMode; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import

  • Android自定义View仿华为圆形加载进度条

    View仿华为圆形加载进度条效果图 实现思路 可以看出该View可分为三个部分来实现 最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来 中间显示的文字进度,需要让文字在View中居中显示 旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢 具体实现 先具体细分讲解,博客最后面给出全部源码 (1)首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <resourc

  • Android自定义水平渐变进度条

    先看进度条的效果: 具体实现: 新建类,继承自View,在onDraw中进行绘制: import android.content.Context; import android.graphics.Canvas; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader; import and

  • Android studio圆形进度条 百分数跟随变化

    本文实例为大家分享了Android studio圆形进度条展示的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity impl

  • Android实现底部带刻度的进度条样式

    由于公司需要一个带刻度的进度条样式,网上找了一圈,有些是加个刻度的背景图片,这样对于我的项目来说,不合适,因为刻度需要动态去改变,所以换背景图片的方案肯定是不行的,唯一的办法就是自己绘制一个进度条,进度条的绘制相对来说是比较简单的.我自己对自定义控件这一块也不是很了解,全当学习一下吧,写这篇博客也是记录一下,如果有人也有这样样式的进度条需求,也可以直接拿过去用,比较自己也用过很多大神的东西. 开始就先上图吧 样式就是上图这样了,由于是通过canvas绘制的,所以想要的样式都可以自己去绘制,我这边

  • Android实现水平带刻度的进度条

    本文实例为大家分享了Android实现水平带刻度进度条的具体代码,供大家参考,具体内容如下 效果 1.attrsl.xml <!-- 带刻度的 进度条 -->     <declare-styleable name="HorizontalProgressSeekBar">         <attr name="progressColor" />         <attr name="max" />

  • Android自定义带水滴的进度条样式(带渐变色效果)

    一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

  • Android 自定义圆形带刻度渐变色的进度条样式实例代码

    效果图 一.绘制圆环 圆环故名思意,第一个首先绘制是圆环 1:圆环绘制函数 圆环API public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 参数说明 oval:圆弧所在的椭圆对象. startAngle:圆弧的起始角度. sweepAngle:圆弧的角度. useCenter:是否显示半径连线,true表示显示圆弧与圆心的半径连线,false表示不

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • Android自定义View实现圆环带数字百分比进度条

    分享一个自己制作的Android自定义View.是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动.以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小. 先说一下思路:这个View一共分为三部分:第一部分也就是灰色的圆环部分,代表未完成的进度:第二部分是蓝色的圆弧部分,代表已经完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 下面是View的编写思路: ①:定义三个画笔,分别画灰色圆环,蓝色圆弧,红色文字: ②:

  • Android Webview添加网页加载进度条实例详解

    推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

  • Android实现为Notification加上一个进度条的方法

    本文实例讲述了Android实现为Notification加上一个进度条的方法.分享给大家供大家参考,具体如下: package com.notification; import android.app.Activity; import android.app.Notification; import android.app.NotificationManager; import android.app.PendingIntent; import android.content.Intent;

  • Android 自定义View实现多节点进度条功能

    前言 最近项目有一个节点进度条的小需求,完成后,想分享出来希望可以帮到有需要的同学. 真机效果图 自定义View完整代码 开箱即用~,注释已经炒鸡详细了 /** * @description: 节点进度条 * @author: DMingO * @date: 2020/4/15 */ public class PointProcessBar extends View { /** * 未选中时的连线画笔 */ private Paint mLinePaint; /** * 选中时的连线画笔 */

  • jQuery上传多张图片带进度条样式(DEMO)

    下面一段代码给大家分享jquery上传多种图片带进度条样式,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>xhr2</title> </head> <body> <div style="text-align: center; margin: 100px"> <

随机推荐