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

Android自定义水平渐变进度条

程序员文章站 2023-12-18 21:36:52
先看进度条的效果: 具体实现: 新建类,继承自view,在ondraw中进行绘制: import android.content.context; im...

先看进度条的效果:

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 android.util.attributeset;
import android.util.log;
import android.view.view;

/**
 *
 * 自定义 进度条
 * created by wenjing.tang on 2017/8/7.
 */

public class customizedprogressbar extends view {

 private float maxcount = 100; //进度条最大值
 private float currentcount; //进度条当前值
 // private paint mpaint ;
 private int mwidth,mheight;
 private context mcontext;

 public customizedprogressbar(context context, attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
  initview(context);
 }

 public customizedprogressbar(context context, attributeset attrs) {
  super(context, attrs);
  initview(context);
 }

 public customizedprogressbar(context context) {
  super(context);
  initview(context);
 }

 private void initview(context context) {
  mcontext=context;
 }

 @override
 protected void ondraw(canvas canvas) {
  super.ondraw(canvas);
  paint mpaint = new paint();
  mpaint.setantialias(true);
  int round = mheight/2; //半径

  mpaint.setcolor(getresources().getcolor(r.color.white_alpha)); //设置边框背景颜色
  rectf rectbg = new rectf(0, 0, mwidth, mheight);
  canvas.drawroundrect(rectbg, round, round, mpaint);//绘制 最外面的大 圆角矩形,背景为白色

  float section = currentcount/maxcount; //进度条的比例
  rectf rectprogressbg = new rectf(0, 0, mwidth*section, mheight);

  log.e("customizedprogressbar", currentcount+"");
  log.e("customizedprogressbar", section+"");

  //paint设置setcolor(白色无透明)和setshader,只让setshader生效;不然前面setcolor设置了透明度,透明度会生效,和setshader效果叠加
  mpaint.setcolor(getresources().getcolor(r.color.white));
  mpaint.setshader(getlineargradient());
  canvas.drawroundrect(rectprogressbg, round, round, mpaint); //最左边的圆角矩形

  if (maxcount != currentcount){ //如果不是100%,绘制第三段矩形
   rectf rectprogressbg2 = new rectf(mwidth*section-round, 0, mwidth*section, mheight);
   mpaint.setshader(getlineargradient());
   canvas.drawrect(rectprogressbg2, mpaint);
  }
 }

 private lineargradient lineargradient;
 private lineargradient getlineargradient(){
  if(lineargradient==null){
   lineargradient = new lineargradient(0, 0, getwidth(), mheight, new int[]{mcontext.getresources().getcolor(r.color.progress_color_1),
     mcontext.getresources().getcolor(r.color.progress_color_2)}, null, shader.tilemode.clamp); //根据r文件中的id获取到color
  }
  return lineargradient;
 }

 private int diptopx(int dip) {
  float scale = getcontext().getresources().getdisplaymetrics().density;
  return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
 }

 /***
  * 设置最大的进度值
  * @param maxcount 最大的进度值
  */
 public void setmaxcount(float maxcount) {
  this.maxcount = maxcount;
 }

 /***
  * 设置当前的进度值
  * @param currentcount 当前进度值
  */
 public void setcurrentcount(float currentcount) {
  this.currentcount = currentcount > maxcount ? maxcount : currentcount;
  invalidate();
 }

 public float getmaxcount() {
  return maxcount;
 }

 public float getcurrentcount() {
  return currentcount;
 }

 @override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
  int widthspecmode = measurespec.getmode(widthmeasurespec);
  int widthspecsize = measurespec.getsize(widthmeasurespec);
  int heightspecmode = measurespec.getmode(heightmeasurespec);
  int heightspecsize = measurespec.getsize(heightmeasurespec);
  if (widthspecmode == measurespec.exactly || widthspecmode == measurespec.at_most) {
   mwidth = widthspecsize;
  } else {
   mwidth = 0;
  }
  if (heightspecmode == measurespec.at_most || heightspecmode == measurespec.unspecified) {
   mheight = diptopx(18);
  } else {
   mheight = heightspecsize;
  }
  setmeasureddimension(mwidth, mheight);
 }
}

其中用到的一些资源文件如下:

<!--自定义进度条背景颜色-->
<color name="white_alpha">#0c000000</color>

<!--自定义进度条渐变颜色-->
<color name="progress_color_1">#ff916b</color>
<color name="progress_color_2">#ffa94c</color>

要注意的是,在上面java代码中,mpaint.setcolor(getresources().getcolor(r.color.white));这行很重要,因为进度条总共有三层,第一层是最外面的背景,第二层是进度,第三层如果不是100%才绘制,由于第一层背景有透明度,所以setcolor设置了透明度,但虽然setshader,透明度还是会生效,两者效果叠加,效果是这样:

Android自定义水平渐变进度条

加上之后,paint 第二次设置 setcolor (白色无透明)和 setshader,只让 setshader 生效,进度条才会达到满意的效果;

用法:

java代码中:

 customizedprogressbar.setmaxcount(100);
 integrity = datacount/total_count *100; //根据自己情况来初始化完整度
 customizedprogressbar.setcurrentcount((int) integrity);
 mtvtdataintegrity.settext("完整度" + (int) integrity +"%");      

xml文件中(不需要文字显示也可以):

 <relativelayout
     android:layout_width="match_parent"
     android:layout_height="18dp"
     android:layout_marginstart="66dp"
     android:layout_marginend="66dp"
     android:layout_centervertical="true">

     <com.text.widget.customizedprogressbar
      android:id="@+id/progress"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_centerinparent="true"/>

     <textview
      android:id="@+id/tv_data_integrity"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      tools:text="完整度35%"
      android:textsize="10sp"
      android:layout_centerinparent="true"/>
 </relativelayout>

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

上一篇:

下一篇: