Android从0到完整项目(8) DIY 进度条 ProgressBar

简单的自定义进度条

这两个进度条比较简单 是从andbase 库里面 复制出来的。有不错的学习效果


public class AbHorizontalProgressBar extends View {

    /** 当前进度. */
    private int progress = 0;

    /** 最大进度. */
    private int max = 100;

    /** 绘制轨迹. */
    private Paint pathPaint = null;

    /** 绘制填充*/
    private Paint fillPaint = null;

    /** 路径宽度. */
    private int pathWidth = 35;

    /** 宽度. */
    private int width;

    /** 高度. */
    private int height;

    /** 灰色轨迹. */
    private int pathColor = 0xFFF0EEDF;

    /** 灰色轨迹边. */
    private int pathBorderColor = 0xFFD2D1C4;

    /** 梯度渐变的填充颜色. */
    private int[] fillColors = new int[] {0xFF3DF346,0xFF02C016};

    /** 指定了光源的方向和环境光强度来添加浮雕效果. */
    private EmbossMaskFilter emboss = null;

    /** 设置光源的方向. */
    float[] direction = new float[]{1,1,1};

    /** 设置环境光亮度. */
    float light = 0.4f;

    /** 选择要应用的反射等级. */
    float specular = 6;

    /** 向 mask应用一定级别的模糊. */
    float blur = 3.5f;

    /** 指定了一个模糊的样式和半径来处理 Paint 的边缘. */
    private BlurMaskFilter mBlur = null;

    /** 监听器. */
    private AbOnProgressListener onProgressListener = null;

    /** view重绘的标记. */
    private boolean reset = false;


    /**
     *  构造函数.
     *
     * @param context the context
     * @param attrs the attrs
     */
    public AbHorizontalProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        pathPaint  = new Paint();
        // 设置是否抗锯齿
        pathPaint.setAntiAlias(true);
        // 帮助消除锯齿
        pathPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        // 设置中空的样式
        pathPaint.setStyle(Paint.Style.FILL);
        pathPaint.setDither(true);
        //pathPaint.setStrokeJoin(Paint.Join.ROUND);
        
        fillPaint = new Paint();
        // 设置是否抗锯齿
        fillPaint.setAntiAlias(true);
        // 帮助消除锯齿
        fillPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        // 设置中空的样式
        fillPaint.setStyle(Paint.Style.FILL);
        fillPaint.setDither(true);
        //fillPaint.setStrokeJoin(Paint.Join.ROUND);
        
        emboss = new EmbossMaskFilter(direction,light,specular,blur);  
        mBlur = new BlurMaskFilter(20, BlurMaskFilter.Blur.NORMAL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(reset){
            canvas.drawColor(Color.TRANSPARENT);
            reset = false;
        }
        this.width = getMeasuredWidth();
        this.height = getMeasuredHeight();
        
        // 设置画笔颜色
        pathPaint.setColor(pathColor);
        // 设置画笔宽度
        pathPaint.setStrokeWidth(pathWidth);
                
        //添加浮雕效果
        pathPaint.setMaskFilter(emboss); 
        canvas.drawRect(0, 0, this.width, this.height, pathPaint);
        pathPaint.setColor(pathBorderColor);
        canvas.drawRect(0, 0, this.width, this.height, pathPaint);
        
        
        LinearGradient linearGradient = new LinearGradient(0, 0, this.width, this.height, 
                fillColors[0], fillColors[1], TileMode.CLAMP); 
        fillPaint.setShader(linearGradient);
        
        //模糊效果
        fillPaint.setMaskFilter(mBlur);
        
        //设置线的类型,边是圆的
        fillPaint.setStrokeCap(Paint.Cap.ROUND);
        
        fillPaint.setStrokeWidth(pathWidth);
        canvas.drawRect(0, 0, ((float) progress / max) * this.width,this.height, fillPaint);
        
    }

    public AbOnProgressListener getAbOnProgressListener() {
        return onProgressListener;
    }

    public void setOnProgressListener(AbOnProgressListener onProgressListener) {
        this.onProgressListener = onProgressListener;
    }  
    
    /**
     * 重置进度.
     */
    public void reset(){
        reset  = true;
        this.progress = 0;
        this.invalidate();
    }
    
    
    /**
     * 获取颜色
     * @return
     */
    public int[] getFillColors() {
        return fillColors;
    }

    /**
     * 设置颜色
     * @param fillColors
     */
    public void setFillColors(int[] fillColors) {
        this.fillColors = fillColors;
        invalidate();
    }

    /**
     * 获取背景色
     * @return
     */
    public int getPathColor() {
        return pathColor;
    }

    /**
     * 设置背景色
     * @return
     */
    public void setPathColor(int pathColor) {
        this.pathColor = pathColor;
        invalidate();
    }

    /**
     * 获取背景边框色
     * @return
     */
    public int getPathBorderColor() {
        return pathBorderColor;
    }

    /**
     * 设置背景边框色
     * @return
     */
    public void setPathBorderColor(int pathBorderColor) {
        this.pathBorderColor = pathBorderColor;
        invalidate();
    }

    /**
     * 获取当前进度.
     *
     * @return the progress
     */
    public int getProgress() {
        return progress;
    }

    /**
     * 设置当前进度.
     * @param progress the new progress
     */
    public void setProgress(int progress) {
        this.progress = progress;
        this.invalidate();
        if(this.onProgressListener!=null){
            if(this.max <= this.progress){
                this.onProgressListener.onComplete();
            }else{
                this.onProgressListener.onProgress(progress);
            }
        }
    }

    /**
     * 获取最大进度.
     *
     * @return the max
     */
    public int getMax() {
        return max;
    }

    /**
     * 设置最大进度.
     *
     * @param max the new max
     */
    public void setMax(int max) {
        this.max = max;
    }


}

环形进度条

public class AbCircleProgressBar extends View {
    
    
    /** 当前进度. */
    private int progress = 0;
    
    /** 最大进度. */
    private int max = 100;
    
    /** 绘制轨迹. */
    private Paint pathPaint = null;
    
    /** 绘制填充*/
    private Paint fillArcPaint = null;
    
    /** 环形. */
    private RectF oval;
    
    /** 梯度渐变的填充颜色*/
    private int[] arcColors = new int[] {0xFF02C016,  0xFF3DF346, 0xFF40F1D5, 0xFF02C016 };
    
    /** 阴影颜色. */
    private int[] shadowsColors = new int[] { 0xFF111111, 0x00AAAAAA, 0x00AAAAAA };

    /** 灰色轨迹. */
    private int pathColor = 0xFFF0EEDF;
    
    /** 轨迹border 颜色. */
    private int pathBorderColor = 0xFFD2D1C4;
    
    /** 环的路径宽度. */
    private int pathWidth = 35;
    
    /** 宽度. */
    private int width;
    
    /** 高度. */
    private int height; 
    
    /** 默认圆的半径. */
    private int radius = 120;
    
    /** 指定了光源的方向和环境光强度来添加浮雕效果. */
    private EmbossMaskFilter emboss = null;

    /** 设置光源的方向. */
    float[] direction = new float[]{1,1,1};

    /** 设置环境光亮度. */
    float light = 0.4f;

    /** 选择要应用的反射等级. */
    float specular = 6;

    /** 向 mask应用一定级别的模糊. */
    float blur = 3.5f;  
    
    /** 指定了一个模糊的样式和半径来处理 Paint 的边缘. */
    private BlurMaskFilter mBlur = null;
    
    /** 监听器. */
    private AbOnProgressListener onProgressListener = null;
    
    /** view重绘的标记. */
    private boolean reset = false;
    

    /**
     * 构造函数.
     * @param context the context
     * @param attrs the attrs
     */
    public AbCircleProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        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);
                
        oval = new RectF();
        emboss = new EmbossMaskFilter(direction,light,specular,blur);  
        mBlur = new BlurMaskFilter(20, BlurMaskFilter.Blur.NORMAL);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(reset){
            canvas.drawColor(Color.TRANSPARENT);
            reset = false;
        }
        this.width = getMeasuredWidth();
        this.height = getMeasuredHeight();
        this.radius = getMeasuredWidth()/2 - pathWidth;
        
        // 设置画笔颜色
        pathPaint.setColor(pathColor);
        // 设置画笔宽度
        pathPaint.setStrokeWidth(pathWidth);
        
        //添加浮雕效果
        pathPaint.setMaskFilter(emboss); 
        
        // 在中心的地方画个半径为r的圆
        canvas.drawCircle(this.width/2, this.height/2, radius, pathPaint);
        
        //边线
        pathPaint.setStrokeWidth(0.5f);
        pathPaint.setColor(pathBorderColor);
        canvas.drawCircle(this.width/2, this.height/2, radius+pathWidth/2+0.5f, pathPaint);
        canvas.drawCircle(this.width/2, this.height/2, radius-pathWidth/2-0.5f, pathPaint);
        
        
        /*int[] gradientColors = new int[3];  
        gradientColors[0] = Color.GREEN;  
        gradientColors[1] = Color.YELLOW;  
        gradientColors[2] = Color.RED;  
        float[] gradientPositions = new float[3];  
        gradientPositions[0] = 0.0f;  
        gradientPositions[1] = 0.5f;  
        gradientPositions[2] = 1.0f;  
        
        //按颜色比例圆形填充
        RadialGradient radialGradientShader = new RadialGradient(this.width/2,this.height/2, 
                radius, gradientColors, gradientPositions, TileMode.CLAMP); 
        
        paint1.setShader(radialGradientShader);*/
        
        //环形颜色填充
        SweepGradient sweepGradient = new SweepGradient(this.width/2, this.height/2, arcColors, null);
        fillArcPaint.setShader(sweepGradient);
        // 设置画笔为白色
        
        //模糊效果
        fillArcPaint.setMaskFilter(mBlur);
        
        //设置线的类型,边是圆的
        fillArcPaint.setStrokeCap(Paint.Cap.ROUND);
        
        //fillArcPaint.setColor(Color.BLUE);
        
        fillArcPaint.setStrokeWidth(pathWidth);
        // 设置类似于左上角坐标,右下角坐标
        oval.set(this.width/2 - radius, this.height/2 - radius, this.width/2 + radius, this.height/2 + radius);
        // 画圆弧,第二个参数为:起始角度,第三个为跨的角度,第四个为true的时候是实心,false的时候为空心
        canvas.drawArc(oval, -90, ((float) progress / max) * 360, false, fillArcPaint);
        
    }

    /**
     * 获取圆的半径.
     *
     * @return the radius
     */
    public int getRadius() {
        return radius;
    }
    
    
    /**
     * 设置圆的半径.
     *
     * @param radius the new radius
     */
    public void setRadius(int radius) {
        this.radius = radius;
    }
    
    /**
     * 获取最大进度.
     * @return the max
     */
    public int getMax() {
        return max;
    }

    /**
     * 设置环形最大进度.
     *
     * @param max the new max
     */
    public void setMax(int max) {
        this.max = max;
    }

    /**
     * 获取当前进度.
     *
     * @return the progress
     */
    public int getProgress() {
        return progress;
    }

    /**
     * 设置当前进度.
     *
     * @param progress the new progress
     */
    public void setProgress(int progress) {
        this.progress = progress;
        this.invalidate();
        if(this.onProgressListener!=null){
            if(this.max <= this.progress){
                this.onProgressListener.onComplete();
            }else{
                this.onProgressListener.onProgress(progress);
            }
        }
    }

    @Override  
    protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec){   
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        setMeasuredDimension(width,height);
    }

    public AbOnProgressListener getOnProgressListener() {
        return onProgressListener;
    }

    public void setOnProgressListener(AbOnProgressListener onProgressListener) {
        this.onProgressListener = onProgressListener;
    }  
    
    
    /**
     * 重置进度.
     */
    public void reset(){
        reset  = true;
        this.progress = 0;
        this.invalidate();
    }
    
}


代码不定时更新 https://github.com/chinaltz/JustAndroid

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容