Android自定义View——实现屏幕触摸校验效果

今天是星期天的晚上，意味着周末结束了，赶紧调整一下状态，回到工作中来。

今天开始，我用两天的时间，来实现一个Android屏幕触摸校验的功能，其实代码不多，我是利用这次机会，尝试发表系列的博客。很多人都接触过屏幕触摸校验的功能，实质是：点击开始校验，然后就会出现一个点，然后点击那个点，就完成了个校验，然后连续重复几次，一整个校验过程就结束了。

今天开始第一阶段的开发：实现随机出现触摸点。

效果图如下：



这个是点击后的效果。

新建一个类，取名为TouchScreen，然后继承View，重载三个构造方法。

先看看这个阶段用到的变量：

private Paint mPaint;
// 坐标
private float x = 0, y = 0;
// 半径
private float radius = 0;
// 透明度
private float alpha = 0;
// 总宽度
private float mWidth;
// 透明度的最大值
private float MAX_ALPHA = 255;
// 装载x坐标
private List<Float> pointX;
// 装载y坐标
private List<Float> pointY;
// 角标
private int position = 0;

不是很多，重点看到这两个集合，我是这样给它赋值的：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
for (int i = 0; i < 9; i++) {
Random random = new Random();
float x = random.nextInt((int) (w * 0.9))
% ((int) (w * 0.9) - (int) (w * 0.1) + 1) + (int) (w * 0.1);
pointX.add(x);

float y = random.nextInt((int) (h * 0.9))
% ((int) (h * 0.9) - (int) (h * 0.1) + 1) + (int) (h * 0.1);
pointY.add(y);

mWidth = w;
}
}

有一个for循环，然后走9次，就是生成了九个随机的点。

接着看到下面的，我是想要点击一个地方，然后出现一个点，这个点，就是刚刚随机生成的点，代码如下：

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (position < 9) {
x = pointX.get(position);
y = pointY.get(position);
position++;
radius = 0;
alpha = MAX_ALPHA;
handler.sendEmptyMessage(0);
}

break;

default:
break;
}
return true;
}

这里是给触摸事件按下事件进行处理，当按下的时候，就生成一个点，这里暂时不生成自己的点，这个是后期来做的，

然后下面是一个刷新和更新点的大小的方法，具体代码如下：

private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
refreshState();

invalidate();

if (alpha != 0) {
// 如果透明度没有到0，则继续刷新，否則停止刷新
handler.sendEmptyMessageDelayed(0, 50);
}
};

private void refreshState() {
radius += 5;
alpha -= 10;
if (alpha < 0) {
alpha = 0;
}
// System.out.println(alpha= + alpha);
mWidth = radius / 4;

mPaint.setAlpha((int) alpha);
mPaint.setStrokeWidth(mWidth);
}
};

这里面我们是动态的设置透明度和半径，就是透明度消失的时候，半径就是最大的。

在ondraw（）方法里进行一个绘制那个点的效果：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(x, y, radius, mPaint);
}

以上就是全部过程，下面贴上全部的代码：

“`

public class TouchScreen extends View {

private Paint mPaint;
// 坐标
private float x = 0, y = 0;
// 半径
private float radius = 0;
// 透明度
private float alpha = 0;
// 总宽度
private float mWidth;
// 透明度的最大值
private float MAX_ALPHA = 255;
// 装载x坐标
private List<Float> pointX;
// 装载y坐标
private List<Float> pointY;
// 角标
private int position = 0;

public TouchScreen(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initView();
}

public TouchScreen(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}

public TouchScreen(Context context) {
super(context);
initView();
}

private void initView() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.GREEN);
mPaint.setStyle(Style.STROKE);

pointX = new ArrayList<Float>();
pointY = new ArrayList<Float>();

}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
for (int i = 0; i < 9; i++) {
Random random = new Random();
float x = random.nextInt((int) (w * 0.9))
% ((int) (w * 0.9) - (int) (w * 0.1) + 1) + (int) (w * 0.1);
pointX.add(x);

float y = random.nextInt((int) (h * 0.9))
% ((int) (h * 0.9) - (int) (h * 0.1) + 1) + (int) (h * 0.1);
pointY.add(y);

mWidth = w;
}
}

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (position < 9) {
x = pointX.get(position);
y = pointY.get(position);
position++;
radius = 0;
alpha = MAX_ALPHA;
handler.sendEmptyMessage(0);
}

break;

default:
break;
}
return true;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(x, y, radius, mPaint);
}

private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
refreshState();

invalidate();

if (alpha != 0) {
// 如果透明度没有到0，则继续刷新，否則停止刷新
handler.sendEmptyMessageDelayed(0, 50);
}
};

private void refreshState() {
radius += 5;
alpha -= 10;
if (alpha < 0) {
alpha = 0;
}
// System.out.println(alpha= + alpha);
mWidth = radius / 4;

mPaint.setAlpha((int) alpha);
mPaint.setStrokeWidth(mWidth);
}
};

}“`

第一阶段的代码不会很多，只是实现随机出现点的效果，明天的这个时候，我就开始出现校验，欢迎大家关注。