仿iReader切換皮膚進度條

目錄

• 仿iReader切換皮膚進度條
  • 定義屬性文件：
  • 實現代碼:
  • 簡單測試代碼：

仿iReader切換皮膚進度條

標籤（空格分隔）： 自定義View

---

本覺得使用paint.setXfermode(new PorterDuffXfermode(Mode.XOR));能夠輕鬆搞定，沒想到我對PorterDuffXfermode(參考APIDemos代碼，路徑/APIDemos/Graphics/Xfermodes)的理解有問題，比較悲催了。最後使用了ClipRect的方式實現了這個東西！

定義屬性文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ProgressView">
        <attr name="text" format="string"/>
        <attr name="textSize" format="dimension"/>
        <attr name="color" format="color"/>
        <attr name="progress" format="integer"/>
        <attr name="maxProgress" format="integer"/>
        <attr name="crossColor" format="color"/>
    </declare-styleable>
</resources>

實現代碼:

package com.example.testproject;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
/**
 * 
 * @author 
 *
 */
public class ProgressView extends View {
    
    /** 最大進度 **/
    private int maxProgress;
    
    /** 當前進度 **/
    private int progress;
    
    /** 當前顯示的文字 **/
    private String text;
    
    /** 進度和沒有交叉的時候的文字的顏色 **/
    private int color;
    
    /** 文字和進度交叉的時候的文字的顏色 **/
    private int crossColor;
    
    /** 畫進度和沒有交叉的時候的文字的Paint **/
    private Paint paint;
    
    /** 表示進度的Rect **/
    private Rect rect;

    public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    public ProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public ProgressView(Context context) {
        super(context);
        init(context, null);
    }
    
    private void init(Context context, AttributeSet attrs){
        /** 獲得XML屬性 **/
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);
        
        maxProgress = ta.getInt(R.styleable.ProgressView_maxProgress, 100);
        progress = ta.getInt(R.styleable.ProgressView_progress, 0);
        text = ta.getString(R.styleable.ProgressView_text);
        color = ta.getColor(R.styleable.ProgressView_color, Color.GREEN);
        crossColor = ta.getColor(R.styleable.ProgressView_crossColor, Color.WHITE);
        float textSize = ta.getDimensionPixelOffset(R.styleable.ProgressView_textSize, 20);
        ta.recycle();
        
        /** 設置默認的Paint屬性 **/
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setFlags(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(textSize);
        paint.setColor(color);
        
    }
    @Override
    protected void onDraw(Canvas canvas) {
        /** 白色背景 **/
        canvas.drawColor(Color.WHITE);
        
        /** 恢復顏色 **/
        paint.setColor(color);
        
        /** 獲得畫文字的左上角頂點 **/
        int offsetX = (int) ((getWidth() - text.length() * paint.getTextSize()) / 2);
        int offsetY = (int) ((getHeight() - paint.getTextSize()) / 2);
        
        /** 畫默認文字 **/
        canvas.drawText(text, offsetX, offsetY, paint);
        
        /** 畫進度 **/
        if(rect == null){
            rect = new Rect();
            rect.left = 0;
            rect.top = 0;
            rect.bottom = getHeight();
        }
        rect.right = (int) (getWidth() * progress / (float)maxProgress);
        canvas.drawRect(rect, paint);
        
        /** 畫交叉的時候的文字 **/
        canvas.save();
        
        canvas.clipRect(rect);
        paint.setColor(crossColor);
        canvas.drawText(text, offsetX, offsetY, paint);
        
        canvas.restore();
    }
    /**
     * 設置最大進度
     * @return
     */
    public int getMaxProgress() {
        return maxProgress;
    }
    /**
     * 獲得最大進度
     * @param maxProgress
     */
    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
        invalidate();
    }
    /**
     * 獲得當前進度
     * @return
     */
    public int getProgress() {
        return progress;
    }
    /**
     * 設置當前進度
     * @param progress
     */
    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }
    /**
     * 獲得顯示的文字
     * @return
     */
    public String getText() {
        return text;
    }
    /**
     * 設置顯示的文字
     * @param text
     */
    public void setText(String text) {
        this.text = text;
        invalidate();
    }

    /***
     * 設置提示文字的大小
     * @param textSize
     */
    public void setTextSize(int textSize) {
        paint.setTextSize(textSize);
        invalidate();
    }

    /***
     * 設置進度和沒有交叉的時候的文字的顏色
     * @param color
     */
    public void setColor(int color) {
        this.color = color;
        paint.setColor(color);
        invalidate();
    }
    /**
     * 設置進度和文字交叉以後的文字顏色
     * @param color
     */
    public void setCrossColor(int color){
        crossColor = color;
        invalidate();
    }
    
}

簡單測試代碼：

package com.example.testproject;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;

public class ProgressTextViewActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,500);
        ProgressView view = new ProgressView(ProgressTextViewActivity.this);
        view.setText("正在下載...");
        view.setTextSize(40);
        view.setMaxProgress(10000);
        view.setProgress(5000);
        view.setColor(Color.parseColor("#FF336699"));
        view.setLayoutParams(params);
        view.setCrossColor(Color.WHITE);
        setContentView(view);
    }
}