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);
    }
};

}“`

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