自定义Android圆形进度条(附源码)

本文实例讲述了Android自定义圆形进度条,分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

自定义的View:

import com.example.circlepregress.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class RoundProgressBar extends View {

 // 画笔对象的引用
 private Paint paint;

 // 圆环的颜色
 private int roundColor;

 // 圆环进度的颜色
 private int roundProgressColor;

 // 中间进度百分比的字符串的颜色
 private int textColor;

 // 中间进度百分比的字符串的字体
 private float textSize;

 // 圆环的宽度
 private float roundWidth;

 // 最大进度
 private int max;

 // 当前进度
 private int progress;

 // 是否显示中间的进度
 private boolean textIsDisplayable;

 // 进度的风格,实心或者空心
 private int style;

 public static final int STROKE = 0;
 public static final int FILL = 1;

 /**
 * 构造方法
 */
 public RoundProgressBar(Context context) {
 this(context, null);
 }

 public RoundProgressBar(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);

 paint = new Paint();

 TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
  R.styleable.RoundProgressBar);

 // 获取自定义属性和默认值
 roundColor = mTypedArray.getColor(
  R.styleable.RoundProgressBar_roundColor, Color.RED);
 roundProgressColor = mTypedArray.getColor(
  R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);
 textColor = mTypedArray.getColor(
  R.styleable.RoundProgressBar_textColor, Color.GREEN);
 textSize = mTypedArray.getDimension(
  R.styleable.RoundProgressBar_textSize, 15);
 roundWidth = mTypedArray.getDimension(
  R.styleable.RoundProgressBar_roundWidth, 5);
 max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);
 textIsDisplayable = mTypedArray.getBoolean(
  R.styleable.RoundProgressBar_textIsDisplayable, true);
 style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);

 mTypedArray.recycle();
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);

 // 画最外层的大圆环
 int centre = getWidth() / 2; // 获取圆心的x坐标
 int radius = (int) (centre - roundWidth / 2); // 圆环的半径
 paint.setColor(roundColor); // 设置圆环的颜色
 paint.setStyle(Paint.Style.STROKE); // 设置空心
 paint.setStrokeWidth(roundWidth); // 设置圆环的宽度
 paint.setAntiAlias(true); // 消除锯齿
 canvas.drawCircle(centre, centre, radius, paint); // 画出圆环

 Log.e("log", centre + "");

 /**
  * 画进度百分比
  */
 paint.setStrokeWidth(0);
 paint.setColor(textColor);
 paint.setTextSize(textSize);
 paint.setTypeface(Typeface.DEFAULT_BOLD); // 设置字体
 int percent = (int) (((float) progress / (float) max) * 100); // 中间的进度百分比,先转换成float在进行除法运算,不然都为0
 float textWidth = paint.measureText(percent + "%"); // 测量字体宽度,我们需要根据字体的宽度设置在圆环中间

 if (textIsDisplayable && percent != 0 && style == STROKE) {
  canvas.drawText(percent + "%", centre - textWidth / 2, centre
   + textSize / 2, paint); // 画出进度百分比
 }

 /**
  * 画圆弧 ,画圆环的进度
  */

 // 设置进度是实心还是空心
 paint.setStrokeWidth(roundWidth); // 设置圆环的宽度
 paint.setColor(roundProgressColor); // 设置进度的颜色
 RectF oval = new RectF(centre - radius, centre - radius, centre
  + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限

 switch (style) {
 case STROKE: {
  paint.setStyle(Paint.Style.STROKE);
  canvas.drawArc(oval, 0, 360 * progress / max, false, paint); // 根据进度画圆弧
  break;
 }
 case FILL: {
  paint.setStyle(Paint.Style.FILL_AND_STROKE);
  if (progress != 0)
  canvas.drawArc(oval, 0, 360 * progress / max, true, paint); // 根据进度画圆弧
  break;
 }
 }

 }

 public synchronized int getMax() {
 return max;
 }

 /**
 * 设置进度的最大值
 *
 * @param max
 */
 public synchronized void setMax(int max) {
 if (max < 0) {
  throw new IllegalArgumentException("max not less than 0");
 }
 this.max = max;
 }

 /**
 * 获取进度.需要同步
 *
 * @return
 */
 public synchronized int getProgress() {
 return progress;
 }

 /**
 * 设置进度,此为线程安全控件,由于考虑多线的问题,需要同步 刷新界面调用postInvalidate()能在非UI线程刷新
 *
 * @param progress
 */
 public synchronized void setProgress(int progress) {
 if (progress < 0) {
  throw new IllegalArgumentException("progress not less than 0");
 }
 if (progress > max) {
  progress = max;
 }
 if (progress <= max) {
  this.progress = progress;
  postInvalidate();
 }

 }

 /******************** 下边是属性的get、set方法 ***************/
 public int getCricleColor() {
 return roundColor;
 }

 public void setCricleColor(int cricleColor) {
 this.roundColor = cricleColor;
 }

 public int getCricleProgressColor() {
 return roundProgressColor;
 }

 public void setCricleProgressColor(int cricleProgressColor) {
 this.roundProgressColor = cricleProgressColor;
 }

 public int getTextColor() {
 return textColor;
 }

 public void setTextColor(int textColor) {
 this.textColor = textColor;
 }

 public float getTextSize() {
 return textSize;
 }

 public void setTextSize(float textSize) {
 this.textSize = textSize;
 }

 public float getRoundWidth() {
 return roundWidth;
 }

 public void setRoundWidth(float roundWidth) {
 this.roundWidth = roundWidth;
 }

}

所需要的资源文件:attrs.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>

 <declare-styleable name="RoundProgressBar">
 <attr name="roundColor" format="color" />
 <attr name="roundProgressColor" format="color" />
 <attr name="roundWidth" format="dimension"></attr>
 <attr name="textColor" format="color" />
 <attr name="textSize" format="dimension" />
 <attr name="max" format="integer"></attr>
 <attr name="textIsDisplayable" format="boolean"></attr>
 <attr name="style">
  <enum name="STROKE" value="0"></enum>
  <enum name="FILL" value="1"></enum>
 </attr>
 </declare-styleable>

</resources>

布局文件如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:android_custom="http://schemas.android.com/apk/res/com.example.circlepregress"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >

 <com.example.roundprogressbar.RoundProgressBar
 android:id="@+id/roundProgressBar2"
 android:layout_width="80dip"
 android:layout_height="80dip"
 android:layout_alignLeft="@+id/roundProgressBar1"
 android:layout_alignParentBottom="true"
 android:layout_marginBottom="78dp"
 android_custom:roundColor="#D1D1D1"
 android_custom:roundProgressColor="@android:color/black"
 android_custom:roundWidth="10dip"
 android_custom:textColor="#9A32CD"
 android_custom:textSize="18sp" />

 <com.example.roundprogressbar.RoundProgressBar
 android:id="@+id/roundProgressBar4"
 android_custom:style="FILL"
 android:layout_width="80dip"
 android:layout_height="80dip"
 android:layout_alignParentRight="true"
 android:layout_alignTop="@+id/roundProgressBar1"
 android:layout_marginRight="32dp"
 android_custom:roundProgressColor="#C2C2C2"
 android_custom:roundWidth="1dip" />

 <com.example.roundprogressbar.RoundProgressBar
 android:id="@+id/roundProgressBar3"
 android:layout_width="80dip"
 android:layout_height="80dip"
 android:layout_alignLeft="@+id/roundProgressBar4"
 android:layout_alignTop="@+id/roundProgressBar2"
 android_custom:roundColor="#C6E2FF"
 android_custom:roundProgressColor="#CD3333"
 android_custom:roundWidth="10dip"
 android_custom:textIsDisplayable="false" />

 <com.example.roundprogressbar.RoundProgressBar
 android:id="@+id/roundProgressBar5"
 android:layout_width="50dip"
 android:layout_height="50dip"
 android:layout_below="@+id/roundProgressBar1"
 android:layout_marginLeft="22dp"
 android:layout_toRightOf="@+id/roundProgressBar1" />

 <Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_alignParentRight="true"
 android:layout_alignParentTop="true"
 android:text="Button" />

 <com.example.roundprogressbar.RoundProgressBar
 android:id="@+id/roundProgressBar1"
 android:layout_width="80dip"
 android:layout_height="80dip"
 android:layout_alignParentLeft="true"
 android:layout_below="@+id/button1"
 android:layout_marginLeft="16dp"
 android:layout_marginTop="40dp" />

</RelativeLayout>

其中我们使用了这一句:

代码如下:

xmlns:android_custom=http://schemas.android.com/apk/res/com.example.circlepregress

xmlns:android_custom是我们自己定义的标签,res/com.example.circlepregress其中res/后边的就是我们自定义View所在的目录

MainActivity.java如下:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

import com.example.circlepregress.R;

public class MainActivity extends Activity {
 private RoundProgressBar mRoundProgressBar1, mRoundProgressBar2 ,mRoundProgressBar3, mRoundProgressBar4, mRoundProgressBar5;
 private int progress = 0;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_cricle_progress);

 mRoundProgressBar1 = (RoundProgressBar) findViewById(R.id.roundProgressBar1);
 mRoundProgressBar2 = (RoundProgressBar) findViewById(R.id.roundProgressBar2);
 mRoundProgressBar3 = (RoundProgressBar) findViewById(R.id.roundProgressBar3);
 mRoundProgressBar4 = (RoundProgressBar) findViewById(R.id.roundProgressBar4);
 mRoundProgressBar5 = (RoundProgressBar) findViewById(R.id.roundProgressBar5);

 ((Button)findViewById(R.id.button1)).setOnClickListener(new OnClickListener() {

  @Override
  public void onClick(View v) {
  new Thread(new Runnable() {

   @Override
   public void run() {
   while(progress <= 100){
    progress += 3;

    System.out.println(progress);

    mRoundProgressBar1.setProgress(progress);
    mRoundProgressBar2.setProgress(progress);
    mRoundProgressBar3.setProgress(progress);
    mRoundProgressBar4.setProgress(progress);
    mRoundProgressBar5.setProgress(progress);

    try {
    Thread.sleep(100);
    } catch (InterruptedException e) {
    e.printStackTrace();
    }
   }

   }
  }).start();
  }
 });

 }

}

项目免费下载: 《Android自定义圆形进度条》

希望本文所述对大家学习Android软件编程有所帮助。

(0)

相关推荐

  • Android编程实现自定义ProgressBar样式示例(背景色及一级、二级进度条颜色)

    本文实例讲述了Android编程实现自定义ProgressBar样式.分享给大家供大家参考,具体如下: 效果图如下,本例中设置了第一级进度条和第二级进度条. 样式资源:progressbar_bg.xml,放在drawable文件夹下: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/a

  • Android 动态改变SeekBar进度条颜色与滑块颜色的实例代码

    遇到个动态改变SeekBar进度条颜色与滑块颜色的需求,有的是根据不同进度改变成不同颜色. 对于这个怎么做呢?大家都知道设置下progressDrawable与thumb即可,但是这样设置好就是确定的了,要动态更改需要在代码里实现. 用shape进度条与滑块 SeekBar设置 代码里动态设置setProgressDrawable与setThumb 画图形,大家都比较熟悉,background是背景图,secondaryProgress第二进度条,progress进度条: <layer-list

  • Android编程之ProgressBar圆形进度条颜色设置方法

    本文实例讲述了Android ProgressBar圆形进度条颜色设置方法.分享给大家供大家参考,具体如下: 你是不是还在为设置进度条的颜色而烦恼呢--别着急,且看如下如何解决. ProgressBar分圆形进度条和水平进度条 我这里就分享下如何设置圆形进度条的颜色吧,希望对大家会有帮助. 源码如下: 布局文件代码: <ProgressBar android:id="@+id/progressbar" android:layout_width="wrap_content

  • Android自定义水平进度条的圆角进度

    平时项目中经常用到自定义进度条样式,我们一般实现的也是下面的第一种,至于第二种的圆角进度,网上介绍的资料也不是很多,这里一起展示一下这两种的实现. 下面开始看代码,先从主界面布局开始看起: <ProgressBar style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="20dp&qu

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • Android编程自定义进度条颜色的方法详解

    本文实例讲述了Android编程自定义进度条颜色的方法.分享给大家供大家参考,具体如下: 先看效果图: 老是提些各种需求问题,我觉得系统默认的颜色挺好的,但是Pk不过,谁叫我们不是需求人员呢,改吧! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\ 下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到: <style name="Widget.ProgressBar"&

  • Android 自定义ProgressDialog进度条对话框用法详解

    ProgressDialog的基本用法 ProgressDialog为进度对话框.android手机自带的对话框显得比较单一,我们可以通过ProgressDialog来自己定义对话框中将要显示出什么东西. 首先看看progressDialog里面的方法 setProgressStyle:设置进度条风格,风格为圆形,旋转的. setTitlt:设置标题 setMessage:设置提示信息: setIcon:设置标题图标: setIndeterminate:设置ProgressDialog 的进度条

  • Android编程实现自定义进度条颜色的方法

    本文实例讲述了Android编程实现自定义进度条颜色的方法.分享给大家供大家参考,具体如下: android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对android自定义进度条的学习过程! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\  下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到 <style name="Widget.Pro

  • Android中自定义进度条详解

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

  • android自定义进度条渐变圆形

    在安全卫生上,经常看到有圆形的进度条在转动,效果非常好看,于是就尝试去实现一下,具体实现过程不多说了,直接上效果图,先炫耀下. 效果图: 分析:比较常见于扫描结果.进度条等场景 利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变 同样的道理,可以画出长条进度

  • android自定义进度条渐变色View的实例代码

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

随机推荐