ScratchView：一步步打造万能的 Android 刮奖效果控件
Hello，你们好，我是Clock。这周为你们带来一篇关于自定义控件的文章，这也是我本人第一次写关于自定义控件的文章，但愿能够写得言简意赅，通熟易懂点。php
前言
我身边有一部分开发的小伙伴，存在着这样一种习惯。某一天，忽然看到某一款 App 上有个很漂亮的自定义控件（动画）效果，就会绞尽脑子想办法去本身实现一发。固然，我本身也是属于这类型的骚年，看到某种效果就会手痒难耐琢磨着实现套路。我的以为这是一种需求驱动进步的方法，当你绞尽脑子去实现本身想要的效果时，你就会发现你对 Android 自定义控件（动画）的知识体系认识越深，长此以往，本身也能轻松的造出各类控件（动画）效果。要是哪天，产品童鞋拿着个原型（或者对着某款 App ）跟你讲：“XXXX，你看这个效果咱们能不能实现？”，而后你瞥了一眼，成竹在胸丢回一句：“开玩笑，还有我实现不了的效果？”。想一想内心是否是有点小激动？好了，差很少要说回正题了，这是我第一篇关于自定义控件的文章，以也会陆续穿插更新此类型的文章，但愿你们可以喜欢。（偷偷剧透下，我下篇文章是关于性能优化的干货。固然我本身以为很干货，但愿到时候发出来不要打脸，哈哈哈！）java
实现效果
说了这么多，仍是先给你们看看最终的实现效果先android
上面只是基本实现效果的一部分，你会看到下方还有不少其余控件，它们是用来干吗的，接下来即将为你揭晓一切。git
基本实现
平常生活中，咱们对刮奖效果想必不会陌生，其原理就是经过在原有图案和文字上添加刮层来实现的。若是咱们想看到刮层后面藏的图案和文字是什么，势必要经过刮开刮层才行。知道了这样的套路，就能够开始整理一下编码实现思路，而后愉快开干。github
我一开始的实现思路是想经过重写 ImageView 和 TextView ，而后在分别用代码在图像和文字上添加图层，这样的话就能实现出效果了。然而回头一想，不对，这种实现存在的局限性比较大。若是照这种思路实现，那么刮层下面只能存在图片或者文字，若是产品经理要求同时存在图片和文字呢？要求存在两张图片呢？要求同时存在图片和文字，且文字放在图片的上（下、左、右）呢？...咱们都知道，世界上最善变的除了妹纸的心，就是产品经理和他们的需求了。因而，便想出另一种实现思路，直接继承 View 来实现一个刮层，让这个刮层和图片以及文字不产生任何依赖，再结合 FrameLayout 将刮层放置最上一层，刮层之下你想放多少图片文字，图片文字要怎么布局摆放都行。到此，思路明确，能够愉快的开始编码了。canvas
第一步：绘制出刮层效果。数组
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 代码中设置刮层的颜色了。可是这时候，只是空有刮层，并无实现刮开的效果，接下来继续添加实现代码。ide
第二步：实现刮开效果。
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 数组，这样形成后果就是会产生内存抖动。
目前，由于我本人也没想到什么好方案，因此，你们若是有好的思路，不妨在下方留言赐教一下。
总结
第一次写自定义控件这类型的文章，不知道你们看明白实现思路了吗？关于自定义控件，单看文章只能懂其中的思路，结合源代码边动手实践调试再加上文章会更深有体会。须要源代码的童鞋能够到 github.com/D-clock/Scr… 中下载，接下来还有不少关于自定义控件（动画）的文章想写，敬请期待。
- 1. Android刮刮乐效果
- 2. 刮奖效果
- 3. canvas实现刮刮奖效果
- 4. android PorterDuffXfermode -------刮刮卡效果
- 5. Android刮刮乐效果-proterDuffXfermode
- 6. cocos2d实现刮奖效果
- 7. HTML5 Canvas实战之刮奖效果
- 8. 刮刮乐效果
- 9. Android自定义View—刮刮卡效果
- 10. 一步一步教你打造一个Numeric TextBox控件
- 更多相关文章...
- • SVG 模糊效果 - SVG 教程
- • MyBatis与Spring的整合步骤 - MyBatis教程
- • SpringBoot中properties文件不能自动提示解决方法
- • IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known