Android实现渐变圆环、圆形进度条效果

最近做了一个功能,里面涉及到了渐变圆形的需求。就是一个颜色可以渐变的圆环,最后实现的效果如下图:

左图是带渐变效果,右图是不带渐变效果。原理还是绘图,Canvas可以绘制的对象有:弧线(arcs)、填充颜色(argb和color)、 Bitmap、圆(circle和oval)、点(point)、线(line)、矩形(Rect)、图片(Picture)、圆角矩形 (RoundRect)、文本(text)、顶点(Vertices)、路径(path)。通过组合这些对象我们可以画出一些简单有趣的界面出来,但是光有这些功能还是不够的,如果我要画一个仪表盘(数字围绕显示在一个圆圈中)呢? 幸好Android还提供了一些对Canvas位置转换的方法:rorate、scale、translate、skew(扭曲)等,而且它允许你通过获得它的转换矩阵对象(getMatrix方法,不知道什么是转换矩阵?)  直接操作它。这些操作就像是虽然你的笔还是原来的地方画,但是画纸旋转或者移动了,所以你画的东西的方位就产生变化。为了方便一些转换操作,Canvas 还提供了保存和回滚属性的方法(save和restore),比如你可以先保存目前画纸的位置(save),然后旋转90度,向下移动100像素后画一些图形,画完后调用restore方法返回到刚才保存的位置。

话不多说,上代码

核心类:

自定义控件 CircleProgressBar

package com.jky.mobile_xmxt.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

import com.jky.mobile_xmxt.R;

import java.text.DecimalFormat;

/**
 * 圆盘计步图表
 */
public class CircleProgressBar extends View {

 private RectF mWheelRect = new RectF();
 private Paint mDefaultWheelPaint;
 private Paint mFinishWheelPaint;
 private Paint mCenterWheelPaint;
 private Paint mTitlePaint, mStepPaint, mTargetPaint;
 private float mCircleStrokeWidth;
 private float mSweepAnglePer;
 private float mPercent;
 private int mStepNum, mCurrStepNum;
 private float pressExtraStrokeWidth;
 private BarAnimation mAnim;
 private int mMaxStepNum;// 默认最大步数
 private float mTitleY, mStepY, mTargetY;
 private DecimalFormat mDecimalFormat = new DecimalFormat("#.0");// 格式为保留小数点后一位
 public static String GOAL_STEP;
 public static String PERCENT;

 public CircleProgressBar(Context context) {
 super(context);
 init(null, 0);
 }

 public CircleProgressBar(Context context, AttributeSet attrs) {
 super(context, attrs);
 init(attrs, 0);
 }

 public CircleProgressBar(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 init(attrs, defStyle);
 }

 private void init(AttributeSet attrs, int defStyle) {

 mFinishWheelPaint = new Paint();
 mFinishWheelPaint.setColor(Color.rgb(100, 113, 205));
 mFinishWheelPaint.setStyle(Paint.Style.STROKE);// 空心
 mFinishWheelPaint.setStrokeCap(Paint.Cap.ROUND);// 圆角画笔
 mFinishWheelPaint.setAntiAlias(true);// 去锯齿

 mCenterWheelPaint = new Paint();
 mCenterWheelPaint.setColor(Color.rgb(243, 243, 243));
 mCenterWheelPaint.setStyle(Paint.Style.STROKE);
 mCenterWheelPaint.setStrokeCap(Paint.Cap.ROUND);
 mCenterWheelPaint.setAntiAlias(true);

 mDefaultWheelPaint = new Paint();
 mDefaultWheelPaint.setColor(Color.rgb(127, 127, 127));
 mDefaultWheelPaint.setStyle(Paint.Style.STROKE);
 mDefaultWheelPaint.setStrokeCap(Paint.Cap.ROUND);
 mDefaultWheelPaint.setAntiAlias(true);

 mTitlePaint = new Paint();
 mTitlePaint.setAntiAlias(true);
 mTitlePaint.setColor(Color.WHITE);

 mStepPaint = new Paint();
 mStepPaint.setAntiAlias(true);
 mStepPaint.setColor(Color.WHITE);

 mTargetPaint = new Paint();
 mTargetPaint.setAntiAlias(true);
 mTargetPaint.setColor(Color.WHITE);
 mAnim = new BarAnimation();
 }

 @Override
 protected void onDraw(Canvas canvas) {
 canvas.drawArc(mWheelRect, 0, 359, false, mDefaultWheelPaint);
 canvas.drawArc(mWheelRect, 0, 359, false, mCenterWheelPaint);
 canvas.drawArc(mWheelRect, 90, mSweepAnglePer, false, mFinishWheelPaint);
// canvas.drawText("步数", mWheelRect.centerX() - (mTitlePaint.measureText("步数") / 2), mTitleY,
// mTitlePaint);
 canvas.drawText(mCurrStepNum + "",
  mWheelRect.centerX() - (mStepPaint.measureText(String.valueOf(mCurrStepNum)) / 2), mStepY,
  mStepPaint);
 String description = "";
 float percent = getPercent();
 if(percent > 0.5){
  description ="严重污染";
 }else if(percent<0.5){
  description ="中等污染";
 }else{
  description ="普通污染";
 }

 canvas.drawText(description , mWheelRect.centerX() -
  (mTargetPaint.measureText(description) / 2), mTargetY, mTargetPaint);
 SweepGradient sweepGradient = new SweepGradient(mWheelRect.centerX(), mWheelRect.centerY(),
  new int[]{getResources().getColor(R.color.color_environment_severe), getResources().getColor(R.color.color_environment_serious),
   getResources().getColor(R.color.color_environment_excellent),
   getResources().getColor(R.color.color_environment_good), getResources().getColor(R.color.color_environment_mild),
   getResources().getColor(R.color.color_environment_moderate)}, null);
 mFinishWheelPaint.setShader(sweepGradient);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
 int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
 int min = Math.min(width, height);// 获取View最短边的长度
 setMeasuredDimension(min, min);// 强制改View为以最短边为长度的正方形
 mCircleStrokeWidth = getTextScale(15, min);// 圆弧的宽度
 pressExtraStrokeWidth = getTextScale(10, min);// 圆弧离矩形的距离
 mWheelRect.set(mCircleStrokeWidth + pressExtraStrokeWidth, mCircleStrokeWidth + pressExtraStrokeWidth,
  min - mCircleStrokeWidth - pressExtraStrokeWidth, min - mCircleStrokeWidth - pressExtraStrokeWidth);// 设置矩形
 mTitlePaint.setTextSize(getTextScale(60, min));
 mStepPaint.setTextSize(getTextScale(120, min));
 mTargetPaint.setTextSize(getTextScale(40, min));
 mTitleY = getTextScale(170, min);
 mStepY = getTextScale(300, min);
 mTargetY = getTextScale(380, min);
 mFinishWheelPaint.setStrokeWidth(mCircleStrokeWidth);
 mCenterWheelPaint.setStrokeWidth(mCircleStrokeWidth);
 mDefaultWheelPaint.setStrokeWidth(mCircleStrokeWidth - getTextScale(2, min));
 mDefaultWheelPaint.setShadowLayer(getTextScale(10, min), 0, 0, Color.rgb(127, 127, 127));// 设置阴影
 }

 /**
 * 进度条动画
 *
 * @author Administrator
 */
 public class BarAnimation extends Animation {

 /**
  * 每次系统调用这个方法时, 改变mSweepAnglePer,mPercent,stepnumbernow的值,
  * 然后调用postInvalidate()不停的绘制view。
  */
 @Override
 protected void applyTransformation(float interpolatedTime, Transformation t) {
// if (interpolatedTime < 1.0f) {
// mPercent = Float.parseFloat(mDecimalFormat.format(interpolatedTime * mStepNum * 100f / mMaxStepNum));// 将浮点值四舍五入保留一位小数
// mSweepAnglePer = interpolatedTime * mStepNum * 360 / mMaxStepNum;
// mCurrStepNum = (int) (interpolatedTime * mStepNum);
// } else {
  mPercent = Float.parseFloat(mDecimalFormat.format(mStepNum * 100f / mMaxStepNum));// 将浮点值四舍五入保留一位小数
  if (mPercent > 100.0f) {
  mPercent = 100.0f;
  }
  PERCENT = String.valueOf(mPercent);
  mSweepAnglePer = mStepNum * 360 / mMaxStepNum;
  mCurrStepNum = mStepNum;
// }

  requestLayout();
 }
 }

 public float getPercent() {
 return mPercent;
 }

 /**
 * 根据控件的大小改变绝对位置的比例
 *
 * @param n
 * @param m
 * @return
 */
 public float getTextScale(float n, float m) {
 return n / 500 * m;
 }

 /**
 * 更新步数和设置一圈动画时间
 *
 * @param stepCount
 * @param time
 */
 public void update(int stepCount, int time) {
 this.mStepNum = stepCount;
 mAnim.setDuration(time);
 // setAnimationTime(time);
 this.startAnimation(mAnim);
 }

 /**
 * @param stepNum
 */
 public void setMaxStepNum(int stepNum) {
 mMaxStepNum = stepNum;
 GOAL_STEP = String.valueOf(mMaxStepNum);
 }

 public void setColor(int color) {
 mFinishWheelPaint.setColor(color);
 mStepPaint.setColor(color);
 }

 /**
 * 设置动画时间
 *
 * @param time
 */
 public void setAnimationTime(int time) {
 mAnim.setDuration(time * mStepNum / mMaxStepNum);// 按照比例设置动画执行时间
 }

}

xml引用

<com.jky.mobile_xmxt.view.CircleProgressBar
 android:id="@+id/color_progress_view"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="6"
 />

Activity调用方法

color_progress_view = (CircleProgressBar)view.findViewById(R.id.color_progress_view);
color_progress_view.setMaxStepNum(500);
color_progress_view.update(470,1000);

由于和调用其他控件方法类似,姑且省去了很多其他业务逻辑代码,代码不是特别复杂,修改起来也很方便(修改颜色,总量及比例等),所以只粘贴核心相关的代码,希望可以帮助到大家。

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

(0)

相关推荐

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

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

  • Android 七种进度条的样式

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

  • Android中自定义进度条详解

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

  • 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

  • Android ProgressBar进度条使用详解

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

  • Android三种方式实现ProgressBar自定义圆形进度条

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

  • 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自定义进度条渐变色View的实例代码

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

  • 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

随机推荐