android原生数字锁绘制

android原生数字锁

这个东西最主要的部分是数字键盘的绘制，需要在指定位置绘出0-9数字以及重置按钮和删除按钮，并在对应位置添加相应的点击响应事件，下面来看一下这个类的编写，它继承自view类：

private int screen_width = 0;// 屏幕的宽度
private float first_x = 0;// 绘制1的x坐标
private float first_y = 0;// 绘制1的y坐标
private float radius = 50f;//节点半径
private float space = 20f;//节点间隔偏移量
private int nodeNumberColor = Color.BLACK;//节点数字颜色
private int nodeCircleColor = Color.BLACK;//节点圆形轮廓颜色
private int nodeDownColor = Color.parseColor("#33000000");//节点按下时的颜色
private float[] xs = new float[3];//声明数组保存每一列的圆心横坐标
private float[] ys = new float[4];//声明数组保存每一排的圆心纵坐标
private float circle_x, circle_y;//点击处的圆心坐标
private int number = -1;//点击的数字
private OnNumberClick onNumberClick;//数字点击事件
/*
 * 判断刷新数据
 * -1 不进行数据刷新
 * 0  按下刷新
 * 1  弹起刷新
 */
private int type = -1;

这是一些必要的成员变量的定义，然后是初始化部分成员变量的值，这个屏幕宽度是相对的，可能这个锁控件你只需要它占屏幕的1/2，那么这个width就是1/2的屏幕宽：

/**
 * 初始化数据
 */
public void initData(int width) {
    if (width > 0) {
        // 获取屏幕的宽度
        screen_width = width;
    } else {
        screen_width = getSystemDisplay(getContext())[0];
    }

    // 获取绘制1的x坐标
    first_x = screen_width / 8 + space;
    // 获取绘制1的y坐标
    first_y = (getSystemDisplay(getContext())[1] - getSystemDisplay(getContext())[1] / 3) / 6;
    //添加每一排的横坐标
    xs[0] = screen_width / 2 - first_x + 10;
    xs[1] = screen_width / 2 + 10;
    xs[2] = screen_width / 2 + first_x + 10;
    //添加每一列的纵坐标
    ys[0] = 20 + first_y - 15;
    ys[1] = 20 + first_y + (first_x - 40) - 15;
    ys[2] = 20 + first_y + (first_x - 40) * 2 - 15;
    ys[3] = 20 + first_y + (first_x - 40) * 3 - 15;
}

接着是复写父类的onDraw方法进行键盘的绘制：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 创建画笔对象
    Paint paint = new Paint();
    paint.setAntiAlias(true);//设置抗锯齿
    paint.setColor(nodeNumberColor);// 设置画笔颜色
    paint.setTextSize(40);// 设置字体大小
    paint.setStrokeWidth(2.5f);
    // 绘制文本,注意是从坐标开始往上绘制
    // 这里较难的就是算坐标
    // 绘制第一排1,2,3
    canvas.drawText("1", screen_width / 2 - first_x, 20 + first_y, paint);
    canvas.drawText("2", screen_width / 2, 20 + first_y, paint);
    canvas.drawText("3", screen_width / 2 + first_x, 20 + first_y, paint);
    // 绘制第2排4,5,6
    canvas.drawText("4", screen_width / 2 - first_x, 20 + first_y + (first_x - 40), paint);
    canvas.drawText("5", screen_width / 2, 20 + first_y + (first_x - 40), paint);
    canvas.drawText("6", screen_width / 2 + first_x, 20 + first_y + (first_x - 40), paint);
    // 绘制第3排7,8,9
    canvas.drawText("7", screen_width / 2 - first_x, 20 + first_y + (first_x - 40) * 2, paint);
    canvas.drawText("8", screen_width / 2, 20 + first_y + (first_x - 40) * 2, paint);
    canvas.drawText("9", screen_width / 2 + first_x, 20 + first_y + (first_x - 40) * 2, paint);
    // 绘制第4排重置,0,删除
    canvas.drawText("R", screen_width / 2 - first_x, 20 + first_y + (first_x - 40) * 3, paint);
    canvas.drawText("0", screen_width / 2, 20 + first_y + (first_x - 40) * 3, paint);
    canvas.drawText("X", screen_width / 2 + first_x, 20 + first_y + (first_x - 40) * 3, paint);
    //为每一个数字绘制一个圆
    paint.setColor(nodeCircleColor);//设置画笔颜色
    //设置绘制空心圆
    paint.setStyle(Paint.Style.STROKE);
    //依次绘制第一排的圆
    canvas.drawCircle(screen_width / 2 - first_x + 10, 20 + first_y - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + 10, 20 + first_y - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + first_x + 10, 20 + first_y - 15, radius, paint);
    //依次绘制第2排的圆
    canvas.drawCircle(screen_width / 2 - first_x + 10, 20 + first_y + (first_x - 40) - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + 10, 20 + first_y + (first_x - 40) - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + first_x + 10, 20 + first_y + (first_x - 40) - 15, radius, paint);
    //依次绘制第3排的圆
    canvas.drawCircle(screen_width / 2 - first_x + 10, 20 + first_y + (first_x - 40) * 2 - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + 10, 20 + first_y + (first_x - 40) * 2 - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + first_x + 10, 20 + first_y + (first_x - 40) * 2 - 15, radius, paint);
    //依次绘制第4排的圆
    canvas.drawCircle(screen_width / 2 - first_x + 10, 20 + first_y + (first_x - 40) * 3 - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + 10, 20 + first_y + (first_x - 40) * 3 - 15, radius, paint);
    canvas.drawCircle(screen_width / 2 + first_x + 10, 20 + first_y + (first_x - 40) * 3 - 15, radius, paint);
    
    //判断是否点击数字(点击数字产生的渐变效果)
    if (circle_x > 0 && circle_y > 0) {
        if (type == 0) {//按下刷新
            paint.setColor(nodeDownColor);//设置画笔颜色
            paint.setStyle(Paint.Style.FILL_AND_STROKE);//按下的时候绘制实心圆
            canvas.drawCircle(circle_x, circle_y, radius, paint);//绘制圆
        } else if (type == 1) {//弹起刷新
            paint.setColor(nodeCircleColor);//设置画笔颜色
            paint.setStyle(Paint.Style.STROKE);//弹起的时候再绘制空心圆
            canvas.drawCircle(circle_x, circle_y, radius, paint);//绘制圆
            //绘制完成后,重置
            circle_x = 0;
            circle_y = 0;
        }
    }
}

绘制完成之后还需要设置点击事件获取点击时的坐标来判断点击的是哪一个点：

/**
 * 获取触摸点击事件
 */
@Override
public boolean onTouchEvent(MotionEvent event) {
    //事件判断
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN://按下
            //判断点击的坐标位置
            type = 0;
            float x = event.getX();//按下时的X坐标
            float y = event.getY();//按下时的Y坐标
            //判断点击的是哪一个数字圆
            handleDown(x, y);
            return true;
        case MotionEvent.ACTION_UP://弹起
            type = 1;//弹起刷新
            invalidate();//刷新界面
            //返回点击的数字
            if (onNumberClick != null && number != -1) {
                onNumberClick.onNumberReturn(number);
            }
            setDefault();//恢复默认
            //发送辅助事件
            sendAccessEvent("numeric keyboard up");
            return true;
        case MotionEvent.ACTION_CANCEL://取消
            //恢复默认值
            setDefault();
            return true;
    }
    return false;
}

获取到坐标值后就是进行对应点的判断以执行功能，具体的代码可参考：

https://download.csdn.net/download/qq_37159335/10851076