欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

android自定义view实现数字进度条

程序员文章站 2022-07-04 09:51:21
之前看到过一个数字进度条,一直想写,今天就把这个实现下,想起来也是很简单的,先看下实现的效果: 思路: 绘制2根线 绘制进度条的文字,不断的改变起点和终点,然后没多...

之前看到过一个数字进度条,一直想写,今天就把这个实现下,想起来也是很简单的,先看下实现的效果:

android自定义view实现数字进度条

思路:

绘制2根线 绘制进度条的文字,不断的改变起点和终点,然后没多少时间去更新ui就ok,在这就不画图了,看代码就看的明白,不要想的很复杂!

package com.tuya;
import android.animation.valueanimator;
import android.content.context;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.graphics.rect;
import android.util.attributeset;
import android.view.view;
/**
 * created by admin on 2016/12/19.
 */
public class downloadprogressview extends view {
 private paint paint;//绘制进度条画笔
 private paint textpaint;//绘制文字画笔
 private paint dottepaint;//绘制灰色线画笔
 private int width;
 private int height;
 private int padding =5;
 private int value = 0;
 public downloadprogressview(context context) {
  this(context,null);
 }
 public downloadprogressview(context context, attributeset attrs) {
  this(context, attrs,0);
 }
 public downloadprogressview(context context, attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
  initpaint();
 }
 @override
 protected void onsizechanged(int w, int h, int oldw, int oldh) {
  super.onsizechanged(w, h, oldw, oldh);
  width = w;
  height = h;
 }
 /**
  * 初始化画笔
  */
 private void initpaint() {
  paint = new paint();
  paint.setantialias(true);
  paint.setstrokewidth(2);
  paint.setstyle(paint.style.fill);
  paint.setcolor(color.blue);

  textpaint = new paint();
  textpaint.setantialias(true);
  textpaint.setstrokewidth(3);
  textpaint.setstyle(paint.style.fill);
  textpaint.setcolor(color.blue);
  textpaint.settextsize(12);

  dottepaint = new paint();
  dottepaint.setantialias(true);
  dottepaint.setstrokewidth(2);
  dottepaint.setstyle(paint.style.fill);
  dottepaint.setcolor(color.parsecolor("#e5e5e5"));
 }
 @override
 protected void ondraw(canvas canvas) {
  super.ondraw(canvas);
  string str = value+"%";
  float strwidth = textpaint.measuretext(value+"%")+padding;//绘制文字的宽度 +padding是为了防止在进度条加载完毕的时候文字绘制出现被切掉情况
  rect rect = new rect();
  textpaint.gettextbounds(str,0,str.length(),rect);
  canvas.drawline(0,height/2,value*((width-strwidth)/100),height/2,paint);//绘制进度
  canvas.drawtext(value+"%",value*((width-strwidth)/100)+padding,(height-rect.height())/2+2*padding,textpaint);//绘制进度文字 这个高度+2*padding是因为drawtext是根据基线计算的,要准确的话要去求基线
  canvas.drawline(value*((width-strwidth)/100)+strwidth+padding,height/2,width,height/2,dottepaint);//绘制灰色进度表示剩余多少
  postdelayed(new runnable() {
   @override
   public void run() {
    if(value<100){
     value++;
     postinvalidate();
    }
   }
  },100);
 }
}

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#7ec0ee">
 <com.tuya.downloadprogressview
  android:id="@+id/dpv"
  android:layout_width="fill_parent"
  android:layout_height="30dp"
  android:layout_marginleft="10dp"
  android:layout_marginright="10dp"
  android:layout_margintop="60dp"
  ></com.tuya.downloadprogressview>
</relativelayout>

github:numberprogress

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