自定义控件之圆形颜色渐变进度条--SweepGradient

前几天在群里面有人找圆形可颜色渐变进度条，其中主要的知识点是SweepGradient；

 mSweepGradient = new SweepGradient(240, 360, new int[] {
　　Color.CYAN,
　　Color.DKGRAY,
　　Color.GRAY,
　　Color.LTGRAY,
　　Color.MAGENTA,

　　Color.GREEN,
　　Color.TRANSPARENT, 
　　Color.BLUE },
　　 null);

如上：第三个参数为渐变颜色内容，前两个是坐标信息，240：渲染中心点x 坐标；360：渲染中心y 点坐标。

先绘制圆形：

package com.soyoungboy.sweepgradientprogress;

import android.content.Context;

import android.graphics.BlurMaskFilter;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.EmbossMaskFilter;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.view.View;

/**

 * 圆形颜色渐变的进度条

 * @author soyoungboy

 *

 */

public class SweepGradientCircleProgressBar extends View {

    private Paint pathPaint;

    private Paint fillArcPaint;

    // 设置光源的方向

    private float[] direction = new float[] {1, 1, 1};

    // 设置环境光亮度

    private float light = 0.4f;

    // 选择要应用的反射等级

    private float specular = 6;

    private EmbossMaskFilter emboss;

    private RectF oval ;

    private BlurMaskFilter mBlur;

    // view重绘的标记

    private boolean reset = false;

    // 向 mask应用一定级别的模糊

    private float blur = 3.5f;

    private int arcradus = 30;

    public SweepGradientCircleProgressBar(Context context ,AttributeSet attrs) {

        super(context,attrs);

        initPaint();

        oval = new RectF();

        emboss = new EmbossMaskFilter(direction, light, specular, blur);

        mBlur = new BlurMaskFilter(20, BlurMaskFilter.Blur.NORMAL);

    }

    //初始化画笔操作

    private void initPaint() {

        //初始化画笔操作

        pathPaint = new Paint();

        // 设置是否抗锯齿

        pathPaint.setAntiAlias(true);

        // 帮助消除锯齿

        pathPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        pathPaint.setStyle(Paint.Style.STROKE);

        pathPaint.setDither(true);

        pathPaint.setStrokeJoin(Paint.Join.ROUND);

        fillArcPaint = new Paint();

        // 设置是否抗锯齿

        fillArcPaint.setAntiAlias(true);

        // 帮助消除锯齿

        fillArcPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        fillArcPaint.setStyle(Paint.Style.STROKE);

        fillArcPaint.setDither(true);

        fillArcPaint.setStrokeJoin(Paint.Join.ROUND);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int height = getMeasuredWidth();

        int width = getMeasuredWidth();

        //半径 = 宽/2-圆环的宽度

        int radius = width/2-arcradus;

        int cx = width/2;

        int cy = height/2;

        //绘制画笔颜色

        pathPaint.setColor(Color.RED);

        //画笔的宽度

        pathPaint.setStrokeWidth(10);

        pathPaint.setMaskFilter(emboss);

        canvas.drawCircle(cx, cy, radius, pathPaint);

    }

}

效果如下：

在上面基础上，绘制大圆和小圆：

package com.soyoungboy.sweepgradientprogress;

import android.content.Context;

import android.graphics.BlurMaskFilter;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.EmbossMaskFilter;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.view.View;

/**

 * 圆形颜色渐变的进度条

 * @author soyoungboy

 *

 */

public class SweepGradientCircleProgressBar extends View {

    private Paint pathPaint;

    private Paint fillArcPaint;

    // 设置光源的方向

    private float[] direction = new float[] {1, 1, 1};

    // 设置环境光亮度

    private float light = 0.4f;

    // 选择要应用的反射等级

    private float specular = 6;

    private EmbossMaskFilter emboss;

    private RectF oval ;

    private BlurMaskFilter mBlur;

    // view重绘的标记

    private boolean reset = false;

    // 向 mask应用一定级别的模糊

    private float blur = 3.5f;

    private int arcradus = 30;

    public SweepGradientCircleProgressBar(Context context ,AttributeSet attrs) {

        super(context,attrs);

        initPaint();

        oval = new RectF();

        emboss = new EmbossMaskFilter(direction, light, specular, blur);

        mBlur = new BlurMaskFilter(20, BlurMaskFilter.Blur.NORMAL);

    }

    //初始化画笔操作

    private void initPaint() {

        //初始化画笔操作

        pathPaint = new Paint();

        // 设置是否抗锯齿

        pathPaint.setAntiAlias(true);

        // 帮助消除锯齿

        pathPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        pathPaint.setStyle(Paint.Style.STROKE);

        pathPaint.setDither(true);

        pathPaint.setStrokeJoin(Paint.Join.ROUND);

        fillArcPaint = new Paint();

        // 设置是否抗锯齿

        fillArcPaint.setAntiAlias(true);

        // 帮助消除锯齿

        fillArcPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        fillArcPaint.setStyle(Paint.Style.STROKE);

        fillArcPaint.setDither(true);

        fillArcPaint.setStrokeJoin(Paint.Join.ROUND);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        if (reset) {

            canvas.drawColor(Color.TRANSPARENT);

            reset = false;

        }

        drawcircle(canvas);

    }

    private void drawcircle(Canvas canvas) {

        int height = getMeasuredWidth();

        int width = getMeasuredWidth();

        //半径 = 宽/2-圆环的宽度

        int radius = width/2-arcradus;

        int cx = width/2;

        int cy = height/2;

        //绘制画笔颜色

        pathPaint.setColor(Color.RED);

        //画笔的宽度

        pathPaint.setStrokeWidth(1);

        pathPaint.setMaskFilter(emboss);

        canvas.drawCircle(cx, cy, radius, pathPaint);

        pathPaint.setColor(Color.BLUE);

        //绘制大圆

        canvas.drawCircle(width / 2, height / 2, radius + arcradus

                / 2 + 0.5f, pathPaint);

        //绘制小圆

        canvas.drawCircle(width / 2, height / 2, radius - arcradus

                / 2 - 0.5f, pathPaint);

    }

}

效果：

去掉绘制中间圆，并不会圆弧：

package com.soyoungboy.sweepgradientprogress;

import android.content.Context;

import android.graphics.BlurMaskFilter;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.EmbossMaskFilter;

import android.graphics.Paint;

import android.graphics.RectF;

import android.graphics.SweepGradient;

import android.util.AttributeSet;

import android.view.View;

/**

 * 圆形颜色渐变的进度条

 * @author soyoungboy

 *

 */

public class SweepGradientCircleProgressBar extends View {

    private Paint pathPaint;

    private Paint fillArcPaint;

    // 设置光源的方向

    private float[] direction = new float[] {1, 1, 1};

    // 设置环境光亮度

    private float light = 0.4f;

    //渐变数组

    private int[] arcColors = new int[] {Colors.RED,Colors.RED_TRANSLUCENT

    };

    // 选择要应用的反射等级

    private float specular = 6;

    private EmbossMaskFilter emboss;

    private RectF oval ;

    private BlurMaskFilter mBlur;

    // view重绘的标记

    private boolean reset = false;

    // 向 mask应用一定级别的模糊

    private float blur = 3.5f;

    private int arcradus = 30;

    public SweepGradientCircleProgressBar(Context context ,AttributeSet attrs) {

        super(context,attrs);

        initPaint();

        oval = new RectF();

        emboss = new EmbossMaskFilter(direction, light, specular, blur);

        mBlur = new BlurMaskFilter(20, BlurMaskFilter.Blur.NORMAL);

    }

    //初始化画笔操作

    private void initPaint() {

        //初始化画笔操作

        pathPaint = new Paint();

        // 设置是否抗锯齿

        pathPaint.setAntiAlias(true);

        // 帮助消除锯齿

        pathPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        pathPaint.setStyle(Paint.Style.STROKE);

        pathPaint.setDither(true);

        pathPaint.setStrokeJoin(Paint.Join.ROUND);

        fillArcPaint = new Paint();

        // 设置是否抗锯齿

        fillArcPaint.setAntiAlias(true);

        // 帮助消除锯齿

        fillArcPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        fillArcPaint.setStyle(Paint.Style.STROKE);

        fillArcPaint.setDither(true);

        fillArcPaint.setStrokeJoin(Paint.Join.ROUND);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        if (reset) {

            canvas.drawColor(Color.TRANSPARENT);

            reset = false;

        }

        drawcircle(canvas);

    }

    private void drawcircle(Canvas canvas) {

        int height = getMeasuredWidth();

        int width = getMeasuredWidth();

        //半径 = 宽/2-圆环的宽度

        int radius = width/2-arcradus;

        int cx = width/2;

        int cy = height/2;

        pathPaint.setColor(Color.BLUE);

        //绘制大圆

        canvas.drawCircle(width / 2, height / 2, radius + arcradus

                / 2 + 0.5f, pathPaint);

        //绘制小圆

        canvas.drawCircle(width / 2, height / 2, radius - arcradus

                / 2 - 0.5f, pathPaint);

        // 环形颜色填充

        SweepGradient sweepGradient =

                new SweepGradient(width / 2, height / 2, arcColors, null);

        fillArcPaint.setShader(sweepGradient);

        // 设置画笔为白色

        // 模糊效果

        fillArcPaint.setMaskFilter(mBlur);

        // 设置线的类型,边是圆的

        fillArcPaint.setStrokeCap(Paint.Cap.ROUND);

        //设置圆弧的宽度

        fillArcPaint.setStrokeWidth(arcradus+1);

        // 确定圆弧的绘制位置，也就是里面圆弧坐标和外面圆弧坐标

        oval.set(width / 2 - radius, height / 2 - radius, width

                / 2 + radius, height / 2 + radius);

        // 画圆弧，第二个参数为：起始角度，第三个为跨的角度，第四个为true的时候是实心，false的时候为空心

        canvas.drawArc(oval,

                0,

                ((float)300 /360 ) * 360,

                false,

                fillArcPaint);

    }

}

效果如下：

尼玛，丑爆了。

控制进度的显示，主要是progress和max之间的配合，通过外部设置progress进度来控制进度条的动态：

上面代码修改成如下：

package com.soyoungboy.sweepgradientprogress;

import android.content.Context;

import android.graphics.BlurMaskFilter;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.EmbossMaskFilter;

import android.graphics.Paint;

import android.graphics.RectF;

import android.graphics.SweepGradient;

import android.util.AttributeSet;

import android.view.View;

/**

 * 圆形颜色渐变的进度条

 * @author soyoungboy

 *

 */

public class SweepGradientCircleProgressBar extends View {

    private Paint pathPaint;

    private Paint fillArcPaint;

    // 设置光源的方向

    private float[] direction = new float[] {1, 1, 1};

    // 设置环境光亮度

    private float light = 0.4f;

    //渐变数组

    private int[] arcColors = new int[] {Colors.RED,Colors.RED_TRANSLUCENT

    };

    // 选择要应用的反射等级

    private float specular = 6;

    private EmbossMaskFilter emboss;

    private RectF oval ;

    private BlurMaskFilter mBlur;

    // view重绘的标记

    private boolean reset = false;

    // 向 mask应用一定级别的模糊

    private float blur = 3.5f;

    private int arcradus = 30;

    //初始化进度

    private int progress = 0;

    //设置进度最大值

    private int max = 100;

    public SweepGradientCircleProgressBar(Context context ,AttributeSet attrs) {

        super(context,attrs);

        initPaint();

        oval = new RectF();

        emboss = new EmbossMaskFilter(direction, light, specular, blur);

        mBlur = new BlurMaskFilter(20, BlurMaskFilter.Blur.NORMAL);

    }

    //初始化画笔操作

    private void initPaint() {

        //初始化画笔操作

        pathPaint = new Paint();

        // 设置是否抗锯齿

        pathPaint.setAntiAlias(true);

        // 帮助消除锯齿

        pathPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        pathPaint.setStyle(Paint.Style.STROKE);

        pathPaint.setDither(true);

        pathPaint.setStrokeJoin(Paint.Join.ROUND);

        fillArcPaint = new Paint();

        // 设置是否抗锯齿

        fillArcPaint.setAntiAlias(true);

        // 帮助消除锯齿

        fillArcPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        // 设置中空的样式

        fillArcPaint.setStyle(Paint.Style.STROKE);

        fillArcPaint.setDither(true);

        fillArcPaint.setStrokeJoin(Paint.Join.ROUND);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        if (reset) {

            canvas.drawColor(Color.TRANSPARENT);

            reset = false;

        }

        drawcircle(canvas);

    }

    private void drawcircle(Canvas canvas) {

        int height = getMeasuredWidth();

        int width = getMeasuredWidth();

        //半径 = 宽/2-圆环的宽度

        int radius = width/2-arcradus;

        int cx = width/2;

        int cy = height/2;

        pathPaint.setColor(Color.BLUE);

        //绘制大圆

        canvas.drawCircle(width / 2, height / 2, radius + arcradus

                / 2 + 0.5f, pathPaint);

        //绘制小圆

        canvas.drawCircle(width / 2, height / 2, radius - arcradus

                / 2 - 0.5f, pathPaint);

        // 环形颜色填充

        SweepGradient sweepGradient =

                new SweepGradient(width / 2, height / 2, arcColors, null);

        fillArcPaint.setShader(sweepGradient);

        // 设置画笔为白色

        // 模糊效果

        fillArcPaint.setMaskFilter(mBlur);

        // 设置线的类型,边是圆的

        fillArcPaint.setStrokeCap(Paint.Cap.ROUND);

        //设置圆弧的宽度

        fillArcPaint.setStrokeWidth(arcradus+1);

        // 确定圆弧的绘制位置，也就是里面圆弧坐标和外面圆弧坐标

        oval.set(width / 2 - radius, height / 2 - radius, width

                / 2 + radius, height / 2 + radius);

        // 画圆弧，第二个参数为：起始角度，第三个为跨的角度，第四个为true的时候是实心，false的时候为空心

        canvas.drawArc(oval,

                0,

                ((float)progress /max ) * 360,

                false,

                fillArcPaint);

    }

    public int getProgress() {

        return progress;

    }

    public void setProgress(int progress) {

        this.progress = progress;

        this.invalidate();

    }

    public int getMax() {

        return max;

    }

    public void setMax(int max) {

        this.max = max;

    }

    /**

     * 描述：重置进度

     *

     * @throws

     */

    public void reset() {

        reset = true;

        this.progress = 0;

        this.invalidate();

    }

}

activity代码：

package com.soyoungboy.sweepgradientprogress;

import android.os.Bundle;

import android.os.Handler;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

    private SweepGradientCircleProgressBar progress;

    private Button resetBtn;

    // 最大100

    private int max = 100;

    private int myProgress = 0;

    private Handler handler = new Handler() {

        public void handleMessage(android.os.Message msg) {

            switch (msg.what) {

            case 1:

                startAddProgress();

                break;

            default:

                break;

            }

        };

    };

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        progress = (SweepGradientCircleProgressBar) findViewById(R.id.progress);

        resetBtn = (Button) findViewById(R.id.resetBtn);

        resetBtn.setOnClickListener(this);

        startAddProgress();

    }

    private void startAddProgress() {

        myProgress = myProgress + 10;

        progress.setProgress(myProgress);

        handler.sendEmptyMessageDelayed(1, 1000);

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

        case R.id.resetBtn:

            //重置操作

            myProgress = 0;

            progress.reset();

            break;

        default:

            break;

        }

    }

}

效果如下：

增加控制颜色的代码：

public int[] getArcColors() {

        return arcColors;

    }

    public void setArcColors(int[] arcColors) {

        this.arcColors = arcColors;

    }

activity中使用：

    private void startAddProgress() {

        myProgress = myProgress + 10;

        progress.setProgress(myProgress);

        int[] arcColors = new int[]{

                Color.parseColor("#99cccc"),

                Color.parseColor("#ccffff"),

                Color.parseColor("#ffcccc"),

                Color.parseColor("#6699cc"),

                Color.parseColor("#99ccff"),

                Color.parseColor("#6699cc"),

                Color.parseColor("#cc6699"),

                Color.parseColor("#ffff00")

        };

        progress.setArcColors(arcColors );

        handler.sendEmptyMessageDelayed(1, 1000);

    }

效果如下：

为了不至于开头那段颜色那么突兀，也就是丑，可以修改代码中颜色数组，将颜色数组第一个颜色 = 最后一个颜色，就完美了，就好看了

Demo放到github上面：

https://github.com/soyoungboy/SweepGradientProgress

自定义控件之圆形颜色渐变进度条--SweepGradient的更多相关文章

iOS圆弧渐变进度条的实现
由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...
【iOS】环形渐变进度条实现
之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: ht ...
【原】Github系列之三：开源iOS下渐变颜色的进度条WGradientProgress
概述今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移 ...
渐变颜色的进度条WGradientProgress－备用
今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移动的, ...
[C#] （原创）一步一步教你自定义控件——04，ProgressBar（进度条）
一.前言技术没有先进与落后,只有合适与不合适. 本篇的自定义控件是:进度条(ProgressBar). 进度条的实现方式多种多样,主流的方式有:使用多张图片去实现.使用1个或2个Panel放到Use ...
iOS 渐变进度条
#import <UIKit/UIKit.h> @interface JianBianView : UIView //为了增加一个表示进度条的进行,可们可以使用mask属性来屏蔽一部分 @ ...
ios - 带动画圆形旋转的进度条
#import <UIKit/UIKit.h> @interface TJCircleProgressView : UIView /** * 图标 */ @property(nonatom ...
Android 自定义view --圆形百分比（进度条）
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...
android自己定义渐变进度条
项目中须要用到一个弧形渐变的进度条,通过android自带是不能实现的.我是没有找到实现的方法,有大神知道的能够指点.效果图是以下这种这是通过继承VIew来绘制出来的,网上也有相似的,可是代码那是相 ...

随机推荐

.Net程序员学用Oracle系列(10)：系统函数（下）
<.Net程序员学用Oracle系列:导航目录> 本文大纲 1.转换函数 1.1.TO_CHAR 1.2.TO_NUMBER 1.3.TO_DATE 1.4.CAST 2.近似值函数 2. ...
ASP.NET MVC之控制器传递数据到视图的四种方式
前奏 1. 在新建项目中的Models文件下,新建Products类: public class Products { public int Id { get; set; } public strin ...
virtualbox 中的linux 共享文件
首先要安装VirtualBox的增强版功能(VBoxGuestAdditions) 在设备--->安装增强版功能----->运行,重启电脑. 出现这个问题,看看安装增强功能的时候,有没有 ...
Docker 第三篇--构建Image
什么是 docker Image 和container? 我们先来看看官网是怎么说的. Docker Engine provides the core Docker technology that e ...
毕向东_Java基础视频教程第19天_IO流（11~14）
第19天-11-IO流(字节流File读写操作) import java.io.FileInputStream; import java.io.FileOutputStream; import jav ...
maven原理
http://www.cnblogs.com/onlys/archive/2011/01/04/1925466.html 基本原理Maven的基本原理很简单,采用远程仓库和本地仓库以及一个类似buil ...
【成长之路】【python】python基础1
1.python的优点高级语言:不需考虑底层实现的细节可移植性:python程序不需经过任何修改就可以在所有的平台系统上运行可扩展性:可以把用c和c++实现的代码嵌到python中可嵌入性:可 ...
Cstring 的用法
CString位于头文件afx.h中. 这篇文章就来讨论这些技巧. 使用CString可以让你对字符串的操作更加直截了当.这篇文章不是CString的完全手册,但囊括了大部分常见基本问题. 这篇文章包 ...
Fatal error: Call to undefined function oci_connect()
http://stackoverflow.com/questions/22478387/call-to-undefined-function-oci-connect Whenever you conn ...
切换self.window.rootViewController根视图，导致上一视图控制器不能释放销毁的问题
在我们APP开发中经常有首次进入应用先进入引导页或者登陆页的情况,类似下图所示发现登陆以后更改window.rootViewController为应用首页时,登陆页没有销毁掉,通过图层工具 ...

自定义控件之圆形颜色渐变进度条--SweepGradient

自定义控件之圆形颜色渐变进度条--SweepGradient的更多相关文章

随机推荐

热门专题