一、介紹

一個橫向進度條 下載完成區域有一個滑塊不斷從左往右滑動（最開始就是被這個吸引的，就想著這個怎麼實現的） 進度條中間顯示當前進度，值得注意的是，進度條文本包含在下載區域中的部分顯示為白色 點擊暫停，進度條顏色改變，進度文本改變

二、分析

根據以上簡單介紹，可以抓住要實現的重難點是上面的第2、3點。

 1. 進度條文本包含在下載區域中的部分顯示為白色怎麼實現？

這個和歌詞變色的效果是一樣的，所以實現原理應該差不多。canvas有一個save的方法，然後設置成CLIP_SAVE_FLAG標志，這個標志的解釋是restore the current clip when restore() is called.然後結合canvas的clip方法和restore方法就能實現。後文見代碼④。

   2.  下載完成區域有一個滑塊不斷從左往右滑動怎麼實現？

首先想到的是畫這樣一個滑塊(其實是一張圖片)，然後不斷根據當前進度修改位置實現移動。需要注意的是這個滑塊的移動特點： 滑塊的右邊界開始進入，最後左邊界消失，而且只在下載完成這個區域內有顯示（右邊界超出下載完成右邊界部分不顯示）這讓我想到兩個圖層重疊時的顯示模式，再看看這幅圖，那麼這裡就可以使用SRC_ATOP模式。

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMSBpZD0="三實現">三、實現

1.自定義屬性

private void initAttrs(AttributeSet attrs) {
    if (attrs != null) {
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.FlikerProgressBar);
        textSize = (int) ta.getDimension(R.styleable.FlikerProgressBar_textSize, dp2px(12));
        loadingColor = ta.getColor(R.styleable.FlikerProgressBar_loadingColor, Color.parseColor("#40c4ff"));
        stopColor = ta.getColor(R.styleable.FlikerProgressBar_stopColor, Color.parseColor("#ff9800"));
        ta.recycle();
    }
}

2.重寫onMeasure方法，當height設置為wrap_content時設置為默認高度

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
    int height = 0;
    switch (heightSpecMode){
        case MeasureSpec.AT_MOST:
            height = (int) dp2px(DEFAULT_HEIGHT_DP);
            break;
        case MeasureSpec.EXACTLY:
        case MeasureSpec.UNSPECIFIED:
            height = heightSpecSize;
            break;
    }
    setMeasuredDimension(widthSpecSize, height);
}

3.重寫onDraw方法

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

    //1.邊框
    drawBorder(canvas);

    //2.進度
    drawProgress();

    canvas.drawBitmap(pgBitmap, 0, 0, null);

    //3.進度text
    drawProgressText(canvas);

    //4.變色處理
    drawColorProgressText(canvas);
}

①繪制邊框

private void drawBorder(Canvas canvas) {
    bgPaint.setStyle(Paint.Style.STROKE);
    bgPaint.setColor(progressColor);
    bgPaint.setStrokeWidth(dp2px(1));
    canvas.drawRect(0, 0, getWidth(), getHeight(), bgPaint);
}

②繪制進度

private void drawProgress() {
    bgPaint.setStyle(Paint.Style.FILL);
    bgPaint.setStrokeWidth(0);
    bgPaint.setColor(progressColor);

    float right = (progress / MAX_PROGRESS) * getMeasuredWidth();
    pgBitmap = Bitmap.createBitmap((int) Math.max(right, 1), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
    pgCanvas = new Canvas(pgBitmap);
    pgCanvas.drawColor(progressColor);

    if(!isStop){
        bgPaint.setXfermode(xfermode);
        pgCanvas.drawBitmap(flikerBitmap, flickerLeft, 0, bgPaint);
        bgPaint.setXfermode(null);
    }
}

③繪制進度條顯示文本

private void drawProgressText(Canvas canvas) {
    textPaint.setColor(progressColor);
    progressText = getProgressText();
    textPaint.getTextBounds(progressText, 0, progressText.length(), textBouds);
    int tWidth = textBouds.width();
    int tHeight = textBouds.height();
    float xCoordinate = (getMeasuredWidth() - tWidth) / 2;
    float yCoordinate = (getMeasuredHeight() + tHeight) / 2;
    canvas.drawText(progressText, xCoordinate, yCoordinate, textPaint);
}

④進度條文本變色處理

private void drawColorProgressText(Canvas canvas) {
    textPaint.setColor(Color.WHITE);
    int tWidth = textBouds.width();
    int tHeight = textBouds.height();
    float xCoordinate = (getMeasuredWidth() - tWidth) / 2;
    float yCoordinate = (getMeasuredHeight() + tHeight) / 2;
    float progressWidth = (progress / MAX_PROGRESS) * getMeasuredWidth();
    if(progressWidth > xCoordinate){
        canvas.save(Canvas.CLIP_SAVE_FLAG);
        float right = Math.min(progressWidth, xCoordinate + tWidth);
        canvas.clipRect(xCoordinate, 0, right, getMeasuredHeight());
        canvas.drawText(progressText, xCoordinate, yCoordinate, textPaint);
        canvas.restore();
    }
}

四、效果圖

五、下載

下載：https://github.com/LineChen/FlickerProgressBar