輕松實(shí)現(xiàn)功能強(qiáng)大的Android刮獎(jiǎng)效果控件(ScratchView)
前言
我身邊有一部分開發(fā)的小伙伴,存在著這樣一種習(xí)慣。某一天,突然看到某一款 App 上有個(gè)很漂亮的自定義控件(動(dòng)畫)效果,就會(huì)絞盡腦子想辦法去自己實(shí)現(xiàn)一發(fā)。當(dāng)然,我自己也是屬于這類型的騷年,看到某種效果就會(huì)手癢難耐琢磨著實(shí)現(xiàn)套路。個(gè)人覺得這是一種需求驅(qū)動(dòng)進(jìn)步的方法,當(dāng)你絞盡腦子去實(shí)現(xiàn)自己想要的效果時(shí),你就會(huì)發(fā)現(xiàn)你對(duì) Android 自定義控件(動(dòng)畫)的知識(shí)體系認(rèn)識(shí)越深,久而久之,自己也能輕松的造出各種控件(動(dòng)畫)效果。要是哪天,產(chǎn)品童鞋拿著個(gè)原型(或者對(duì)著某款 App )跟你講:“XXXX,你看這個(gè)效果我們能不能實(shí)現(xiàn)?”,然后你瞥了一眼,胸有成竹丟回一句:“開玩笑,還有我實(shí)現(xiàn)不了的效果?”。想想心里是不是有點(diǎn)小激動(dòng)?好了,差不多要說回正題了,這是我第一篇關(guān)于自定義控件的文章,以也會(huì)陸續(xù)穿插更新此類型的文章,希望大家能夠喜歡。(偷偷劇透下,我下篇文章是關(guān)于性能優(yōu)化的干貨。當(dāng)然我自己覺得很干貨,希望到時(shí)候發(fā)出來不要打臉,哈哈哈?。?/p>
實(shí)現(xiàn)效果
說了這么多,還是先給大家看看最終的實(shí)現(xiàn)效果
上面只是基本實(shí)現(xiàn)效果的一部分,你會(huì)看到下方還有很多其他控件,它們是用來干嘛的,接下來即將為你揭曉一切。
基本實(shí)現(xiàn)
日常生活中,我們對(duì)刮獎(jiǎng)效果想必不會(huì)陌生,其原理就是通過在原有圖案和文字上添加刮層來實(shí)現(xiàn)的。如果我們想看到刮層后面藏的圖案和文字是什么,勢(shì)必要通過刮開刮層才行。知道了這樣的套路,就可以開始整理一下編碼實(shí)現(xiàn)思路,然后愉快開干。
我一開始的實(shí)現(xiàn)思路是想通過重寫 ImageView 和 TextView ,然后在分別用代碼在圖像和文字上添加圖層,這樣的話就能實(shí)現(xiàn)出效果了。然而回頭一想,不對(duì),這種實(shí)現(xiàn)存在的局限性比較大。如果照這種思路實(shí)現(xiàn),那么刮層下面只能存在圖片或者文字,如果產(chǎn)品經(jīng)理要求同時(shí)存在圖片和文字呢?要求存在兩張圖片呢?要求同時(shí)存在圖片和文字,且文字放在圖片的上(下、左、右)呢?...我們都知道,世界上最善變的除了妹紙的心,就是產(chǎn)品經(jīng)理和他們的需求了。于是,便想出另外一種實(shí)現(xiàn)思路,直接繼承 View 來實(shí)現(xiàn)一個(gè)刮層,讓這個(gè)刮層和圖片以及文字不產(chǎn)生任何依賴,再結(jié)合 FrameLayout 將刮層放置最上一層,刮層之下你想放多少圖片文字,圖片文字要怎么布局?jǐn)[放都行。到此,思路明確,可以愉快的開始編碼了。
第一步:繪制出刮層效果。
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ù)中初始化各類參數(shù)設(shè)置。如刮層的顏色等等;
為了方便設(shè)置,需要把參數(shù)抽離成控件的自定義屬性,同時(shí) ScratchView 類中提供 set 方法,供代碼調(diào)用。如刮層的顏色屬性就是 maskColor ,其在類中對(duì)應(yīng)的方法就是 setMaskColor;
在 onSizeChanged 中,利用 View 已經(jīng) 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"> <!--刮層下遮住的內(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í)候,只是空有刮層,并沒有實(shí)現(xiàn)刮開的效果,接下來繼續(xù)添加實(shí)現(xiàn)代碼。
第二步:實(shí)現(xiàn)刮開效果。
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));//設(shè)置擦除效果 mErasePaint.setStyle(Paint.Style.STROKE); mErasePaint.setStrokeCap(Paint.Cap.ROUND);//設(shè)置筆尖形狀,讓繪制的邊緣圓滑 setEraserSize(mEraseSize); mErasePath = new Path(); ViewConfiguration viewConfiguration = ViewConfiguration.get(getContext()); mTouchSlop = viewConfiguration.getScaledTouchSlop(); } /** * 設(shè)置橡皮檫尺寸大小(默認(rèn)大小是 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 ,并設(shè)置 mErasePaint 的 Xfermode 為 PorterDuff.Mode.CLEAR 用于后面制造出刮獎(jiǎng)效果;
重寫 onTouchEvent 函數(shù),處理觸摸事件 ACTION_DOWN 、 ACTION_MOVE 、 ACTION_UP 等三種事件類型,并利用 mErasePath 記錄手指滑動(dòng)軌跡,再用 mMaskCanvas 將滑動(dòng)軌跡繪制到第一步生成的 mMaskBitmap 上 ,最后通過調(diào)用 invalidate() 引起 View 的重繪生成刮開效果;
為了防止滑動(dòng)過于靈敏,我們需要對(duì)滑動(dòng)做一個(gè)判斷就是通過系統(tǒng)提供的 viewConfiguration.getScaledTouchSlop() 獲取系統(tǒng)認(rèn)為的最小滑動(dòng)距離,當(dāng)?shù)扔诨蛘叱^這個(gè)距離時(shí),才認(rèn)為是在滑動(dòng),這就是為什么我在 erase() 要加 dx >= mTouchSlop || dy >= mTouchSlop 的判斷;
為了控制刮痕的粗細(xì),和前面設(shè)置刮層的顏色一樣,同樣為 ScratchView 自定義一個(gè)屬性 eraseSize 實(shí)現(xiàn)在 xml 中控制。同時(shí),在 Java 代碼中提供調(diào)用方法;
到此,一個(gè)基本的刮獎(jiǎng)效果已經(jīng)完成了,我們來看看實(shí)現(xiàn)效果如何。
以上兩步僅僅完成基礎(chǔ)效果而已了,接下來我們來做一些優(yōu)化。
效果優(yōu)化
第一步優(yōu)化:添加水印
很多刮獎(jiǎng)的效果都會(huì)有在刮層上添加自家 logo 做水印效果(這里不知道稱為水印合適嗎?反正就是大概那個(gè)意思)。如下面的支付寶一樣
我們?cè)诨A(chǔ)實(shí)現(xiàn)的第一步中的創(chuàng)建刮層函數(shù)里面添加實(shí)現(xiàn)代碼,同時(shí)也添加一個(gè)自定義屬性和 set 方法可供調(diào)用:
/** * 設(shè)置水印圖標(biāo) * * @param resId 圖標(biāo)資源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); } } /** * 創(chuàng)建蒙層 * * @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); } }
實(shí)現(xiàn)效果如下:
當(dāng)然,像效果上還有很多可以進(jìn)行添加,例如還可以加上面支付寶的那種邊緣鋸齒效果等等,這里就各位童鞋自行腦洞實(shí)現(xiàn)啦。
第二步優(yōu)化:添加相應(yīng)事件監(jiān)聽器,以及完善一些常用函數(shù)。
說到事件監(jiān)聽,我想這里莫過于刮獎(jiǎng)完成的事件了吧。對(duì)于使用這個(gè)控件的開發(fā)者,肯定需要在刮完之后做相應(yīng)的操作,例如,提示用戶中獎(jiǎng)啦,還是繼續(xù)努力之類的。怎么樣判斷刮獎(jiǎng)完成呢?這里的實(shí)現(xiàn)思路是通過異步計(jì)算刮層 mMaskBitmap 中的像素信息值,通過算得透明像素個(gè)數(shù)占總像素個(gè)數(shù)的比例,當(dāng)這個(gè)比例超過一定閾值的時(shí)候,我們認(rèn)為刮獎(jiǎng)完成了。為什么要說超過一定閾值就算完成,這和現(xiàn)實(shí)生活中刮獎(jiǎng)一樣,你不需要把刮層完全刮得干干凈凈才能得到結(jié)果。當(dāng)然這個(gè)比例是多少,我們同樣需要抽離成可動(dòng)態(tài)設(shè)置的。再添加監(jiān)聽器接口和設(shè)置監(jiān)聽器的 API 即可。實(shí)現(xiàn)代碼,大致如下:
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用于表示一行的像素個(gè)數(shù)有多少 float erasePixelCount = 0;//擦除的像素個(gè)數(shù) float totalPixelCount = width * height;//總像素個(gè)數(shù) 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) {//標(biāo)記擦除,并完成回調(diào) mIsCompleted = true; if (mEraseStatusListener != null) { mEraseStatusListener.onCompleted(ScratchView.this); } } } }.execute(width, height); } /** * 設(shè)置擦除監(jiān)聽器 * * @param listener */ public void setEraseStatusListener(EraseStatusListener listener) { this.mEraseStatusListener = listener; } /** * 擦除狀態(tài)監(jiān)聽器 */ public static interface EraseStatusListener { /** * 擦除進(jìn)度 * * @param percent 進(jìn)度值,大于0,小于等于100; */ public void onProgress(int percent); /** * 擦除完成回調(diào)函數(shù) * * @param view */ public void onCompleted(View view); }
我們來看看最終效果
到這里,一個(gè)完整的刮獎(jiǎng)效果自定義控件實(shí)現(xiàn)已經(jīng)完成。不過,這里還有一個(gè)問題需要拋給大家共同思考下,就是在判斷刮獎(jiǎng)是否完成的實(shí)現(xiàn)上,我在代碼中的實(shí)現(xiàn)方式會(huì)創(chuàng)建出大量的 int 數(shù)組,這樣造成后果就是會(huì)產(chǎn)生內(nèi)存抖動(dòng)。
目前,因?yàn)槲冶救艘矝]想到什么好方案,所以,大家如果有好的思路,一起交流。
總結(jié)
第一次寫自定義控件這類型的文章,不知道大家看明白實(shí)現(xiàn)思路了嗎?關(guān)于自定義控件,單看文章只能懂其中的思路,結(jié)合源代碼邊動(dòng)手實(shí)踐調(diào)試再加上文章會(huì)更深有體會(huì)。需要源代碼的童鞋可以到 https://github.com/D-clock/ScratchView 中下載,接下來還有很多關(guān)于自定義控件(動(dòng)畫)的文章想寫,敬請(qǐng)期待。
感謝作者的分享。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android 中按home鍵和跳轉(zhuǎn)到主界面的實(shí)例代碼
本文通過實(shí)例代碼給大家分享Android 中按home鍵和跳轉(zhuǎn)到主界面的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-04-04Android實(shí)現(xiàn)TextView顯示HTML加圖片的方法
這篇文章主要介紹了Android實(shí)現(xiàn)TextView顯示HTML加圖片的方法,結(jié)合實(shí)例形式分析了TextView控件顯示網(wǎng)絡(luò)圖片的相關(guān)操作技巧,需要的朋友可以參考下2016-07-07Android基于ListView實(shí)現(xiàn)類似Market分頁加載效果示例
這篇文章主要介紹了Android基于ListView實(shí)現(xiàn)類似Market分頁加載效果,結(jié)合完整實(shí)例形式分析了ListView的OnScroll方法來實(shí)現(xiàn)分頁與滾動(dòng)加載的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10詳解Android中Activity的啟動(dòng)模式及應(yīng)用場(chǎng)景
今天給大家介紹下安卓開發(fā)中不得不涉及的Activity啟動(dòng)模式及應(yīng)用場(chǎng)景,Activity一共有四種啟動(dòng)模式,分別是Standard模式、SingleTop模式、SingleTask模式以及SingleInstance模式,,需要的朋友可以參考下2023-09-09Android使用recyclerview打造真正的下拉刷新上拉加載效果
這篇文章先介紹如何使用這個(gè)recyclerview,WZMRecyclerview 是一個(gè)集成了 下拉刷新、上拉加載、滑到底部自動(dòng)加載、添加刪除頭尾部 四個(gè)主要功能的recyclerview,需要的朋友可以參考下2016-11-11詳解Android的Splash啟動(dòng)圖的兩種動(dòng)態(tài)切換方式
本篇文章主要介紹了詳解Android的Splash啟動(dòng)圖的兩種動(dòng)態(tài)切換方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06輕松實(shí)現(xiàn)Android語音識(shí)別功能
這篇文章主要為初學(xué)者介紹了輕松實(shí)現(xiàn)Android語音識(shí)別功能的代碼,感興趣的小伙伴們可以參考一下2016-07-07Flutter UI如何使用Provide實(shí)現(xiàn)主題切換詳解
這篇文章主要給大家介紹了關(guān)于Flutter UI如何使用Provide實(shí)現(xiàn)主題切換的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04android中實(shí)現(xiàn)在ImageView上隨意畫線涂鴉的方法
今天小編就為大家分享一篇android中實(shí)現(xiàn)在ImageView上隨意畫線涂鴉的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10Android 實(shí)現(xiàn)自動(dòng)打電話與發(fā)短信的實(shí)例
這篇文章主要介紹了Android 實(shí)現(xiàn)自動(dòng)打電話與發(fā)短信的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05