前言

　　我身邊有一部分開發的小伙伴，存在著這樣一種習慣。某一天，突然看到某一款 App 上有個很漂亮的自定義控件（動畫）效果，就會絞盡腦子想辦法去自己實現一發。當然，我自己也是屬于這類型的騷年，看到某種效果就會手癢難耐琢磨著實現套路。個人覺得這是一種需求驅動進步的方法，當你絞盡腦子去實現自己想要的效果時，你就會發現你對 Android 自定義控件（動畫）的知識體系認識越深，久而久之，自己也能輕松的造出各種控件（動畫）效果。要是哪天，產品童鞋拿著個原型（或者對著某款 App ）跟你講：“XXXX，你看這個效果我們能不能實現？”，然后你瞥了一眼，胸有成竹丟回一句：“開玩笑，還有我實現不了的效果？”。想想心里是不是有點小激動？好了，差不多要說回正題了，這是我第一篇關于自定義控件的文章，以也會陸續穿插更新此類型的文章，希望大家能夠喜歡。（偷偷劇透下，我下篇文章是關于性能優化的干貨。當然我自己覺得很干貨，希望到時候發出來不要打臉，哈哈哈！）

　　實現效果

　　說了這么多，還是先給大家看看最終的實現效果先

　　上面只是基本實現效果的一部分，你會看到下方還有很多其他控件，它們是用來干嘛的，接下來即將為你揭曉一切。

　　基本實現

　　日常生活中，我們對刮獎效果想必不會陌生，其原理就是通過在原有圖案和文字上添加刮層來實現的。如果我們想看到刮層后面藏的圖案和文字是什么，勢必要通過刮開刮層才行。知道了這樣的套路，就可以開始整理一下編碼實現思路，然后愉快開干。

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

　　第一步：繪制出刮層效果。

　　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 代碼中設置刮層的顏色了。但是這時候，只是空有刮層，并沒有實現刮開的效果，接下來繼續添加實現代碼。