Android自定义无限加载条-彩虹

不知道有多少人用pocket这个软件，反正我是觉得很好用，chrome插件一键保存网页可以在手机端查看，而且手机端的阅读体验非常棒。

pocket移动Android端的进度条就是类似彩虹的无线加载条，觉得很好看就自定义一个类似的view，喜欢的可以拿走不谢。

废话不多说看效果吧，由于录屏转gif效果不太好，真是的效果很流畅的（说的自己都信了）

下面是自定义view的源代码：

public class RainbowBar extends View{
    float mWidth;
    float mHeight;
    //Default colors
    int[] colors = {0xff7de0af, 0xff4db3ae, 0xffff3f51, 0xfff1af47};
    int length = 4;
    List<Integer> colorLink;

    Paint paint;

    float offset = 0;

    float lineHeight;

    float smallWidth;
    float bigWidth;

    Timer timer;

    public RainbowBar(Context context){
        super(context);
    }

    public RainbowBar(Context context, AttributeSet attr){
        super(context, attr);
        init();
    }

    private void init(){
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAlpha(0xff);

        configColors();
    }

    private void configColors(){
        colorLink = new LinkedList<>();
        for(Integer integer:colors){
            colorLink.add(integer);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mWidth = (float)w;
        mHeight = (float)h;

        lineHeight = mHeight/2;
        paint.setStrokeWidth(mHeight);

        setPartWidth();
    }

    private void setPartWidth(){
        float per = 0.1f/(length-2);

        smallWidth = mWidth*per;
        bigWidth = mWidth*0.9f;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for(int i = 0; i < length; i++){
            paint.setColor(colorLink.get(i));
            if (i == 0){
                canvas.drawLine(0,lineHeight,smallWidth*offset,lineHeight,paint);
            }else if(i == length-2){
                canvas.drawLine(smallWidth*(offset+length-3),lineHeight,smallWidth*(length-2)+bigWidth*offset,lineHeight,paint);
            }else if(i == length-1){
                canvas.drawLine(smallWidth*(length-2)+bigWidth*offset,lineHeight,mWidth,lineHeight,paint);
            }else {
                canvas.drawLine(smallWidth*(i-1+offset),lineHeight,smallWidth*(i+offset),lineHeight,paint);
            }
        }
    }

    /**
     * set colors,at least 4 color data
     * @param allColor
     */
    public void setColors(int[] allColor){
        if (allColor.length < 4){
            return;
        }
        stop();
        colors = allColor;
        length = colors.length;
        configColors();
        setPartWidth();
        start();
    }

    void start(){
        stop();
        offset = 0;
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                offset += 0.02;
                if(offset >= 1){
                    offset = 0;
                    colorLink.add(0,colorLink.get(length-1));
                    colorLink.remove(length);
                }
                handler.sendEmptyMessage(INVALIDATE);
            }
        }, 0, 20);

    }

    static final int INVALIDATE = 0x1003;

    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == INVALIDATE){
                invalidate();
            }
        }
    };

    void stop(){
        if (timer != null){
            timer.cancel();
        }
        handler.removeMessages(INVALIDATE);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        start();
    }

    @Override
    protected void onDetachedFromWindow() {
        stop();
        super.onDetachedFromWindow();
    }

}

该自定义view没有扩展属性，view默认了四种颜色组合，不喜欢可以在java代码中重新设置颜色组合，颜色至少使用4种，否则设置无效。

int[] colors = {0xff111111, 0xff444444, 0xff888888, 0xffeeeeee};
mRainbowBar.setColors(colors);

该项目源代码地址： https://github.com/FangHaydn/LoadingBar

欢迎评论打脸