自定义控件之圆形颜色渐变进度条--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来绘制出来的,网上也有相似的,可是代码那是相 ...

随机推荐

orchard相关网址
1.官网文档 http://docs.orchardproject.net/ 2.github https://github.com/OrchardCMS/Orchard 3.stackoverf ...
[转载]关于shell脚本的基本语法
关于shell脚本的基本语法整理于:2014-03-31,何俭飞,mymladdr@sina.com 一.执行 1.shell脚本如果要被执行,一般地必须要有执行权限"x"(除了 ...
codevs1002搭桥（prim）
题目描述: 这是道题题意有点迷(或者是我语文不好),但其实实际上求的就是图中连通块的个数,然后在连通块与连通块之间连边建图跑最小生成树.但是--这个图可能是不连通的--求桥的数量和总长于是我立刻想到 ...
jQuery.cssHooks
概述直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性. $.cssHooks 对象提供了一种通过定义函数来获取或设置特 ...
Winsock - 1 - Winsock API
Winsock Winsock API Winsock是网络编程接口,而不是协议. 网络原理和协议建立Winsock规范的主要目的是提供一个与协议无关的传送接口. Winsock将网络编程接口与具体 ...
idea svn 更新覆盖了本地代码
idea 更新svn代码,覆盖了本地代码,还不能ctr+z怎么办? 下图
CSS3 六边形绘制
把一个104px的div放在它们之间,设置一个背景颜色: width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid trans ...
照片处理软件(iSee图片专家) 3.930 中文免费版
软件名称: 照片处理软件(iSee图片专家) 软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 13.5MB 图片预览: 软件简介: iSee图片专家,免费一 ...
dwr推送技术深入研究
DWR 工作原理: 是通过动态把 Java 类生成为 Javascript.它的代码就像 Ajax 一样,你感觉调用就像发生在浏览器端,但是实际上代码调用发生在服务器端,DWR 负责数据的传递和转换. ...
pgsql获取表相关数据
import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.P ...

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

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

随机推荐

热门专题