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

2024-04-16 15:25:53

本文实例为大家分享了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中自定义进度条详解

Android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如: ok,我们开始吧: 一)变换前背景先来看看progressbar的属性: 复制代码代码如下: <ProgressBar android:id="@+id/progressBar" style="?android:attr/progressBarStyleHor
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO

在做手机开发时,经常碰到一些比较耗时的操作,这个时候进度条就开始派上用场了.这个demo展示了ProgressBar进度条和ProgressDialog进度框.一.ProgressDialog进度框,效果如图所示:代码如下: 复制代码代码如下: //进度对话框按钮监听 class ProssButtonListener implements OnClickListener { @Override public void onClick(View v) {
android ListView和ProgressBar(进度条控件)的使用方法

ListView控件的使用:ListView控件里面装的是一行一行的数据,一行中可能有多列,选中一行,则该行的几列都被选中,同时可以触发一个事件,这种控件在平时还是用得很多的.使用ListView时主要是要设置一个适配器,适配器主要是用来放置一些数据.使用起来稍微有些复杂,这里用的是android自带的SimpleAdapter,形式如下:android.widget.SimpleAdapter.SimpleAdapter(Context context, List<? extends Map<
Android三种方式实现ProgressBar自定义圆形进度条

进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条. Android进度条有4种风格可以使用. 默认值是progressBarStyle. 设置成progressBarStyleSmall后,图标变小. 设置成progressBarStyleLarge后,图标变大设置成progressBarStyleHorizontal后,变成横向长方形. 自定义圆形进度条ProgressBar的一般有三种方式: 一.通过动画实现定义res/a
Android中实现Webview顶部带进度条的方法

写这篇文章,做份备忘,简单滴展示一个带进度条的Webview示例,进度条位于Webview上面. 示例图如下: 主Activity代码: 复制代码代码如下: package com.droidyue.demo.webviewprogressbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.vi
Android文件下载进度条的实现代码

main.xml: 复制代码代码如下: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_paren
实例详解Android自定义ProgressDialog进度条对话框的实现

Android SDK已经提供有进度条组件ProgressDialog组件,但用的时候我们会发现可能风格与我们应用的整体风格不太搭配,而且ProgressDialog的可定制行也不太强,这时就需要我们自定义实现一个ProgressDialog. 通过看源码我们发现,ProgressDialog继承自Alertdialog,有一个ProgressBar和两个TextView组成的,通过对ProgressDialog的源码进行改进就可以实现一个自定义的ProgressDialog. 1.效果: 首先
Android ProgressBar进度条使用详解

ProgressBar进度条,分为旋转进度条和水平进度条,进度条的样式根据需要自定义,之前一直不明白进度条如何在实际项目中使用,网上演示进度条的案例大多都是通过Button点击增加.减少进度值,使用方法incrementProgressBy(int),最简单的做法是在xml布局文件中放置ProgressBar空间,然后再MainActivity中触发事件后执行incrementProgressBy(int),代码如下: <LinearLayout xmlns:android="http:/
android自定义进度条渐变色View的实例代码

最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码 ,大概讲解一下实现思路吧! 复制代码代码如下: package com.spring.progressview; import android.conten
Android 七种进度条的样式

当一个应用在后台执行时,前台界面就不会有什么信息,这时用户根本不知道程序是否在执行.执行进度如何.应用程序是否遇到错误终止等,这时需要使用进度条来提示用户后台程序执行的进度.Android系统提供了两大类进度条样式,长形进度条(progress-BarStyleHorizontal) 和圆形进度条(progressBarStyleLarge).进度条用处很多,比如,应用程序装载资源和网络连接时,可以提示用户稍等,这一类进度条只是代表应用程序中某一部分的执行情况,而整个应用程序执行情况呢,则可以通

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

相关推荐

随机推荐

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