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屏幕坐标系的同学请看下面的文章：
参考：
github下载地址：demo下载
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
如对本文有疑问， 点击进行留言回复！！
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）
android 常用布局文件（LinearLayout，RelativeLayout，FrameLayout，ConstraintLayout，TableLayout）
网友评论