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

Android自定义View实现炫酷进度条

程序员文章站 2023-11-14 17:27:10
本文实例为大家分享了android实现炫酷进度条的具体代码,供大家参考,具体内容如下 下面我们来实现如下效果: 第一步:创建attrs文件夹,自定义属性: <&...

本文实例为大家分享了android实现炫酷进度条的具体代码,供大家参考,具体内容如下

下面我们来实现如下效果:

Android自定义View实现炫酷进度条

第一步:创建attrs文件夹,自定义属性:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="myprogress">
    <attr name="out_color" format="color"/>
    <attr name="inner_color" format="color"/>
    <attr name="border_width" format="dimension"/>
    <attr name="text_color" format="color"/>
    <attr name="text_size" format="dimension"/>
  </declare-styleable>
</resources>

第二步:自定义view:

/**
 * created by michael on 2019/11/1.
 */
 
public class myprogress extends view {
 
  private int outcolor;
  private int innercolor;
  private int textcolor;
  private float borderwidth;
  private int textsize;
  private paint moutpaint;
  private paint minnerpaint;
  private paint mtextpaint;
  private float percent;
  private int p;
 
  public myprogress(context context) {
    this(context,null);
  }
 
  public myprogress(context context, @nullable attributeset attrs) {
    this(context, attrs,0);
  }
 
  public myprogress(context context, @nullable attributeset attrs, int defstyleattr) {
    super(context, attrs, defstyleattr);
    typedarray array = context.obtainstyledattributes(attrs,r.styleable.myprogress);
    outcolor = array.getcolor(r.styleable.myprogress_out_color, color.green);
    innercolor = array.getcolor(r.styleable.myprogress_inner_color, color.blue);
    textcolor = array.getcolor(r.styleable.myprogress_text_color, color.black);
    borderwidth = array.getdimension(r.styleable.myprogress_border_width,10);
    textsize = array.getdimensionpixelsize(r.styleable.myprogress_text_size,20);
    array.recycle();
    init();
 
 
  }
 
  private void init() {
    moutpaint = new paint();
    moutpaint.setantialias(true);
    moutpaint.setdither(true);
    moutpaint.setstyle(paint.style.stroke);
    moutpaint.setstrokewidth(borderwidth);
    moutpaint.setcolor(outcolor);
 
    minnerpaint = new paint();
    minnerpaint.setantialias(true);
    minnerpaint.setdither(true);
    minnerpaint.setstyle(paint.style.stroke);
    minnerpaint.setstrokewidth(borderwidth);
    minnerpaint.setcolor(innercolor);
 
    mtextpaint = new paint();
    mtextpaint.setantialias(true);
    mtextpaint.setdither(true);
    mtextpaint.setstyle(paint.style.fill);
    mtextpaint.settextsize(textsize);
    mtextpaint.setcolor(textcolor);
 
    percent = 0;
    p = 100;
  }
 
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    int widthmode = measurespec.getmode(widthmeasurespec);
    int heightmode = measurespec.getmode(heightmeasurespec);
    int width = 0,height =0;
    if (widthmode == measurespec.at_most){
 
    }else{
      width = measurespec.getsize(widthmeasurespec);
    }
    if (heightmode == measurespec.at_most){
 
    }else{
      height = measurespec.getsize(heightmeasurespec);
    }
    setmeasureddimension(width>height?height:width,width>height?height:width);
  }
 
  @override
  protected void ondraw(canvas canvas) {
    super.ondraw(canvas);
    int rwidth = getwidth()>getheight()?getheight():getwidth();
    int rheight = getwidth()>getheight()?getheight():getwidth();
    //int rwidth = getwidth();
    //int rheight = getheight();
 
    float radius = rwidth/2 - borderwidth/2;
    canvas.drawcircle(rwidth/2,rheight/2,radius,moutpaint);
 
    rectf r = new rectf(borderwidth/2,borderwidth/2,
        rwidth-borderwidth/2,rheight-borderwidth/2);
    canvas.drawarc(r,0,360*percent,false,minnerpaint);
 
    string s1 = (int)(percent*100) + "%";
    rect r2 = new rect();
    mtextpaint.gettextbounds(s1,0,s1.length(),r2);
    int twidth = r2.width();
    int theight = r2.height();
    paint.fontmetricsint fontmetricsint = new paint.fontmetricsint();
    int dy = (fontmetricsint.bottom-fontmetricsint.top)/2-fontmetricsint.bottom;
    int baseline = theight/2+dy+rheight/2-theight/2;
    int x0 = rwidth/2-twidth/2;
    canvas.drawtext(s1,x0,baseline,mtextpaint);
  }
 
  public void setprogress(float percent,int value){
    this.percent = percent;
    invalidate();
  }
 
 
}

然后在布局中使用:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.constraintlayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.example.michael.view_02.mainactivity">
 
  <com.example.michael.view_02.myprogress
    android:id="@+id/progress"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:out_color="@color/colorprimary"
    app:inner_color="@color/coloraccent"
    app:text_color="@color/colorprimarydark"
    app:border_width="10dp"
    app:text_size="20sp"
    />
 
</android.support.constraint.constraintlayout>

在activity中使用属性动画完成效果:

public class mainactivity extends appcompatactivity {
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    final myprogress progress = findviewbyid(r.id.progress);
    valueanimator animator = valueanimator.ofint(0,5000);
    animator.addupdatelistener(new valueanimator.animatorupdatelistener() {
      @override
      public void onanimationupdate(valueanimator animation) {
        float p = animation.getanimatedfraction();
        int value = (int)animation.getanimatedvalue();
        progress.setprogress(p,value);
      }
    });
    animator.setduration(10000);
    animator.start();
  }
 
 
}

如果我们改动一下代码:

//int rwidth = getwidth();
//int rheight = getheight();

我们使用ondraw()方法的时候如果使用上面的方法确定宽高,将会绘制成下图所示:

Android自定义View实现炫酷进度条

很奇怪!欢迎大家解决此问题。

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