Android实现圆形渐变加载进度条

最近设计要求要一个圆形进度条渐变的需求:

1.画圆形进度条

2.解决渐变

最终实现效果代码

package com.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;
import com.fx.R;
public class CompletedView extends View {

  // 画实心圆的画笔
  private Paint mCirclePaint;
  // 画圆环的画笔
  private Paint mRingPaint;
  // 画圆环的画笔背景色
  private Paint mRingPaintBg;
  // 画字体的画笔
  private Paint mTextPaint;
  // 圆形颜色
  private int mCircleColor;
  // 圆环颜色
  private int mRingColor;
  // 圆环背景颜色
  private int mRingBgColor;
  // 半径
  private float mRadius;
  // 圆环半径
  private float mRingRadius;
  // 圆环宽度
  private float mStrokeWidth;
  // 圆心x坐标
  private int mXCenter;
  // 圆心y坐标
  private int mYCenter;
  // 字的长度
  private float mTxtWidth;
  // 字的高度
  private float mTxtHeight;
  // 总进度
  private int mTotalProgress = 100;
  // 当前进度
  private int mProgress;

  private String string;

  public CompletedView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // 获取自定义的属性
    initAttrs(context, attrs);
    initVariable();
  }

  //属性
  private void initAttrs(Context context, AttributeSet attrs) {
    TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
        R.styleable.TasksCompletedView, 0, 0);
    mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
    mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
    mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
    mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
    mRingBgColor = typeArray.getColor(R.styleable.TasksCompletedView_ringBgColor, 0xFFFFFFFF);

    mRingRadius = mRadius + mStrokeWidth / 2;
  }
  RectF oval;
  //初始化画笔
  private void initVariable() {
    oval = new RectF();
    //内圆
    mCirclePaint = new Paint();
    mCirclePaint.setAntiAlias(true);
    mCirclePaint.setColor(mCircleColor);
    mCirclePaint.setStyle(Paint.Style.FILL);
    mCirclePaint.setStrokeCap(Paint.Cap.ROUND);

    //外圆弧背景
    mRingPaintBg = new Paint();
    mRingPaintBg.setAntiAlias(true);
    mRingPaintBg.setColor(mRingBgColor);
    mRingPaintBg.setStyle(Paint.Style.STROKE);
    mRingPaintBg.setStrokeWidth(mStrokeWidth);

    //外圆弧
    mRingPaint = new Paint();
    mRingPaint.setAntiAlias(true);
//    mRingPaint.setColor(mRingColor);
    mRingPaint.setStyle(Paint.Style.STROKE);
    mRingPaint.setStrokeWidth(mStrokeWidth);
    mRingPaint.setStrokeCap(Paint.Cap.ROUND);//设置线冒样式,有圆 有方

    //中间字
    mTextPaint = new Paint();
    mTextPaint.setAntiAlias(true);
    mTextPaint.setStyle(Paint.Style.FILL);
    mTextPaint.setColor(mRingColor);
    mTextPaint.setTextSize(mRadius / 2);

    Paint.FontMetrics fm = mTextPaint.getFontMetrics();
    mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
  }
  SweepGradient sweepGradient;
  //画图
  @Override
  protected void onDraw(Canvas canvas) {
    mXCenter = getWidth() / 2;
    mYCenter = getHeight() / 2;

    //内圆
    canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);

    //外圆弧背景
    RectF oval1 = new RectF();
    oval1.left = (mXCenter - mRingRadius);
    oval1.top = (mYCenter - mRingRadius);
    oval1.right = mRingRadius * 2 + (mXCenter - mRingRadius);
    oval1.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
    canvas.drawArc(oval1, 0, 360, false, mRingPaintBg); //圆弧所在的椭圆对象、圆弧的起始角度、圆弧的角度、是否显示半径连线

    //外圆弧
    if (mProgress > 0 ) {

      oval.left = (mXCenter - mRingRadius);
      oval.top = (mYCenter - mRingRadius);
      oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
      oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
      if (sweepGradient==null) {
        int[] arcColors= new int[]{mRingColor,Color.parseColor("#b05e39"),mRingColor};
        float[] arcPostion=new float[]{0.0f,0.5f,0.95f};
//        sweepGradient = new SweepGradient(mXCenter, mYCenter, mRingColor,Color.parseColor("#b05e39"));
        sweepGradient = new SweepGradient(mXCenter, mYCenter, arcColors,arcPostion);

        Matrix matrix = new Matrix();
        matrix.setRotate(-90,mXCenter,mYCenter);
        sweepGradient.setLocalMatrix(matrix);
        mRingPaint.setShader(sweepGradient);
      }
      canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); //

      //字体
      String txt = mProgress + "%";
      mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
      canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint);
    }
  }
  public void setText(String string){

  }

  //设置进度
  public void setProgress(int progress) {
    mProgress = progress;
    postInvalidate();//重绘
  }
}

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

(0)

相关推荐

  • 实例详解Android自定义ProgressDialog进度条对话框的实现

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

  • 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 ProgressBar进度条使用详解

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

  • Android 七种进度条的样式

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

  • Android中自定义进度条详解

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

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

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

  • android ListView和ProgressBar(进度条控件)的使用方法

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

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

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

随机推荐