电子发烧友App
前言
我身边有一部分开发的小伙伴，存在着这样一种习惯。某一天，突然看到某一款 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 代码中设置刮层的颜色了。但是这时候，只是空有刮层，并没有实现刮开的效果，接下来继续添加实现代码。
工商网监
评论