当前位置： 移动技术网 > IT编程>移动开发>Android > Android studio圆形进度条 百分数跟随变化

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

托尔巴拉德奖章有什么用,台州机场,桃李面包中签号

本文实例为大家分享了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>

效果展示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网