ScratchView：一步步打造萬能的 Android 刮獎效果控件

時間 2019-11-17

標籤 scratchview 步步打造萬能的 android 效果控件欄目 Android 简体版

原文原文鏈接

Hello，你們好，我是Clock。這周爲你們帶來一篇關於自定義控件的文章，這也是我本人第一次寫關於自定義控件的文章，但願能夠寫得言簡意賅，通熟易懂點。php

前言

我身邊有一部分開發的小夥伴，存在着這樣一種習慣。某一天，忽然看到某一款 App 上有個很漂亮的自定義控件（動畫）效果，就會絞盡腦子想辦法去本身實現一發。固然，我本身也是屬於這類型的騷年，看到某種效果就會手癢難耐琢磨着實現套路。我的以爲這是一種需求驅動進步的方法，當你絞盡腦子去實現本身想要的效果時，你就會發現你對 Android 自定義控件（動畫）的知識體系認識越深，長此以往，本身也能輕鬆的造出各類控件（動畫）效果。要是哪天，產品童鞋拿着個原型（或者對着某款 App ）跟你講：「XXXX，你看這個效果咱們能不能實現？」，而後你瞥了一眼，成竹在胸丟回一句：「開玩笑，還有我實現不了的效果？」。想一想內心是否是有點小激動？好了，差很少要說回正題了，這是我第一篇關於自定義控件的文章，以也會陸續穿插更新此類型的文章，但願你們可以喜歡。（偷偷劇透下，我下篇文章是關於性能優化的乾貨。固然我本身以爲很乾貨，但願到時候發出來不要打臉，哈哈哈！）java

實現效果

說了這麼多，仍是先給你們看看最終的實現效果先android

上面只是基本實現效果的一部分，你會看到下方還有不少其餘控件，它們是用來幹嗎的，接下來即將爲你揭曉一切。git

基本實現

平常生活中，咱們對刮獎效果想必不會陌生，其原理就是經過在原有圖案和文字上添加刮層來實現的。若是咱們想看到刮層後面藏的圖案和文字是什麼，勢必要經過刮開刮層才行。知道了這樣的套路，就能夠開始整理一下編碼實現思路，而後愉快開幹。github

我一開始的實現思路是想經過重寫 ImageView 和 TextView ，而後在分別用代碼在圖像和文字上添加圖層，這樣的話就能實現出效果了。然而回頭一想，不對，這種實現存在的侷限性比較大。若是照這種思路實現，那麼刮層下面只能存在圖片或者文字，若是產品經理要求同時存在圖片和文字呢？要求存在兩張圖片呢？要求同時存在圖片和文字，且文字放在圖片的上（下、左、右）呢？...咱們都知道，世界上最善變的除了妹紙的心，就是產品經理和他們的需求了。因而，便想出另一種實現思路，直接繼承 View 來實現一個刮層，讓這個刮層和圖片以及文字不產生任何依賴，再結合 FrameLayout 將刮層放置最上一層，刮層之下你想放多少圖片文字，圖片文字要怎麼佈局擺放都行。到此，思路明確，能夠愉快的開始編碼了。canvas

第一步：繪製出刮層效果。數組

package com.clock.scratch;

import ...;

/** * Created by Clock on 2016/8/26. */
public class ScratchView extends View {

    ...

    public ScratchView(Context context) {
        super(context);
        TypedArray typedArray = context.obtainStyledAttributes(R.styleable.ScratchView);
        init(typedArray);
    }

    ...

    private void init(TypedArray typedArray) {
        ...
        mMaskColor = typedArray.getColor(R.styleable.ScratchView_maskColor, DEFAULT_MASKER_COLOR);

        mMaskPaint = new Paint();
        mMaskPaint.setAntiAlias(true);//抗鋸齒
        mMaskPaint.setDither(true);//防抖
        setMaskColor(mMaskColor);
        ...

    }

    /** * 設置蒙板顏色 * * @param color 十六進制顏色值，如：0xffff0000（不透明的紅色） */
    public void setMaskColor(int color) {
        mMaskPaint.setColor(color);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(mMaskBitmap, 0, 0, mBitmapPaint);//繪製圖層遮罩
    }

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

    /** * 建立蒙層 * * @param width * @param height */
    private void createMasker(int width, int height) {
        mMaskBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        mMaskCanvas = new Canvas(mMaskBitmap);
        Rect rect = new Rect(0, 0, width, height);
        mMaskCanvas.drawRect(rect, mMaskPaint);//繪製生成和控件大小一致的遮罩 Bitmap
    }

}複製代碼

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ScratchView">
        <!--蒙層的顏色-->
        <attr name="maskColor" format="color|reference" />
    </declare-styleable>

</resources>複製代碼

上面的代碼思路以下：性能優化

建立出繼承於 View 的自定義控件 ScratchView，同時在init() 函數中初始化各種參數設置。如刮層的顏色等等；
爲了方便設置，須要把參數抽離成控件的自定義屬性，同時 ScratchView 類中提供 set 方法，供代碼調用。如刮層的顏色屬性就是 maskColor ，其在類中對應的方法就是 setMaskColor；
在 onSizeChanged 中，利用 View 已經 Measure 完畢，能夠得到 View 的寬高，並使用 Canvas 來初始化生成 mMaskBitmap 用於製做刮層；
在 onDraw 中，利用 canvas.drawBitmap 將 onSizeChanged 中初始化生成 mMaskBitmap 繪製顯示到界面，生成刮層；

在 Demo 中添加以下佈局，看下效果：異步

<FrameLayout android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center_horizontal" android:layout_marginTop="8dp">
        <!--刮層下遮住的內容-->
        <ImageView android:layout_width="150dp" android:layout_height="150dp" android:layout_gravity="center" android:src="@mipmap/lufy" />
        <!--刮層-->
        <com.clock.scratch.ScratchView android:id="@+id/scratch_view" android:layout_width="match_parent" android:layout_height="match_parent" />
    </FrameLayout>複製代碼

到此，咱們已經得到了一個刮層的實現效果，同時能夠直接在 xml 佈局和 java 代碼中設置刮層的顏色了。可是這時候，只是空有刮層，並無實現刮開的效果，接下來繼續添加實現代碼。ide

第二步：實現刮開效果。

package com.clock.scratch;

import ...;

public class ScratchView extends View {

    public ScratchView(Context context) {
        super(context);
        TypedArray typedArray = context.obtainStyledAttributes(R.styleable.ScratchView);
        init(typedArray);
    }

    private void init(TypedArray typedArray) {
        mEraseSize = typedArray.getFloat(R.styleable.ScratchView_eraseSize, DEFAULT_ERASER_SIZE);
        ...

        mErasePaint = new Paint();
        mErasePaint.setAntiAlias(true);
        mErasePaint.setDither(true);
        mErasePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));//設置擦除效果
        mErasePaint.setStyle(Paint.Style.STROKE);
        mErasePaint.setStrokeCap(Paint.Cap.ROUND);//設置筆尖形狀，讓繪製的邊緣圓滑
        setEraserSize(mEraseSize);

        mErasePath = new Path();

        ViewConfiguration viewConfiguration = ViewConfiguration.get(getContext());
        mTouchSlop = viewConfiguration.getScaledTouchSlop();

    }

    /** * 設置橡皮檫尺寸大小（默認大小是 60） * * @param eraserSize 橡皮檫尺寸大小 */
    public void setEraserSize(float eraserSize) {
        mErasePaint.setStrokeWidth(eraserSize);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                startErase(event.getX(), event.getY());
                invalidate();
                return true;
            case MotionEvent.ACTION_MOVE:
                erase(event.getX(), event.getY());
                invalidate();
                return true;
            case MotionEvent.ACTION_UP:
                stopErase();
                invalidate();
                return true;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }

    /** * 開始擦除 * * @param x * @param y */
    private void startErase(float x, float y) {
        mErasePath.reset();
        mErasePath.moveTo(x, y);
        this.mStartX = x;
        this.mStartY = y;
    }

    /** * 擦除 * * @param x * @param y */
    private void erase(float x, float y) {
        int dx = (int) Math.abs(x - mStartX);
        int dy = (int) Math.abs(y - mStartY);
        if (dx >= mTouchSlop || dy >= mTouchSlop) {
            this.mStartX = x;
            this.mStartY = y;

            mErasePath.lineTo(x, y);
            mMaskCanvas.drawPath(mErasePath, mErasePaint);

            mErasePath.reset();
            mErasePath.moveTo(mStartX, mStartY);
        }
    }


    /** * 中止擦除 */
    private void stopErase() {
        this.mStartX = 0;
        this.mStartY = 0;
        mErasePath.reset();
    }

}複製代碼

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ScratchView">
        <!--擦除尺寸大小-->
        <attr name="eraseSize" format="float" />
    </declare-styleable>

</resources>複製代碼

上面的代碼思路以下：

在 init() 中初始化 mErasePaint 和 mErasePath ，並設置 mErasePaint 的 Xfermode 爲 PorterDuff.Mode.CLEAR 用於後面製造出刮獎效果；
重寫 onTouchEvent 函數，處理觸摸事件 ACTION_DOWN 、 ACTION_MOVE 、 ACTION_UP 等三種事件類型，並利用 mErasePath 記錄手指滑動軌跡，再用 mMaskCanvas 將滑動軌跡繪製到第一步生成的 mMaskBitmap 上，最後經過調用 invalidate() 引發 View 的重繪生成刮開效果；
爲了防止滑動過於靈敏，咱們須要對滑動作一個判斷就是經過系統提供的 viewConfiguration.getScaledTouchSlop() 獲取系統認爲的最小滑動距離，當等於或者超過這個距離時，才認爲是在滑動，這就是爲何我在 erase() 要加 dx >= mTouchSlop || dy >= mTouchSlop 的判斷；
爲了控制刮痕的粗細，和前面設置刮層的顏色同樣，一樣爲 ScratchView 自定義一個屬性 eraseSize 實如今 xml 中控制。同時，在 Java 代碼中提供調用方法；

到此，一個基本的刮獎效果已經完成了，咱們來看看實現效果如何。

以上兩步僅僅完成基礎效果而已了，接下來咱們來作一些優化。

效果優化

第一步優化：添加水印

不少刮獎的效果都會有在刮層上添加自家 logo 作水印效果（這裏不知道稱爲水印合適嗎？反正就是大概那個意思）。以下面的支付寶同樣

咱們在基礎實現的第一步中的建立刮層函數裏面添加實現代碼，同時也添加一個自定義屬性和 set 方法可供調用：

/** * 設置水印圖標 * * @param resId 圖標資源id，-1表示去除水印 */
    public void setWatermark(int resId) {
        if (resId == -1) {
            mWatermark = null;
        } else {
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resId);
            mWatermark = new BitmapDrawable(bitmap);
            mWatermark.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        }
    }

    /** * 建立蒙層 * * @param width * @param height */
    private void createMasker(int width, int height) {
        ...

        if (mWatermark != null) {//
            Rect bounds = new Rect(rect);
            mWatermark.setBounds(bounds);
            mWatermark.draw(mMaskCanvas);
        }
    }複製代碼

實現效果以下：

固然，像效果上還有不少能夠進行添加，例如還能夠加上面支付寶的那種邊緣鋸齒效果等等，這裏就各位童鞋自行腦洞實現啦。

第二步優化：添加相應事件監聽器，以及完善一些經常使用函數。

說到事件監聽，我想這裏莫過於刮獎完成的事件了吧。對於使用這個控件的開發者，確定須要在刮完以後作相應的操做，例如，提示用戶中獎啦，仍是繼續努力之類的。怎麼樣判斷刮獎完成呢？這裏的實現思路是經過異步計算刮層 mMaskBitmap 中的像素信息值，經過算得透明像素個數佔總像素個數的比例，當這個比例超過必定閾值的時候，咱們認爲刮獎完成了。爲何要說超過必定閾值就算完成，這和現實生活中刮獎同樣，你不須要把刮層徹底颳得乾乾淨淨才能獲得結果。固然這個比例是多少，咱們一樣須要抽離成可動態設置的。再添加監聽器接口和設置監聽器的 API 便可。實現代碼，大體以下：

private void onErase() {
        int width = getWidth();
        int height = getHeight();
        new AsyncTask<Integer, Integer, Boolean>() {

            @Override
            protected Boolean doInBackground(Integer... params) {
                int width = params[0];
                int height = params[1];
                int pixels[] = new int[width * height];
                mMaskBitmap.getPixels(pixels, 0, width, 0, 0, width, height);//獲取覆蓋圖層中全部的像素信息，stride用於表示一行的像素個數有多少

                float erasePixelCount = 0;//擦除的像素個數
                float totalPixelCount = width * height;//總像素個數

                for (int pos = 0; pos < totalPixelCount; pos++) {
                    if (pixels[pos] == 0) {//透明的像素值爲0
                        erasePixelCount++;
                    }
                }

                int percent = 0;
                if (erasePixelCount >= 0 && totalPixelCount > 0) {
                    percent = Math.round(erasePixelCount * 100 / totalPixelCount);
                    publishProgress(percent);
                }

                return percent >= mMaxPercent;
            }

            @Override
            protected void onProgressUpdate(Integer... values) {
                super.onProgressUpdate(values);
                mPercent = values[0];
                onPercentUpdate();
            }

            @Override
            protected void onPostExecute(Boolean result) {
                super.onPostExecute(result);
                if (result && !mIsCompleted) {//標記擦除，並完成回調
                    mIsCompleted = true;
                    if (mEraseStatusListener != null) {
                        mEraseStatusListener.onCompleted(ScratchView.this);
                    }
                }
            }

        }.execute(width, height);
    }

    /** * 設置擦除監聽器 * * @param listener */
    public void setEraseStatusListener(EraseStatusListener listener) {
        this.mEraseStatusListener = listener;
    }

    /** * 擦除狀態監聽器 */
    public static interface EraseStatusListener {

        /** * 擦除進度 * * @param percent 進度值，大於0，小於等於100； */
        public void onProgress(int percent);

        /** * 擦除完成回調函數 * * @param view */
        public void onCompleted(View view);
    }複製代碼