電子發(fā)燒友App
前言
我身邊有一部分開(kāi)發(fā)的小伙伴，存在著這樣一種習(xí)慣。某一天，突然看到某一款 App 上有個(gè)很漂亮的自定義控件（動(dòng)畫(huà)）效果，就會(huì)絞盡腦子想辦法去自己實(shí)現(xiàn)一發(fā)。當(dāng)然，我自己也是屬于這類(lèi)型的騷年，看到某種效果就會(huì)手癢難耐琢磨著實(shí)現(xiàn)套路。個(gè)人覺(jué)得這是一種需求驅(qū)動(dòng)進(jìn)步的方法，當(dāng)你絞盡腦子去實(shí)現(xiàn)自己想要的效果時(shí)，你就會(huì)發(fā)現(xiàn)你對(duì) Android 自定義控件（動(dòng)畫(huà)）的知識(shí)體系認(rèn)識(shí)越深，久而久之，自己也能輕松的造出各種控件（動(dòng)畫(huà)）效果。要是哪天，產(chǎn)品童鞋拿著個(gè)原型（或者對(duì)著某款 App ）跟你講：“XXXX，你看這個(gè)效果我們能不能實(shí)現(xiàn)？”，然后你瞥了一眼，胸有成竹丟回一句：“開(kāi)玩笑，還有我實(shí)現(xiàn)不了的效果？”。想想心里是不是有點(diǎn)小激動(dòng)？好了，差不多要說(shuō)回正題了，這是我第一篇關(guān)于自定義控件的文章，以也會(huì)陸續(xù)穿插更新此類(lèi)型的文章，希望大家能夠喜歡。（偷偷劇透下，我下篇文章是關(guān)于性能優(yōu)化的干貨。當(dāng)然我自己覺(jué)得很干貨，希望到時(shí)候發(fā)出來(lái)不要打臉，哈哈哈！）
實(shí)現(xiàn)效果
說(shuō)了這么多，還是先給大家看看最終的實(shí)現(xiàn)效果先
上面只是基本實(shí)現(xiàn)效果的一部分，你會(huì)看到下方還有很多其他控件，它們是用來(lái)干嘛的，接下來(lái)即將為你揭曉一切。
基本實(shí)現(xiàn)
日常生活中，我們對(duì)刮獎(jiǎng)效果想必不會(huì)陌生，其原理就是通過(guò)在原有圖案和文字上添加刮層來(lái)實(shí)現(xiàn)的。如果我們想看到刮層后面藏的圖案和文字是什么，勢(shì)必要通過(guò)刮開(kāi)刮層才行。知道了這樣的套路，就可以開(kāi)始整理一下編碼實(shí)現(xiàn)思路，然后愉快開(kāi)干。
我一開(kāi)始的實(shí)現(xiàn)思路是想通過(guò)重寫(xiě) ImageView 和 TextView ，然后在分別用代碼在圖像和文字上添加圖層，這樣的話(huà)就能實(shí)現(xiàn)出效果了。然而回頭一想，不對(duì)，這種實(shí)現(xiàn)存在的局限性比較大。如果照這種思路實(shí)現(xiàn)，那么刮層下面只能存在圖片或者文字，如果產(chǎn)品經(jīng)理要求同時(shí)存在圖片和文字呢？要求存在兩張圖片呢？要求同時(shí)存在圖片和文字，且文字放在圖片的上（下、左、右）呢？…我們都知道，世界上最善變的除了妹紙的心，就是產(chǎn)品經(jīng)理和他們的需求了。于是，便想出另外一種實(shí)現(xiàn)思路，直接繼承 View 來(lái)實(shí)現(xiàn)一個(gè)刮層，讓這個(gè)刮層和圖片以及文字不產(chǎn)生任何依賴(lài)，再結(jié)合 FrameLayout 將刮層放置最上一層，刮層之下你想放多少圖片文字，圖片文字要怎么布局?jǐn)[放都行。到此，思路明確，可以愉快的開(kāi)始編碼了。
第一步：繪制出刮層效果。
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）;
。..
}
/**
* 設(shè)置蒙板顏色
*
* @param color 十六進(jìn)制顏色值，如：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）;
}
/**
* 創(chuàng)建蒙層
*
* @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》
上面的代碼思路如下：
創(chuàng)建出繼承于 View 的自定義控件 ScratchView，同時(shí)在init（） 函數(shù)中初始化各類(lèi)參數(shù)設(shè)置。如刮層的顏色等等；
為了方便設(shè)置，需要把參數(shù)抽離成控件的自定義屬性，同時(shí) ScratchView 類(lèi)中提供 set 方法，供代碼調(diào)用。如刮層的顏色屬性就是 maskColor ，其在類(lèi)中對(duì)應(yīng)的方法就是 setMaskColor；
在 onSizeChanged 中，利用 View 已經(jīng) Measure 完畢，可以獲得 View 的寬高，并使用 Canvas 來(lái)初始化生成 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”》
《！--刮層下遮住的內(nèi)容--》
《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》
到此，我們已經(jīng)獲得了一個(gè)刮層的實(shí)現(xiàn)效果，同時(shí)可以直接在 xml 布局和 java 代碼中設(shè)置刮層的顏色了。但是這時(shí)候，只是空有刮層，并沒(méi)有實(shí)現(xiàn)刮開(kāi)的效果，接下來(lái)繼續(xù)添加實(shí)現(xiàn)代碼。
工商網(wǎng)監(jiān)
評(píng)論