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

Android studio圆形进度条 百分数跟随变化

程序员文章站 2023-12-13 22:49:04
本文实例为大家分享了android studio圆形进度条展示的具体代码,供大家参考,具体内容如下 mainactivity import android....

本文实例为大家分享了android studio圆形进度条展示的具体代码,供大家参考,具体内容如下

mainactivity

import android.support.v7.app.appcompatactivity;
import android.os.bundle;
import android.view.view;
import android.widget.button;

public class mainactivity extends appcompatactivity implements view.onclicklistener{
 private gua mgua1;
 private button play;
 private button resele;
 private button dao;
 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  mgua1 = (gua) findviewbyid(r.id.circle);
  mgua1.settargetpercent(0);
  play=(button)findviewbyid(r.id.play);
  resele=(button)findviewbyid(r.id.resele);
  dao=(button)findviewbyid(r.id.dao);

  play.setonclicklistener(this);
  resele.setonclicklistener(this);
  dao.setonclicklistener(this);
 }

 @override
 public void onclick(view view) {
  switch (view.getid()){
   case r.id.play:
    //设置目标百分比为100
    mgua1.settargetpercent(100);
    mgua1.invalidate();
    break;
   case r.id.resele:
    //设置目标百分比为0
    mgua1.settargetpercent(0);
    mgua1.invalidate();
    break;
   case r.id.dao:
    //设置目标百分比为100
    mgua1.settargetpercent(0);
    mgua1.invalidate();
    break;
  }
 }
}

gua

import android.content.context;
import android.content.res.typedarray;
import android.graphics.canvas;
import android.graphics.paint;
import android.graphics.paint.align;
import android.graphics.rectf;
import android.util.attributeset;
import android.view.view;

public class gua extends view{
 private paint mcirclepaint;
 private paint mtextpaint;
 private paint marcpaint;
 private int mcirclex;
 private int mcircley;
 private float mcurrentangle;
 private rectf marcrectf;
 private float mstartsweepvalue;
 private float mtargetpercent;
 private float mcurrentpercent;

 private int mradius;
 private int mcirclebackground;
 private int mringcolor;
 private int mtextsize;
 private int mtextcolor;


 public gua(context context, attributeset attrs, int defstyle) {
  super(context, attrs, defstyle);
  init(context);
 }

 public gua(context context, attributeset attrs) {
  super(context, attrs);
  //自定义属性 values/attr
  typedarray typedarray = context.obtainstyledattributes(attrs,r.styleable.percentagering);
  //中间圆的背景颜色 默认为浅紫色
  mcirclebackground = typedarray.getcolor(r.styleable.percentagering_circlebackground, 0xffafb4db);
  //外圆环的颜色 默认为深紫色
  mringcolor = typedarray.getcolor(r.styleable.percentagering_ringcolor, 0xff6950a1);
  //中间圆的半径 默认为60
  mradius = typedarray.getint(r.styleable.percentagering_radius, 60);
  //字体颜色 默认为白色
  mtextcolor = typedarray.getcolor(r.styleable.percentagering_textcolor, 0xffffffff);
  //最后一定要调用这个 释放掉typedarray
  typedarray.recycle();
  //初始化数据
  init(context);
 }

 public gua(context context) {
  super(context);
  init(context);
 }

 private void init(context context){
  //圆环开始角度 -90° 正北方向
  mstartsweepvalue = -90;
  //当前角度
  mcurrentangle = 0;
  //当前百分比
  mcurrentpercent = 0;
  //设置中心园的画笔
  mcirclepaint = new paint();
  mcirclepaint.setantialias(true);
  mcirclepaint.setcolor(mcirclebackground);
  mcirclepaint.setstyle(paint.style.fill);
  //设置文字的画笔
  mtextpaint = new paint();
  mtextpaint.setcolor(mtextcolor);
  mtextpaint.setantialias(true);
  mtextpaint.setstyle(paint.style.fill);
  mtextpaint.setstrokewidth((float) (0.025*mradius));
  mtextpaint.settextsize(mradius/2);
  mtextpaint.settextalign(align.center);
  //设置外圆环的画笔
  marcpaint = new paint();
  marcpaint.setantialias(true);
  marcpaint.setcolor(mringcolor);
  marcpaint.setstyle(paint.style.stroke);
  marcpaint.setstrokewidth((float) (0.075*mradius));
  //获得文字的字号 因为要设置文字在圆的中心位置
  mtextsize = (int) mtextpaint.gettextsize();


 }

 //主要是测量wrap_content时候的宽和高,因为宽高一样,只需要测量一次宽即可,高等于宽
 @override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
  setmeasureddimension(measure(widthmeasurespec), measure(widthmeasurespec));
  //设置圆心坐标
  mcirclex = getmeasuredwidth()/2;
  mcircley = getmeasuredheight()/2;
  //如果半径大于圆心横坐标,需要手动缩小半径的值,否则就画到外面去了
  if (mradius>mcirclex) {
   //设置半径大小为圆心横坐标到原点的距离
   mradius = mcirclex;
   mradius = (int) (mcirclex-0.075*mradius);
   //因为半径改变了,所以要重新设置一下字体宽度
   mtextpaint.setstrokewidth((float) (0.025*mradius));
   //重新设置字号
   mtextpaint.settextsize(mradius/2);
   //重新设置外圆环宽度
   marcpaint.setstrokewidth((float) (0.075*mradius));
   //重新获得字号大小
   mtextsize = (int) mtextpaint.gettextsize();
  }
  //画中心园的外接矩形,用来画圆环用
  marcrectf = new rectf(mcirclex-mradius, mcircley-mradius, mcirclex+mradius, mcircley+mradius);
 }

 //当wrap_content的时候,view的大小根据半径大小改变,但最大不会超过屏幕
 private int measure(int measurespec){
  int result=0;
  int specmode = measurespec.getmode(measurespec);
  int specsize = measurespec.getsize(measurespec);
  if (specmode == measurespec.exactly) {
   result = specsize;
  }else {
   result =(int) (1.075*mradius*2);
   if (specmode == measurespec.at_most) {
    result = math.min(result, specsize);
   }
  }
  return result;

 }
 //开始画中间圆、文字和外圆环
 @override
 protected void ondraw(canvas canvas) {
  super.ondraw(canvas);
  //画中间圆
  canvas.drawcircle(mcirclex, mcircley, mradius, mcirclepaint);
  //画圆环
  canvas.drawarc(marcrectf, mstartsweepvalue ,mcurrentangle, false, marcpaint);
  //画文字
  canvas.drawtext(string.valueof(mcurrentpercent)+"%", mcirclex, mcircley+mtextsize/4, mtextpaint);
  //判断当前百分比是否小于设置目标的百分比
  if (mcurrentpercent<mtargetpercent) {
   //当前百分比+1
   mcurrentpercent+=1;
   //当前角度+360
   mcurrentangle+=3.6;
   //每10ms重画一次
   postinvalidatedelayed(10);
  }/*else if(mcurrentpercent==mtargetpercent){
   //当前百分比-1
   mcurrentpercent=0;
   //当前角度+360
   mcurrentangle=0;
   //每10ms重画一次
   postinvalidatedelayed(10);
  }*/else if(mcurrentpercent>mtargetpercent){
   //当前百分比-1
   mcurrentpercent-=1;
   //当前角度+360
   mcurrentangle-=3.6;
   //每10ms重画一次
   postinvalidatedelayed(10);
  }

 }
 //设置目标的百分比
 public void settargetpercent(int percent){
  this.mtargetpercent = percent;
 }
}

xml文件

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical">
 <button
  android:id="@+id/but1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="改变外层圆环颜色"
  />
 <com.bwie.test.wuxiaorui1508a20171009.gua
  android:id="@+id/circle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:radius="90"
  app:textcolor="#ffffffff"
  />
 <linearlayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:gravity="center"
  >
  <button
   android:id="@+id/play"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="开始"
   />
  <button
   android:id="@+id/resele"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="重置"
   />
  <button
   android:id="@+id/dao"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="暂停"
   />
 </linearlayout>
</linearlayout>

values文件中的attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="percentagering">
  <attr name="radius" format="integer"/>
  <attr name="circlebackground" format="color"/>
  <attr name="ringcolor" format="color"/>
  <attr name="textcolor" format = "color"/>

 </declare-styleable>
</resources>


效果展示:

Android studio圆形进度条 百分数跟随变化

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

上一篇:

下一篇: