前言
我身边有一部分开发的小伙伴，存在着这样一种习惯。某一天，突然看到某一款 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 代码中设置刮层的颜色了。但是这时候，只是空有刮层，并没有实现刮开的效果，接下来继续添加实现代码。
第二步：实现刮开效果。
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));//设置擦除效果
merasepaint.setstyle(paint.style.stroke);
merasepaint.setstrokecap(paint.cap.round);//设置笔尖形状，让绘制的边缘圆滑
seterasersize(merasesize);
merasepath = new path();
viewconfiguration viewconfiguration = viewconfiguration.get(getcontext());
mtouchslop = viewconfiguration.getscaledtouchslop();
}
/**
* 设置橡皮檫尺寸大小（默认大小是 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 ，并设置 merasepaint 的 xfermode 为 porterduff.mode.clear 用于后面制造出刮奖效果；
重写 ontouchevent 函数，处理触摸事件 action_down 、 action_move 、 action_up 等三种事件类型，并利用 merasepath 记录手指滑动轨迹，再用 mmaskcanvas 将滑动轨迹绘制到第一步生成的 mmaskbitmap 上 ，最后通过调用 invalidate() 引起 view 的重绘生成刮开效果；
为了防止滑动过于灵敏，我们需要对滑动做一个判断就是通过系统提供的 viewconfiguration.getscaledtouchslop() 获取系统认为的最小滑动距离，当等于或者超过这个距离时，才认为是在滑动，这就是为什么我在 erase() 要加 dx >= mtouchslop || dy >= mtouchslop 的判断；
为了控制刮痕的粗细，和前面设置刮层的颜色一样，同样为 scratchview 自定义一个属性 erasesize 实现在 xml 中控制。同时，在 java 代码中提供调用方法；
到此，一个基本的刮奖效果已经完成了，我们来看看实现效果如何。
以上两步仅仅完成基础效果而已了，接下来我们来做一些优化。
效果优化
第一步优化：添加水印
很多刮奖的效果都会有在刮层上添加自家 logo 做水印效果（这里不知道称为水印合适吗？反正就是大概那个意思）。如下面的支付宝一样
我们在基础实现的第一步中的创建刮层函数里面添加实现代码，同时也添加一个自定义属性和 set 方法可供调用：
/**
* 设置水印图标
*
* @param resid 图标资源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);
}
}
/**
* 创建蒙层
*
* @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);
}
}
实现效果如下：
当然，像效果上还有很多可以进行添加，例如还可以加上面支付宝的那种边缘锯齿效果等等，这里就各位童鞋自行脑洞实现啦。
第二步优化：添加相应事件监听器，以及完善一些常用函数。
说到事件监听，我想这里莫过于刮奖完成的事件了吧。对于使用这个控件的开发者，肯定需要在刮完之后做相应的操作，例如，提示用户中奖啦，还是继续努力之类的。怎么样判断刮奖完成呢？这里的实现思路是通过异步计算刮层 mmaskbitmap 中的像素信息值，通过算得透明像素个数占总像素个数的比例，当这个比例超过一定阈值的时候，我们认为刮奖完成了。为什么要说超过一定阈值就算完成，这和现实生活中刮奖一样，你不需要把刮层完全刮得干干净净才能得到结果。当然这个比例是多少，我们同样需要抽离成可动态设置的。再添加监听器接口和设置监听器的 api 即可。实现代码，大致如下：
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用于表示一行的像素个数有多少
float erasepixelcount = 0;//擦除的像素个数
float totalpixelcount = width * height;//总像素个数
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) {//标记擦除，并完成回调
miscompleted = true;
if (merasestatuslistener != null) {
merasestatuslistener.oncompleted(scratchview.this);
}
}
}
}.execute(width, height);
}
/**
* 设置擦除监听器
*
* @param listener
*/
public void seterasestatuslistener(erasestatuslistener listener) {
this.merasestatuslistener = listener;
}
/**
* 擦除状态监听器
*/
public static interface erasestatuslistener {
/**
* 擦除进度
*
* @param percent 进度值，大于0，小于等于100；
*/
public void onprogress(int percent);
/**
* 擦除完成回调函数
*
* @param view
*/
public void oncompleted(view view);
}
我们来看看最终效果
到这里，一个完整的刮奖效果自定义控件实现已经完成。不过，这里还有一个问题需要抛给大家共同思考下，就是在判断刮奖是否完成的实现上，我在代码中的实现方式会创建出大量的 int 数组，这样造成后果就是会产生内存抖动。
目前，因为我本人也没想到什么好方案，所以，大家如果有好的思路，一起交流。
总结
第一次写自定义控件这类型的文章，不知道大家看明白实现思路了吗？关于自定义控件，单看文章只能懂其中的思路，结合源代码边动手实践调试再加上文章会更深有体会。需要源代码的童鞋可以到 https://github.com/d-clock/scratchview 中下载，接下来还有很多关于自定义控件（动画）的文章想写，敬请期待。
感谢作者的分享。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
LongClick原理、上下文菜单原理、EditText长按弹窗原理、WebView长按弹窗自定义、修复WebView全选重复bug ———————————————— 版权声明：本文为CSDN博主「
JobScheduler 实现 特定时间，特定条件（系统空闲，电池电量，磁盘空间 ……）下执行任务
网友评论