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

随机推荐

http服务 Web API的使用
http服务 Web API的使用一.概念: Web API是网络应用程序接口. 详情百度百科: http://baike.baidu.com/link?url=X1l2dlU9FlQmupX24- ...
Unity3D 浏览工具
键盘控制: 1.键盘箭头:先选中场景激活场景按箭头前后左右 shift +箭头加速移动 2.使物体成为场景焦点:左侧层次视图列表选中物体,移动鼠标指针到场景视图上按F,选中物体成为场景视图中心 ...
putty连接远程局域网的MySql（不需要单独打开plink）
3316 是本地端口,映射到远程内网的一台MySql主机 10.8.2.172
DoTween基本使用
using UnityEngine; using System.Collections; using DG.Tweening; using UnityEngine.UI; public class D ...
linux上安装Jmeter
一.首先,你的linux上要有jdk,没有的话请参考上一篇 http://www.cnblogs.com/bigshan-1/p/6242991.html 二.延续上篇的linux用户xiaoming ...
C#文件处理
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
nyoj 592 spiral grid（广搜）
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=592 解决以下问题后就方便用广搜解: 1.将数字坐标化,10000坐标为(0,0),这样就 ...
ios开发设置不同字体
最近项目开发中遇到需要设置指定字体的需求,研究了一下字体设置,最后附有我写的一个小demo,先来看一下效果: 开始上网搜了一下,普遍说到以下方法 for(NSString *fontfamilynam ...
Webkit浏览器点击控件时出现的边框消除
-webkit-tap-highlight-color:rgba(0,0,0,0); 其实是将边框颜色透明,让其不可见了而已
移动平台下的Socket几个问题
在页游时代,使用Flash ActionScript 3.0进行开发,as3提供比较简单和健全的socket API.到了手游时代,基于tcp的socket编程遇到了一些棘手的问题.通常情况下手游都要 ...

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

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

随机推荐

热门专题