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

随机推荐

如何在网站中加入markdown
在vue组件中加入markdown,模板使用的是webpack 我是这样做的: 因为是npm引入的,所以markdown是遵循CommonJS规范的,需要在webpack.base.conf.js里引 ...
Swift Array copy 的线程安全问题
Swift Array copy 的线程安全问题 NSArray 继承自 NSObject,属于对象,有 copy 方法.Swift 的 Array 是 struct,没有 copy 方法.把一个 A ...
Santa Claus and Tangerines
Santa Claus and Tangerines 题目链接:http://codeforces.com/contest/752/problem/E 二分显然直接求答案并不是很容易,于是我们将其转 ...
第10章：DOM
抓包分析SIP消息
I. 实验环境 SIP服务器: Yate服务器, IP:port=10.15.3.34:5060 SIP客户端: 移植Sipdroid的Android网络电话软件, IP: 10.15.3.73, A ...
GridView”的控件必须放在具有 runat=server 的窗体标记内 “错误提示”
在做导出数据到EXCEL程序中,出现了错误提示:类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记解决办法重写 VerifyRendering ...
# 关于string
关于string 头文件 #include <string> using std::string; string定义和初始化 string s1; string s2(s1); strin ...
[SQL基础教程] 4-4 事务
[SQL基础教程] 4 数据更新 4-4 事务事务需要在同一处理单元中执行的一系列更新处理的集合创建事务事务开始语句; DML语句1; DML语句2; . . . 事务结束语句; 事务开始语句 ...
[SQL基础教程] 4-3 数据的更新(UPDATE)
[SQL基础教程] C4 数据更新 4-3 数据的更新(UPDATE) UPDATE UPDATE <表名> SET <列名> = <表达式>; UPDATE &l ...
TypeScript -- 面向对象特性
.class关键字和类名就可以定义一个类 . 类的访问控制符--有三个,.] = ] = ] = ;.声明参数 .用接口声明方法 .理解模块--一个文件就是一个模块,就是这么个意思 ,不用想的多么高大 ...

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

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

随机推荐

热门专题