仿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);
    }
}