android仿淘寶刮刮卡功能實現

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

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

https://www.cnblogs.com/xinye/p/3616095.html

後來又借著給大家分享android開發入門知識的機會，以這個示例為主要功能參考，並主要仿照天貓紅包刮刮卡的外觀樣式和交互功能，做了一個還算功能齊全的示例，因為主要是為了講解，所以特意把注釋標注的比較完整，大家可以通過下麵的鏈接到我共享的列表中下載示例源碼：

https://github.com/yangguilin/GuaGuaLe

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

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手機，如何做到顯示一致？這也是一個後期的主要問題，因為前期通過不斷調試，設定的一些尺寸，都是基於調試機的，既然要在各種不同版本、品牌的機器上運行，那麼適配就是一個主要的問題，我是用了一種比較偷懶的方法，及將調試機的各項參數數據作為默認的參數，然後每次初始化的時候，都會獲取當前屏幕的分辨率尺寸，然後與默認值的屏幕寬度進行比較，得到一個比例，然後在所有需要明確使用數值的地方，都乘以該比例，間接地達到了對試圖縮放的目的。

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