1.滑动解锁代码流程图：
流程图
图片资源：https://pan.baidu.com/s/1tkcw0tdxV78mnwHqOtcAGg
提取码：2xsq
2.代码：
xml文件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/root_layout">
<!--背景图片-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/main_bg"
tools:layout_editor_absoluteX="66dp"
tools:layout_editor_absoluteY="632dp"
/>
<!--添加用于放九个点的图片-->
<ImageView
android:id="@+id/opView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/op_bg"
android:layout_centerInParent="true"
/>
<!--提示框-->
<TextView
android:id="@+id/tv_alert"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="图案解锁"
android:textSize="20sp"
android:textColor="#ffffff"
android:textAlignment="center"
android:layout_alignTop="@id/opView"
android:layout_marginTop="90dp"
/>
</RelativeLayout>
界面效果图
MainActivity 文件：
public class MainActivity extends AppCompatActivity{
//定义⼀个数组 保存每个点的控件
ArrayList<ImageView> dotsList;
ArrayList<Integer> lineTagsList;
ArrayList<ImageView> selectedList;
int tag;
//保存上⼀次被点亮的点的对象
ImageView lastSelectedDot;
//记录滑动的密码
StringBuilder password;
//保存原始密码
String orgPassword;
//保存第⼀次输⼊的密码
String firstPassword;
//提示的⽂本视图
TextView alertTextView;
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
//判断是否已经显示
if (hasFocus){
//获取容器
RelativeLayout rl = findViewById(R.id.root_layout);
//获取背景视图
ImageView iv = findViewById(R.id.opView);
//获取x 和 y坐标
int x = iv.getLeft();
int y = iv.getTop();
//获取屏幕密度
float scale = getResources().getDisplayMetrics().density;
//创建横线 6条
//12 23
//45 56
//78 89
tag = 12;
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 2; j++) {
//创建⼀个视图⽤于显示线
ImageView lineView = new ImageView(this);
lineView.setBackgroundResource(R.drawable.normal_highlight1);
lineView.setVisibility(View.INVISIBLE);
lineView.setTag(tag);
lineTagsList.add(tag);//保存线的tag值
tag += 11; //同⼀⾏相差11
//创建布局参数
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int)(x + 46.6*scale) + (int)(99*scale*j);
params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);
rl.addView(lineView, params);
}
//换⼀⾏ 相差22
tag += 11;
}
//创建竖线 4条
//14 25 36
//47 58 69
tag = 14;
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 3; j++) {
//创建⼀个视图⽤于显示线
ImageView lineView = new ImageView(this);
lineView.setBackgroundResource(R.drawable.normal_highlight2);
lineView.setVisibility(View.INVISIBLE);
lineView.setTag(tag);
lineTagsList.add(tag);//保存线的tag值
tag += 11;
//创建布局参数
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int)(x + 42*scale) + (int)(99*scale*j);
params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);
rl.addView(lineView, params);
}
}
//创建斜线
//左斜
// 24 35
// 57 68
// 右斜
// 15 26
// 48 59
tag = 24;
int rTag = 15;
for (int i = 0; i < 2; i++) {
for (int j = 0; j < 2; j++) {
//创建⼀个视图⽤于显示线
ImageView rLineView = new ImageView(this);
rLineView.setTag(rTag);
lineTagsList.add(rTag);//保存线的tag值
rTag += 11;
//设置图⽚
rLineView.setBackgroundResource(R.drawable.normal_highlight3);
//创建布局参数
rLineView.setVisibility(View.INVISIBLE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int)(x + 42*scale) + (int)(99*scale*j);
params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);
rl.addView(rLineView, params);
ImageView lLineView = new ImageView(this);
lLineView.setTag(tag);
lineTagsList.add(tag);//保存线的tag值
tag += 11;
lLineView.setVisibility(View.INVISIBLE);
lLineView.setBackgroundResource(R.drawable.normal_highlight4);
params.leftMargin = (int)(x + 53.3*scale) + (int)(99*scale*j);
params.topMargin = (int)(y + 170*scale) + (int)(99*scale*i);
rl.addView(lLineView,params);
}
tag += 11;
rTag += 11;
}
//创建9个点
tag = 1;
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
//创建⽤于显示点的视图
ImageView dotView = new ImageView(this);;
//设置对应的tag值
dotView.setTag(tag);
tag++;
//隐藏视图
dotView.setVisibility(View.INVISIBLE);
//显示对应的图⽚
dotView.setBackgroundResource(R.drawable.selected_dot);
//创建控件的尺⼨
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = (int)(x + 35.33*scale) + (int)(98.66*scale*j);
params.topMargin = (int)(y + 162*scale) + (int)(98.66*scale*i);
//将控件添加到容器中
rl.addView(dotView, params);
//将这个控件添加到数组
dotsList.add(dotView);
}
}
}
}
//监听触摸事件
@Override
public boolean onTouchEvent(MotionEvent event) {
//获取事件的类型
int action = event.getAction();
ImageView selected;
float x;
float y;
//判断是什么事件
switch (action){
case MotionEvent.ACTION_DOWN:
//按下
//获取触摸点的坐标
x = event.getX();
y = event.getY();
//判断x y是不是在某个点的范围内
selected = dotOfTouch(x, y);
if (selected != null) {
//点亮
selected.setVisibility(View.VISIBLE);
//记录当前这个点
lastSelectedDot = selected;
//将tag值拼接到密码中
password.append(selected.getTag());
//将点亮的点添加到数组中
selectedList.add(selected);
}
break;
case MotionEvent.ACTION_MOVE:
//移动
//获取触摸点的坐标
x = event.getX();
y = event.getY();
//判断x y是不是在某个点的范围内
selected = dotOfTouch(x, y);
if (selected != null) {
//判断这个点是不是第⼀个点
if (lastSelectedDot == null){
//第⼀个点
selected.setVisibility(View.VISIBLE);
//记录
lastSelectedDot = selected;
//将tag值拼接到密码中
password.append(selected.getTag());
//将点亮的点添加到数组中
selectedList.add(selected);
} else{
//不是第⼀个点
//获取上⼀个点和当前点的tag
int lTag = (Integer) lastSelectedDot.getTag();
int cTag = (Integer) selected.getTag();
//获取两个线的tag值 small * 10 + big
int lineTag = lTag > cTag ? cTag*10+lTag: lTag*10+cTag;
//判断这条线是否存在
if (lineTagsList.contains(lineTag)){
//线存在
//点亮点
selected.setVisibility(View.VISIBLE);
//将tag值拼接到密码中
password.append(selected.getTag());
//点亮这条线
//获取容器对象
RelativeLayout rl = findViewById(R.id.root_layout);
//通过tag查找⼦控件
ImageView iv = rl.findViewWithTag(lineTag);
//点亮线
iv.setVisibility(View.VISIBLE);
//记录这个点
lastSelectedDot = selected;
//将点亮的点添加到数组中
selectedList.add(selected);
//将点亮的线添加到数组中
selectedList.add(iv);
}
}
}
break;
case MotionEvent.ACTION_UP:
//离开
// 1.绘制密码 和原始密码⽐较
// 2.设置密码 第⼀次
// 3.设置密码 第⼆次
if (orgPassword != null){
//有密码了
if (password.toString().equals(orgPassword)){
alertTextView.setText("解锁密码成功");
} else{
alertTextView.setText("解锁密码失败");
}
} else{
//设置密码
//判断是第⼀次还是第⼆次确认密码
if (firstPassword == null){
//设置密码的第⼀次
firstPassword = password.toString();
//提示确认密码
alertTextView.setText("请确认密码图案");
} else{
//第⼆次确认密码
//判断两次是否⼀致
if (firstPassword.equals(password.toString())){
//设置成功
alertTextView.setText("设置密码成功");
//保存密码
SharedPreferences sp = getSharedPreferences("password",0);
SharedPreferences.Editor editor = sp.edit();
editor.putString("pwd",firstPassword);
editor.commit();
} else{
//设置失败
alertTextView.setText("两次密码不⼀致 请重新设置");
firstPassword = null;
}
}
}
clean();
break;
default:
break;
}
return true;
}
//清空
public void clean(){
password.setLength(0);
//隐藏所有选中的视图 点 线
for (ImageView iv:selectedList){
iv.setVisibility(View.INVISIBLE);
}
//清空数组
selectedList.clear();
}
//写⼀个⽅法 处理 判断触摸点是否在某个控件内部
public ImageView dotOfTouch(float x, float y){
//计算状态栏或者标题栏的距离
//遍历数组
for (ImageView dot:dotsList){
//获取这个dot相对于屏幕的x y
int[] loc = new int[2];
dot.getLocationOnScreen(loc);
int dx = loc[0];
int dy = loc[1];
//获取右边的偏移量
int r = dx + dot.getWidth();
//获取最底部的偏移量
int b = dy + dot.getHeight();
//判断这个点是否在这个范围内
if ((x <= r && x >= dx) &&
(y <= b && y >= dy)){
return dot;
}
}
return null;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//准备好数组 实例化对象
dotsList = new ArrayList<>();
lineTagsList = new ArrayList<>();
password = new StringBuilder();
selectedList = new ArrayList<>();
//获取xml的⽂本控件
alertTextView = findViewById(R.id.tv_alert);
//查找偏好设置⾥⾯是否有保存的密码pwd
SharedPreferences sp = getSharedPreferences("password",MODE_PRIVATE);
//获取pwd对应密码
orgPassword = sp.getString("pwd",null);
if (orgPassword == null){
alertTextView.setText("请设置密码图案");
}else{
alertTextView.setText("请绘制密码图案");
}
}
@Override
protected void onResume() {
super.onResume();
Point p = new Point();
getWindowManager().getDefaultDisplay().getSize(p);
float w = p.x;
float h = p.y;
if (w > h){
System.out.println("横屏");
} else{
System.out.println("竖屏");
}
}
}
注意：按照1-9的顺序给9个点添加tag值。在创建横线、竖线和斜线时，给它们添加两位数的tag值（每条线连接两个点，两个点的tag值小的数组成线tag值的两位，大的组成tag值的个位数）。手指在两个点间滑动时，两个点的tag值组成一个两位数（两个点小的tag值组成十位，大的组成个位），遍历所有的线的tag值，判断是否有与这个两位数相同的tag值，有则点亮该线。
网友评论