当前位置: 首页 > 编程笔记 >

Android自定义View实现水平带数字百分比进度条

谢誉
2023-03-14
本文向大家介绍Android自定义View实现水平带数字百分比进度条,包括了Android自定义View实现水平带数字百分比进度条的使用技巧和注意事项,需要的朋友参考一下

这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下:


思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度;第二部分是右侧灰色的直线,代表未完成的进度;第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度。

最关键的部分就是要确定百分比文本的确切位置,这里用了paint的getTextBounds方法,得到文本的宽高,然后再精确确定它的位置。

view代码如下:

public class NumberProgressView extends View {
 
  /**
   * 进度条画笔的宽度(dp)
   */
  private int paintProgressWidth = 3;
 
  /**
   * 文字百分比的字体大小(sp)
   */
  private int paintTextSize = 20;
 
  /**
   * 左侧已完成进度条的颜色
   */
  private int paintLeftColor = 0xff67aae4;
 
  /**
   * 右侧未完成进度条的颜色
   */
  private int paintRightColor = 0xffaaaaaa;
 
  /**
   * 百分比文字的颜色
   */
  private int paintTextColor = 0xffff0077;
 
  /**
   * Contxt
   */
  private Context context;
 
  /**
   * 主线程传过来进程 0 - 100
   */
  private int progress;
 
  /**
   * 得到自定义视图的宽度
   */
  private int viewWidth;
 
  /**
   * 得到自定义视图的Y轴中心点
   */
  private int viewCenterY;
 
  /**
   * 画左边已完成进度条的画笔
   */
  private Paint paintleft = new Paint();
 
  /**
   * 画右边未完成进度条的画笔
   */
  private Paint paintRight = new Paint();
 
  /**
   * 画中间的百分比文字的画笔
   */
  private Paint paintText = new Paint();
 
  /**
   * 要画的文字的宽度
   */
  private int textWidth;
 
  /**
   * 画文字时底部的坐标
   */
  private float textBottomY;
 
  /**
   * 包裹文字的矩形
   */
  private Rect rect = new Rect();
 
  /**
   * 文字总共移动的长度(即从0%到100%文字左侧移动的长度)
   */
  private int totalMovedLength;
 
  public NumberProgressView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    // 构造器中初始化数据
    initData();
  }
 
  /**
   * 初始化数据
   */
  private void initData() {
 
    //设置进度条画笔的宽度
    int paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth);
 
    //设置百分比文字的尺寸
    int paintTextSizePx = Utils.sp2px(context, paintTextSize);
 
    // 已完成进度条画笔的属性
    paintleft.setColor(paintLeftColor);
    paintleft.setStrokeWidth(paintProgressWidthPx);
    paintleft.setAntiAlias(true);
    paintleft.setStyle(Style.FILL);
 
    // 未完成进度条画笔的属性
    paintRight.setColor(paintRightColor);
    paintRight.setStrokeWidth(paintProgressWidthPx);
    paintRight.setAntiAlias(true);
    paintRight.setStyle(Style.FILL);
 
    // 百分比文字画笔的属性
    paintText.setColor(paintTextColor);
    paintText.setTextSize(paintTextSizePx);
    paintText.setAntiAlias(true);
    paintText.setTypeface(Typeface.DEFAULT_BOLD);
 
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    getWidthAndHeight();
  }
 
  /**
   * 得到视图等的高度宽度尺寸数据
   */
  private void getWidthAndHeight() {
 
    //得到包围文字的矩形的宽高
    paintText.getTextBounds("000%", 0, "000%".length(), rect);
    textWidth = rect.width();
    textBottomY = viewCenterY + rect.height() / 2;
 
    //得到自定义视图的高度
    int viewHeight = getMeasuredHeight();
    viewWidth = getMeasuredWidth();
    viewCenterY = viewHeight / 2;
    totalMovedLength = viewWidth - textWidth;
 
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
 
    //得到float型进度
    float progressFloat = progress / 100.0f;
 
    //当前文字移动的长度
    float currentMovedLentgh = totalMovedLength * progressFloat;
 
    //画左侧已经完成的进度条,长度为从Veiw左端到文字的左侧
    canvas.drawLine(0, viewCenterY, currentMovedLentgh, viewCenterY, paintleft);
 
    //画右侧未完成的进度条,这个进度条的长度不是严格按照百分比来缩放的,因为文字的长度会变化,所以它的长度缩放比例也会变化
    if (progress < 10) {
      canvas.drawLine(currentMovedLentgh + textWidth * 0.5f, viewCenterY, viewWidth, viewCenterY, paintRight);
    } else if (progress < 100) {
      canvas.drawLine(currentMovedLentgh + textWidth * 0.75f, viewCenterY, viewWidth, viewCenterY, paintRight);
    } else {
      canvas.drawLine(currentMovedLentgh + textWidth, viewCenterY, viewWidth, viewCenterY, paintRight);
    }
 
    //画文字(注意:文字要最后画,因为文字和进度条可能会有重合部分,所以要最后画文字,用文字盖住重合的部分)
    canvas.drawText(progress + "%", currentMovedLentgh, textBottomY, paintText);
  }
 
  /**
   * @param progress 外部传进来的当前进度
   */
  public void setProgress(int progress) {
    this.progress = progress;
    invalidate();
  }
}

调用者activity的代码,设置进度条的进度:

public class NumberProgressBarActivity extends Activity {
 
  protected static final int WHAT_INCREASE = 1;
  private NumberProgressView np_numberProgressBar;
  private int progress;
 
  private Handler handler = new Handler() {
    public void handleMessage(android.os.Message msg) {
      progress++;
      np_numberProgressBar.setProgress(progress);
      handler.sendEmptyMessageDelayed(WHAT_INCREASE, getRadomNumber(50, 200));
      if (progress >= 100) {
        handler.removeMessages(WHAT_INCREASE);
      }
    }
  };
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_number_progress_bar);
    np_numberProgressBar = (NumberProgressView) findViewById(R.id.np_numberProgressBar);
    Button btn_numberProgressBar = (Button) findViewById(R.id.btn_numberProgressBar);
    btn_numberProgressBar.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        increase();
      }
    });
  }
 
  private void increase() {
    progress = 0;
    np_numberProgressBar.setProgress(0);
    handler.removeMessages(WHAT_INCREASE);
    handler.sendEmptyMessage(WHAT_INCREASE);
  }
 
  /**
   * 得到两个整数之间的一个随机数
   *
   * @param start 较小的数
   * @param end  较大的数
   * @return
   */
  public int getRadomNumber(int start, int end) {
    return (int) (start + Math.random() * (end - start));
  }
}

工具方法:

/**
   * 将dip或dp值转换为px值,保证尺寸大小不变
   */
  public static int dip2px(Context context, float dipValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dipValue * scale + 0.5f);
  }
 
  /**
   * 将sp值转换为px值,保证文字大小不变
   */
  public static int sp2px(Context context, float spValue) {
    final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
    return (int) (spValue * fontScale + 0.5f);
  }

布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
 
  <com.example.viewdemo.view.NumberProgressView
    android:id="@+id/np_numberProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:layout_margin="20dp"
    android:background="#33890075"
    />
 
  <Button
    android:id="@+id/btn_numberProgressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="开始"/>
 
</LinearLayout>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android自定义View实现圆环带数字百分比进度条,包括了Android自定义View实现圆环带数字百分比进度条的使用技巧和注意事项,需要的朋友参考一下 分享一个自己制作的Android自定义View。是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动。以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小。 先说一下思路:这个

  • 本文向大家介绍Android自定义view实现水波进度条控件,包括了Android自定义view实现水波进度条控件的使用技巧和注意事项,需要的朋友参考一下 通过自定义view实现了一个水滴滴落到水波面,溅起水花并且水波流动上涨的进度条控件。之前看到过好多水波流动的进度条,感觉欠缺些东西,就想到了水滴到水平面,溅起水花然后水流动上涨的进度条效果,于是自己动手写了出来。效果如下,视频录制有些卡顿,实际

  • 本文向大家介绍Android自定义view实现水波纹进度球效果,包括了Android自定义view实现水波纹进度球效果的使用技巧和注意事项,需要的朋友参考一下 今天我们要实现的这个view没有太多交互性的view,所以就继承view。 自定义view的套路,套路很深       1、获取我们自定义属性attrs(可省略)       2、重写onMeasure方法,计算控件的宽和高       3

  • 本文向大家介绍Android  view自定义实现动态进度条,包括了Android  view自定义实现动态进度条的使用技巧和注意事项,需要的朋友参考一下 Android  自定义view实现动态进度条 效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧、顶部、右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个

  • 我试图创建一个进度条,当它水平前进时,进度条本身会以垂直旋转的方式进行动画。我通过以下方式成功地使用了我的进度绘图功能: 这是我的画: 但我希望它在前进的过程中有一个微妙的滚动效果。所以看起来垂直线在向后移动。你明白了吗?非常感谢您的帮助。谢谢 编辑:我尝试创建一个动画列表作为我的进度绘图,但我仍然不能看到动画。动画列表可以在进度项目的剪辑中吗?

  • 本文向大家介绍Android自定义水平进度条的圆角进度,包括了Android自定义水平进度条的圆角进度的使用技巧和注意事项,需要的朋友参考一下 平时项目中经常用到自定义进度条样式,我们一般实现的也是下面的第一种,至于第二种的圆角进度,网上介绍的资料也不是很多,这里一起展示一下这两种的实现。 下面开始看代码,先从主界面布局开始看起: 两个进度条布局,然后是不同的progressDrawable布局: