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

随机推荐

在egret中使用protobuf
原文章删除,重新使用MarkDown排版在H5游戏领域,对于服务端与客户端的通信协议有一个选择,那就是使用protobuf.js.对于那些直接使用JavaScript开发的引擎而言,protobuf ...
saltstack布署实践【配置文件管理-state模块】
那如果要批量修改被管机器的某个配置文件怎么做?以下给出一个最简单案例. 先在主管机器master上查看/etc/salt/master配置文件看到有以下几行配置文件 # file_roots ...
Python学习--09 模块
模块让我们能够有逻辑地组织Python代码段.把相关的代码分配到一个模块里能让我们的代码更好用,更易懂. 导入模块 Python使用import语句导入模块.语法: # 形式一:导入模块 impor ...
[pinyin4j] java版汉字转换拼音（大小写）
pinyin4J 是一个可以将汉字转换成拼音的lib,非常实用,其maven地址为:http://mvnrepository.com/artifact/com.belerweb/pinyin4j/2. ...
怎么删除hao.qquu8.com绑定
运行输入 regedit 编辑 - 查找 hao.qquu8.com 然后修改成你想绑定的主页就好
CoreJavaE10V1P3.3 第3章 Java的基本编程结构－3.3 数据类型
3.3 数据类型这里所说的数据类型是指 Java的8中基本数据类型,是原生就存在的. 不同进制数的字面值表示方法进制字面值表示方法例子是否默认 JDK版本支持 2进制 0b或0B前缀(每4位 ...
面试题-Java基础-布局管理器
1.什么是布局管理器? 布局管理器用来在容器中组织组件.
从键盘或文件中获取标准输入：read命令
文件的描述符和重定向文件描述符是和文件的输入.输出相关联的非负整数,Linux内核(kernel)利用文件描述符(file descriptor)来访问文件.打开现存文件或新建文件时,内核会返回一个 ...
Firewalld防火墙
Firewalld服务是红帽RHEL7系统中默认的防火墙管理工具,特点是拥有运行时配置与永久配置选项且能够支持动态更新以及"zone"的区域功能概念,使用图形化工具firewall ...
drag
1.draggable ="true" 元素可以拖拽了 2.拖拽元素事件: dragstart 拖拽前触发 drag 拖拽前.拖拽结束之间,连续触发 dragend 拖拽结束触 ...

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

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

随机推荐

热门专题