自定义控件之圆形颜色渐变进度条--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);
    }

}

效果如下:

时间: 2024-10-13 19:47:11

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

自定义带有渐变颜色的进度条

在项目中用到了渐变颜色的进度条 样式如下: 1.设置背景色颜色 2.设置边框圆角大小 3.设置渐变的颜色个数 4.设置渐变颜色 5.设置显示,隐藏进度条动画条纹 Demo地址:https://github.com/xqG/gradual-ProgressBar

【iOS】环形渐变进度条实现

之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: https://github.com/saitjr/LoopProgressDemo.git 正文 一.视图层级 首先需要搞定的就是视图层级关系.可以看到, 1. 背景是有透明度的蓝色(blueView) 2. 需要一个从绿->黄->红的渐变色,那个这里我采用的是Layer(colorLayer) 3

渐变颜色的进度条WGradientProgress-备用

今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移动的,这里称之为WGradientProgress. 先来看看我们的目标长什么样子: WGradientProgress的使用方法很简单,主要有展示接口以及隐藏接口,目前显示的位置有两种选择: WProgressPosDown        //progress is on the down border

Swift 圆形渐变进度条 支持事件 支持XIB和StoryBoard

最近项目用到了 一个经验条  要求颜色渐变  中间是用户头像  还要接受事件  然后自己写了个下面这个控件 // // XProgressView.swift // XProgressView // // Created by eduo_xiaoP on 15/4/11. // Copyright (c) 2015年 eduo. All rights reserved. // import Foundation import UIKit @objc protocol XProgressViewD

android自定义渐变进度条

</pre>       项目中需要用到一个弧形渐变的进度条,通过android自带是不能实现的,我是没有找到实现的方法,有大神知道的可以指点,效果图是下面这样的<p></p><p><img src="" alt="" /><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbcAAAClCAYAAADf/rPPAAAgAElEQ

iOS 渐变进度条

#import <UIKit/UIKit.h> @interface JianBianView : UIView //为了增加一个表示进度条的进行,可们可以使用mask属性来屏蔽一部分 @property (nonatomic, strong) CALayer *maskLayer; @property (nonatomic, assign) CGFloat progress; //动画方法 -(void)performAnimation; -(void)setProgress:(CGFloa

android自己定义渐变进度条

项目中须要用到一个弧形渐变的进度条,通过android自带是不能实现的.我是没有找到实现的方法,有大神知道的能够指点.效果图是以下这种 这是通过继承VIew来绘制出来的,网上也有相似的,可是代码那是相当的累赘,并且创建了非常多没用的对象,给内存管理带来负担? ?? 我在这把自己定义的View代码贴出来了,用到的话能够加以參考 public class SpringProgressView extends View { /** * 分段颜色 */ private static final int[

svg和css3创建环形渐变进度条

在负责的项目中,有一个环形渐变读取进度的效果的需求,于是在网上查阅相关资料整理一下.代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js&qu

自定义进度条(圆形、横向进度条)

自定义进度条实现大体流程 1.自定义属性声明(attrs文件) 2.自定义属性获取 3.测量(onMeasure) 4.绘制(onDraw) 代码: attrs文件: <!-- 自定义声明 --> <attr name="progress_unreach_color" format="color"></attr> <attr name="progress_unreach_height" format=&q