首页 > 系统 > Android > 正文

Android APP数字解锁实例详解

2019-12-12 04:50:32
字体:
来源:转载
供稿:网友

Android APP数字上锁

最近抽时间做了下数字解锁的功能,手机有数字解锁,App也可以做到,避免某些应用隐私泄漏,一下就是实现效果图:

序言:这两天老大给了个任务,说是做一个仿ios的数字锁屏界面,心想着这种东西网上应该有挺多的,然后就先百度了一把,谁知道案例好像少的可怜,然后带着怀疑的心态去下载了千辛万苦找到的“源码”,看里面写的,然后自己有点眉目了,就自己借着“源码”的思路自己实现了一把,见上图。

思路:

这里我们可以看成两部分,一部分是上面的输入的,另一部分是底部的按键。
先来看上面那部分,我们可以看成是TextView,然后响应下面按键的动作。下面这部分,图中的每个按钮都需要自己画出来,难点就是根据第一个按键的坐标(第一个坐标我们初始化)算出每个按键的坐标,然后根据手指的触摸屏事件来判断点击的是哪个按键

接下来我们来看核心代码:

输入框部分:

public class PasswordTextView extends TextView{ private final String sing = "*";//密文显示的内容 private String content = "";//显示的内容 //文本改变事件回调接口 private OnTextChangedListener onTextChangedListener; /**  * Handler线程对象,用来更新密码框的显示内容  * 实现将输入的内容显示为密文  */ private Handler handler = new Handler(){  public void handleMessage(android.os.Message msg) {   //密文显示   PasswordTextView.this.setText(sing);   //回调改变事件接口   if(onTextChangedListener != null){    onTextChangedListener.textChanged(content);   }  }; }; /**  * 构造方法  * @param context  * @param attrs  */ public PasswordTextView(Context context, AttributeSet attrs) {  super(context, attrs); } /**  * 设置文本改变事件监听  * @param onTextChangedListener  */ public void setOnTextChangedListener(OnTextChangedListener onTextChangedListener){  this.onTextChangedListener = onTextChangedListener; } /**  * 设置密码框显示的内容  * @param text  */ public void setTextContent(String text){  //获得输入的内容  this.content = text;  if(!TextUtils.isEmpty(text)){   handler.sendEmptyMessage(0);//向Handler发送消息  }else{   this.setText("");  } } /**  * 获取显示的内容  * @return  */ public String getTextContent(){  return content; } /**  * 文本改变事件接口  */ public interface OnTextChangedListener{  /**   * 密码框文本改变时调用   * @param content   */  public void textChanged(String content); }}

下面按键部分

public class NumericK eyboard extends View { private int screen_width = 0;// 屏幕的宽度 private float first_x = 0;// 绘制1的x坐标 private float first_y = 0;// 绘制1的y坐标 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; /**  * 构造方法  *  * @param context  */ public NumericKeyboard(Context context) {  super(context);  initData(context);// 初始化数据 } public NumericKeyboard(Context context, AttributeSet attrs) {  super(context, attrs);  initData(context);// 初始化数据 } /**  * 设置数字点击事件  *  * @param onNumberClick  */ public void setOnNumberClick(OnNumberClick onNumberClick) {  this.onNumberClick = onNumberClick; } // 初始化数据 private void initData(Context context) {  // 获取屏幕的宽度  screen_width = SystemUtils.getSystemDisplay(context)[0];  // 获取绘制1的x坐标  first_x = screen_width / 4;  // 获取绘制1的y坐标  first_y = (SystemUtils.getSystemDisplay(context)[1] - SystemUtils.getSystemDisplay(context)[1] / 3) / 4;  //添加每一排的横坐标  xs[0] = first_x + 10;  xs[1] = first_x * 2 + 10;  xs[2] = first_x * 3 + 10;  //添加每一列的纵坐标  ys[0] = 40 + first_y - 15;  ys[1] = 40 + first_y + first_x - 15;  ys[2] = 40 + first_y + first_x * 2 - 15;  ys[3] = 40 + first_y + first_x * 3 - 15; } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  // 创建画笔对象  Paint paint = new Paint();  paint.setColor(Color.BLACK);// 设置画笔颜色  paint.setTextSize(40);// 设置字体大小  paint.setStrokeWidth(2);  // 绘制文本,注意是从坐标开始往上绘制  // 这里较难的就是算坐标  // 绘制第一排1,2,3  canvas.drawText("1", first_x, 40 + first_y, paint);  canvas.drawText("2", first_x * 2, 40 + first_y, paint);  canvas.drawText("3", first_x * 3, 40 + first_y, paint);  // 绘制第2排4,5,6  canvas.drawText("4", first_x, 40 + first_y + first_x, paint);  canvas.drawText("5", first_x * 2, 40 + first_y + first_x, paint);  canvas.drawText("6", first_x * 3, 40 + first_y + first_x, paint);  // 绘制第3排7,8,9  canvas.drawText("7", first_x, 40 + first_y + first_x * 2, paint);  canvas.drawText("8", first_x * 2, 40 + first_y + first_x * 2, paint);  canvas.drawText("9", first_x * 3, 40 + first_y + first_x * 2, paint);  // 绘制第4排0  canvas.drawText("0", first_x * 2, 40 + first_y + first_x * 3, paint);  //为每一个数字绘制一个圆  paint.setColor(Color.WHITE);//设置画笔颜色  paint.setAntiAlias(true);//设置抗锯齿  //设置绘制空心圆  paint.setStyle(Paint.Style.STROKE);  //依次绘制第一排的圆  canvas.drawCircle(first_x + 10, 40 + first_y - 15, 70, paint);  canvas.drawCircle(first_x * 2 + 10, 40 + first_y - 15, 70, paint);  canvas.drawCircle(first_x * 3 + 10, 40 + first_y - 15, 70, paint);  //依次绘制第2排的圆  canvas.drawCircle(first_x + 10, 40 + first_y + first_x - 15, 70, paint);  canvas.drawCircle(first_x * 2 + 10, 40 + first_y + first_x - 15, 70, paint);  canvas.drawCircle(first_x * 3 + 10, 40 + first_y + first_x - 15, 70, paint);  //依次绘制第3排的圆  canvas.drawCircle(first_x + 10, 40 + first_y + first_x * 2 - 15, 70, paint);  canvas.drawCircle(first_x * 2 + 10, 40 + first_y + first_x * 2 - 15, 70, paint);  canvas.drawCircle(first_x * 3 + 10, 40 + first_y + first_x * 2 - 15, 70, paint);  //绘制最后一个圆  canvas.drawCircle(first_x * 2 + 10, 40 + first_y + first_x * 3 - 15, 70, paint);  //判断是否点击数字(点击数字产生的渐变效果)  if (circle_x > 0 && circle_y > 0) {   if (type == 0) {//按下刷新    paint.setColor(Color.WHITE);//设置画笔颜色    paint.setStyle(Paint.Style.FILL_AND_STROKE);//按下的时候绘制实心圆    canvas.drawCircle(circle_x, circle_y, 70, paint);//绘制圆   } else if (type == 1) {//弹起刷新    paint.setColor(Color.WHITE);//设置画笔颜色    paint.setStyle(Paint.Style.STROKE);//弹起的时候再绘制空心圆    canvas.drawCircle(circle_x, circle_y, 70, paint);//绘制圆    //绘制完成后,重置    circle_x = 0;    circle_y = 0;   }  } } /**  * 获取触摸点击事件  */ @Override public boolean onTouchEvent(MotionEvent event) {  //事件判断  switch (event.getAction()) {   case MotionEvent.ACTION_DOWN://按下    //判断点击的坐标位置    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(R.string.numeric_keyboard_up);    return true;   case MotionEvent.ACTION_CANCEL://取消    //恢复默认值    setDefault();    return true;  }  return false; } /*  * 恢复默认值  */ private void setDefault() {  circle_x = 0;  circle_y = 0;  type = -1;  number = -1;  sendAccessEvent(R.string.numeric_keyboard_cancel); } /*  * 设置辅助功能描述  */ private void sendAccessEvent(int resId) {  //设置描述  setContentDescription(getContext().getString(resId));  //发送辅助事件  sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED);  setContentDescription(null); } /*  * 判断点击的是哪一个数字圆  */ private void handleDown(float x, float y) {  //判断点击的是那一列的数据  if (xs[0] - 70 <= x && x <= xs[0] + 70) {//第一列   //获取点击处的圆心横坐标   circle_x = xs[0];   //判断点击的是哪一排   if (ys[0] - 70 <= y && ys[0] + 70 >= y) {//第1排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[0];    number = 1;//设置点击的数字   } else if (ys[1] - 70 <= y && ys[1] + 70 >= y) {//第2排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[1];    number = 4;//设置点击的数字   } else if (ys[2] - 70 <= y && ys[2] + 70 >= y) {//第3排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[2];    number = 7;//设置点击的数字   }  } else if (xs[1] - 70 <= x && x <= xs[1] + 70) {//第2列   //获取点击处的圆心横坐标   circle_x = xs[1];   //判断点击的是哪一排   if (ys[0] - 70 <= y && ys[0] + 70 >= y) {//第1排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[0];    number = 2;//设置点击的数字   } else if (ys[1] - 70 <= y && ys[1] + 70 >= y) {//第2排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[1];    number = 5;//设置点击的数字   } else if (ys[2] - 70 <= y && ys[2] + 70 >= y) {//第3排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[2];    number = 8;//设置点击的数字   } else if (ys[3] - 70 <= y && ys[3] + 70 >= y) {//第4排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[3];    number = 0;//设置点击的数字   }  } else if (xs[2] - 70 <= x && x <= xs[2] + 70) {//第3列   //获取点击处的圆心横坐标   circle_x = xs[2];   //判断点击的是哪一排   if (ys[0] - 70 <= y && ys[0] + 70 >= y) {//第1排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[0];    number = 3;//设置点击的数字   } else if (ys[1] - 70 <= y && ys[1] + 70 >= y) {//第2排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[1];    number = 6;//设置点击的数字   } else if (ys[2] - 70 <= y && ys[2] + 70 >= y) {//第3排    //获取点击的数字圆的圆心纵坐标    circle_y = ys[2];    number = 9;//设置点击的数字   }  }  sendAccessEvent(R.string.numeric_keyboard_down);  type = 0;//按下刷新  //绘制点击时的背景圆  invalidate(); } /**  * 数字点击事件  */ public interface OnNumberClick {  /**   * 返回点击的数字   *   * @param number   */  public void onNumberReturn(int number); }}

上面说了,难点在于计算按键的位置,在这里我是根据我下载的demo里面的计算方式相应的修改了,如果不明白android屏幕坐标系的同学请看下面的文章:

参考:

android坐标系详解

Github下载地址:DEMO下载

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表