自定義View實現刮刮卡效果

繼承View實現的一個刮刮卡效果的控件。
使用方法:

  • 和普通控件的使用方法一樣實例化這個View;
  • 使用setCardContent()方法設置設置卡片底層的圖片和頂層的遮罩圖片,可以使用Bitmap實例和資源id兩種方式設置;
  • 使用setComplate()方法設置刮掉多少後自動清理剩餘的遮罩(可選)。

如果底層不想使用圖片想用文本,把對應的Bitmap改成文本或者添加一個設置文本的方法,並修改onDraw()方法即可。
代碼註釋很多,很容易看明白

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class ScratchcardView extends View {

    /** 畫路徑的畫筆 */
    private Paint scratchPaint = new Paint();
    /** 刮的路徑(通過手指滑動產生) */
    private Path scratchPath = new Path();
    /** 畫遮罩層的畫布 */
    private Canvas scratchCanvas;
    /** 保存被刮時剩餘部分的遮罩 */
    private Bitmap scratchBitmap;

    /** 一個跟當前View一樣大小的矩形 */
    private Rect mRect = null;

    /** 是否刮完的標識 */
    private boolean isComplete;
    /** 刮掉多少後算完成(0-100) */
    private int complate = 100;

    private Context mContext = null;

    /** 當前View的寬度 */
    private int width = 0;
    /** 當前View的高度 */
    private int height = 0;

    /** 卡片底層隱藏的圖片 */
    private Bitmap bmpSecret = null;
    /** 作爲遮罩的圖片 */
    private Bitmap bmpScratch = null;

    public ScratchcardView(Context context) {
        this(context, null);
    }

    public ScratchcardView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScratchcardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        init();
    }

    private void init() {
        scratchPaint.setAntiAlias(true);
        // 設置畫筆不填充
        scratchPaint.setStyle(Paint.Style.STROKE);
        // 設置圓角
        scratchPaint.setStrokeJoin(Paint.Join.ROUND);
        scratchPaint.setStrokeCap(Paint.Cap.ROUND);
        // 繪製時取下層和本層繪製的非交集部分
        scratchPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        // 設置畫筆寬度
        scratchPaint.setStrokeWidth(20);

        scratchPath = new Path();

        post(new Runnable() {

            @Override
            public void run() {
                width = getWidth();
                height = getHeight();
                mRect = new Rect(0, 0, width, height);
                // 初始化一個bitmap保存被刮時剩餘部分的遮罩
                scratchBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
                scratchCanvas = new Canvas(scratchBitmap);
                scratchCanvas.drawBitmap(bmpScratch, null, mRect, null);
            }
        });
    }

    /**
     * 設置刮刮卡的內容
     * 
     * @param secretContent
     *            底層保密的圖片
     * @param scratchContent
     *            頂層的遮罩圖片
     */
    public void setCardContent(Bitmap secretContent, Bitmap scratchContent) {
        this.bmpSecret = secretContent;
        this.bmpScratch = scratchContent;
    }

    /**
     * 設置刮刮卡的內容
     * 
     * @param secretId
     *            底層保密的圖片id
     * @param scratchId
     *            頂層的遮罩圖片的id
     */
    public void setCardContent(int secretId, int scratchId) {
        bmpSecret = BitmapFactory.decodeResource(mContext.getResources(),
                secretId);
        bmpScratch = BitmapFactory.decodeResource(mContext.getResources(),
                scratchId);
    }

    /**
     * 設置刮掉多少後自動清理剩餘的遮罩
     * 
     * @param complate
     *            已清理的百分比(0-100),默認100
     */
    public void setComplate(int complate) {
        this.complate = complate;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(bmpSecret, null, mRect, null);
        if (!isComplete) {
            scratchCanvas.drawPath(scratchPath, scratchPaint);
            canvas.drawBitmap(scratchBitmap, 0, 0, null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            scratchPath.moveTo(x, y);
            break;
        case MotionEvent.ACTION_MOVE:
            scratchPath.lineTo(x, y);
            break;
        case MotionEvent.ACTION_UP:
            new Thread(mRunnable).start();
            break;
        }

        invalidate();
        return true;
    }

    /**
     * 統計擦除區域任務
     */
    private Runnable mRunnable = new Runnable() {
        private int[] mPixels;

        @Override
        public void run() {

            // 已清理的區域的面積
            int wipeArea = 0;
            // 總面積
            int totalArea = width * height;

            mPixels = new int[totalArea];

            // 拿到所有的像素信息
            scratchBitmap.getPixels(mPixels, 0, width, 0, 0, width, height);
            // 遍歷統計擦除的區域
            for (int i = 0; i < width; i++) {
                for (int j = 0; j < height; j++) {
                    int index = i + j * width;
                    if (mPixels[index] == 0) {
                        wipeArea++;
                    }
                }
            }
            // 根據所佔百分比,進行一些操作
            if (wipeArea > 0 && totalArea > 0) {
                int percent = (int) (wipeArea * 100 / totalArea);
                if (percent > complate) {
                    Log.e("TAG", "清除區域達到" + complate + "%,下面自動清除");
                    isComplete = true;
                    postInvalidate();
                }
            }
        }

    };
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章