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>

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

(0)

相关推荐

  • Android ListView实现图文列表显示

    本文实例为大家分享了Android ListView实现图文列表显示的具体代码,供大家参考,具体内容如下 目标效果: ListView如果内容过多,可以滑动屏幕来显示,并且点击某一行可使用吐司方法弹出对应的水果名字. 1.新建项目,新建entity实体类包,包中建存储每行水果信息的Fruit类. Fruit.java页面: package com.example.entity; public class Fruit { private int imageId; //使用id锁定水果图片 priv

  • Android SQLite数据库进行查询优化的方法

    前言 数据库的性能优化行业里面普遍偏少,今天这篇希望给大家带来点帮助 SQLite是个典型的嵌入式DBMS,它有很多优点,它是轻量级的,在编译之后很小,其中一个原因就是在查询优化方面比较简单 我们在使用SQLite进行数据存储查询的时候,要进行查询优化,这里就会用到索引,C端的数据量大部分情况下面虽然不是很大,但良好的索引建立习惯往往会带来不错的查询性能提升,同时在未知的将来经得住更大数据的考验,那如何优化数据库查询呢,下面我们用例子一一演示下. 先建个测试表table1,包含了三个索引: sq

  • Android自定义动态壁纸开发(时钟)

    看到有些手机酷炫的动态壁纸,有没有好奇过他们是如何实现的,其实我们自己也可以实现. 先看效果 上图是动态壁纸钟的一个时钟. 我们先来看看 Livewallpaper(即动态墙纸)的实现,Android的动态墙纸并不是GIF图片,而是一个标准的Android应用程序,也就是APK.既然是应用程序,当然意味着天生具有GIF图片不具备的功能--能与用户发生交互,而且动态的背景变化绝不仅仅局限于GIF图片那般只能是固定的几张图片的循环播放.但是我们在这里没有加入与用户交互的动作,只是加入一个时钟(当然时

  • Android动态时钟壁纸开发

    本文实例为大家分享了Android动态时钟壁纸展示的具体代码,供大家参考,具体内容如下 先看效果 上图是动态壁纸钟的一个时钟. 我们先来看看 Livewallpaper(即动态墙纸)的实现,Android的动态墙纸并不是GIF图片,而是一个标准的Android应用程序,也就是APK.既然是应用程序,当然意味着天生具有GIF图片不具备的功能--能与用户发生交互,而且动态的背景变化绝不仅仅局限于GIF图片那般只能是固定的几张图片的循环播放.但是我们在这里没有加入与用户交互的动作,只是加入一个时钟(当

  • Android自定义动态壁纸开发详解

    看到有些手机酷炫的动态壁纸,有没有好奇过他们是如何实现的,其实我们自己也可以实现. 一.动态壁纸原理 如果你了解使用过SurfaceView的话,那么开发一款动态壁纸对你来说其实非常简单. 动态壁纸的本质其实就是一个服务在维护一个动态壁纸引擎Engine,所以我们看到的动态效果其实是通过这个引擎画出来的.而维护这个引擎的服务,就是WallpaperService.本篇文章并不讨论内部实现原理,只是让大家知道如何去实现动态壁纸,所以就不详细说了. 二.实现动态壁纸 大体上可分为三个步骤: 创建自定

  • Android ListView列表视图的使用方法

    前言 当你要将某个从数据库或者文件中获得相当大的数据,在界面中向用户展示的时候,由于定义一个个视图比较麻烦,Android中提供了类似于数组的控件–ListView. 使用方法: 假设我们要转的数据是一个Person对象数组 package cn.zhuangzhihuang.mylist; public class Person { private String name; private String tel; public Person(String name, String tel) {

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

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

  • Android中的sqlite查询数据时去掉重复值的方法实例

    1.方式一: /** * 参数一:是否去重 * 参数二:表名 * 参数三:columns 表示查询的字段,new String[]{MODEL}表示查询该表当中的模式(也表示查询的结果) * 参数思:selection表示查询的条件,PHONE_NUMBER+" = ?" 表示根据手机号去查询模式 * 参数五:selectionArgs 表示查询条件对应的值,new String[]{phoneNumber}表示查询条件对应的值 * 参数六:String groupBy 分组 * 参数

  • Android Studio 通过登录功能介绍SQLite数据库的使用流程

    前言: SQLite简介:是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了.它能够支持Windows/Linux/Unix等等主流的操作系统,同时能够跟很多程序语言相结合,比如 Tcl.C#.PHP.Java等,还有ODBC接口,同样比起Mysql.PostgreSQL这两款开源的世

  • Android三级缓存原理讲解

    三级缓存 内存缓存 本地缓存(SD卡缓存) 网络缓存 缓存顺序:首先从网络获取图片资源,然后将当前的图片缓存到本地,然后再缓存到内存中,那么下次访问图片资源就会优先从内存获取图片资源,如果内存中没有那么再去本地获取图片资源,如果本地还是没有,那么再从网络获取图片资源. 内存缓存 特点: 访问内存速度最快 不浪费流量 本地缓存 特点: 访问速度中等 不浪费流量 网络缓存 特点: 访问速度慢 浪费流量 网络缓存 网络缓存顾名思义就是从网络获取图片资源,然后来进行显示,那么我们可以通过AsyncTas

随机推荐