android仿淘寶刮刮卡功能實作

去年淘寶和天貓的活動搞的有聲有色的，其中有一個遊戲還是很受大家歡迎的，那就是紅包刮刮卡，自己也挺迷的，一刮起來就停不下來，有沒有？

最近自己也在學習android入門，正好前些日子在搜尋一個功能示例的時候，找到一個哥們分享的一篇介紹刮刮卡的文章，文章很簡單，基本沒有廢話，直接貼了如何通過自定義view來實作刮刮卡的示例代碼，連結如下：

<a href="http://www.cnblogs.com/xinye/p/3616095.html" target="_blank">http://www.cnblogs.com/xinye/p/3616095.html</a>

後來又借着給大家分享android開發入門知識的機會，以這個示例為主要功能參考，并主要仿照天貓紅包刮刮卡的外觀樣式和互動功能，做了一個還算功能齊全的示例，因為主要是為了講解，是以特意把注釋标注的比較完整，大家可以通過下面的連結到我共享的清單中下載下傳示例源碼：

<a href="https://github.com/yangguilin/GuaGuaLe" target="_blank">https://github.com/yangguilin/GuaGuaLe</a>

下面簡單分析一下，實作刮刮卡功能的幾點關鍵知識點：

1. 自定義一個View子類（TextView當然也可以，俺就是用得TextView做父類），并且重寫下面幾個主要方法：

（1） 構造函數

（2）視圖繪制方法：protected void onDraw(Canvas canvas)

（3） 觸屏事件處理方法：public boolean onTouchEvent(MotionEvent event)

2. 第一步中的三個方法是主要且必須的三個方法，接下來，在構造函數中，需要添加初始化刮刮卡視圖的功能，該功能可以分解為以下幾個關鍵步驟：

（1） 設定視圖背景圖檔：因為涉及到随機變換的是否中獎的圖檔，是以意味着這個背景需要通過canvas來操作bitmap來做一次簡單的繪制，首先為bitmap設定一種背景色，然後再通過canvas将得到的，需要顯示的圖檔，根據具體的尺寸比例，畫到bitmap中即可。

（2） 視圖背景搞定後，接下來要搞定的就是刮刮卡的塗層，也就是咱們能用手指劃掉的那一層，原理基本類似于背景，首先建立一個topBitmap，然後将該topBitmap載入到一個Canvas中進行編輯，為該topBitmap添加一層灰色的背景色，然後再通過定義一個畫筆，再在該topBitmap上繪制上提示文字“請刮開塗層”，這樣刮刮卡的所謂上下兩層均已經定義完畢。

（3） 接下來，需要定義一隻手指劃到塗層時，來繪制透明色的畫筆，其工作原理主要就是，通過調用預設的觸屏事件 + 視圖自動繪制，來實作所謂的手指刮開塗層的操作。（這部分也是不太容易了解的，或許是我說不清楚，總之看代碼注釋吧，會比較清楚）

（4） 此外，如何實作當手指劃開大部分背景圖檔時，自動去除全部塗層，說來也挺簡單，不排除有更完美的處理方案，俺用的是關鍵點法，即定義若幹（示例中定義了9個）關鍵點，分布于待顯示的背景圖的主要區域，然後在每一次判斷手指滑動的事件的同時，順便檢查是否有大多數的關鍵點的顔色值已經變為了透明（顔色值為0，即已被刮開），如果是，則通過canvas直接将topBitmap的顔色統一設定為透明色即可。

（5） 針對不同尺寸的android手機，如何做到顯示一緻？這也是一個後期的主要問題，因為前期通過不斷調試，設定的一些尺寸，都是基于調試機的，既然要在各種不同版本、品牌的機器上運作，那麼适配就是一個主要的問題，我是用了一種比較偷懶的方法，及将調試機的各項參數資料作為預設的參數，然後每次初始化的時候，都會擷取目前螢幕的分辨率尺寸，然後與預設值的螢幕寬度進行比較，得到一個比例，然後在所有需要明确使用數值的地方，都乘以該比例，間接地達到了對試圖縮放的目的。

最後，附上兩張示例的截圖：