Android 自定义进度条ColorfulProgressBar，原理简单、效果很棒

Android-ColorfulProgressBar

关于我，欢迎关注
博客：ccapton(http://blog.csdn.net/ccapton) 微信：Ccapton

简介:

这是一个自定义的Progressbar，效果看着还行吧，滚动的双色斜条作为进度条，有点类似Bootstrap风格。原生Progress的基本操作都有，自行观摩我的源码吧，挺简单的。

示例:

演示Demo

demo下载：
https://github.com/Ccapton/Android-ColorfulProgressBar/blob/master/ColorfulProgressBarDemo_1_0_3.apk

特性

与原生Progress相比，感觉更漂亮一点，可以显示进度值，背景凹凸感明显，进度条效果更加立体。

原理说明

额，挺简单的。不过感觉我的做法有点复杂了，我先自定义了一个View，专门作为进度条的显示图层,如下所示

然后将其布局在高度不超过20dp的ColorfulProgressBar父布局中，设置Y方向的偏移量，然后动画循环改变Y坐标，实现斜条滚动的动画效果，当你调用setProgress方法时，则改变其在父布局的X坐标实现进度显示的功能，进度文字同样原理添加到了父布局中。

---

具体代码

ColorfulView.java 这个类实例化后添加到视图当中后，就如上如所示。

package com.capton.colorfulprogressbar;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.view.View;
/**
 *这是一个绘制了多个等腰直角三角形的View，呈现出一个由很多个斜条纹组成的双色画布
 * 可以自行通过new ColorfulView(Context context,int width,Paint paint,Paint paint2)方法，构建出来看效果
 * Created by capton on 2017/8/10.
 */
public class ColorfulView extends View {
   

    private Paint paint;
    private Paint paint2;
    private int mWidth;

    public ColorfulView(Context context,int width,Paint paint,Paint paint2) {
        super(context);
        mWidth=width;
        this.paint=paint;
        this.paint2=paint2; ;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(mWidth,mWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float x,y;
        float x2,y2;
         for (int i = 30; i > 0; i--) {
             Path p1=new Path();
            x=y=((float)mWidth/30)*i;
             p1.lineTo(0,y);
             p1.lineTo(x,0);
             p1.lineTo(0,0);
             p1.close();
            if(i%2==0) {
                canvas.drawPath(p1, paint);
            }else {
                canvas.drawPath(p1, paint2);
            }
        }
        for (int i = 0; i < 30; i++) {
             Path p2=new Path();
            x2=y2=((float)mWidth/30)*i;
            p2.moveTo(mWidth,mWidth);
            p2.lineTo(mWidth,y2);
            p2.lineTo(x2,mWidth);
            p2.lineTo(mWidth,mWidth);
            p2.close();
            if(i%2!=0) {
                canvas.drawPath(p2, paint);
            }else {
                canvas.drawPath(p2, paint2);
            }
        }
    }
} 

主体ColorfulProgressbar.java

package com.capton.colorfulprogressbar;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint; 
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.ViewGroup; 
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation; 
import android.widget.TextView;
/**
 * Created by capton on 2017/8/10.
 */
public class ColorfulProgressbar extends ViewGroup {
   

    public static final String STYLE_NORMAL="normal";  //正常单色样式
    public static final String STYLE_COLORFUL="colorful"; //双色样式