1001727.jpg
前言：
小萌(你没看错，就是长了草的小明)今天呢要带给大家的是滑动解锁demo的实现，很炫酷，很简单，写得不好的地方，请见谅~
概述：
- 环境：Android Studio 3.42
- 语言：Java
- 特点：简单，易懂，效果爆炸
展示：
image.png
开始：
布局
<?xml version="1.0" encoding="utf-8"?>
<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/rl_container">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg"
android:scaleType="center"/>
</RelativeLayout>
代码
MainActivity
- 创建圆点
//添加9个圆点
private void initCircles(int res,int visible){
//获取图片
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),res);
//设置圆点与屏幕的左间距
float pd = dip2x(40);
//获取屏幕宽度和高度
Point point = new Point();
getWindowManager().getDefaultDisplay().getSize(point);
//获取圆点之间的间距
float space = (point.x-pd*2-bitmap.getWidth())/2;
//确定第一个点的x,y坐标
float x = pd;
float y = point.y/2- - bitmap.getHeight()-space;
for(int i=0;i<3;i++){
for(int j=0;j<3;j++){
//设置布局属性的方法
createCircles(res,(int)(x+space*j),(int)(y+i*space), visible);
}
}
int tag=1;
//设置Tag值，用来表示密码
for(ImageView iv:normal){
iv.setTag(tag);
tag++;
}
}
- 设置圆点的布局属性
private void createCircles(int res,int left,int top,int visible){
ImageView iv = new ImageView(this);
//设置背景
iv.setBackgroundResource(res);
//图片是否可见
iv.setVisibility(visible);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
lp.leftMargin = left;
lp.topMargin = top;
rl.addView(iv,lp);
//判断res是正常状态还是选中状态
if(res == R.drawable.normal){
normal.add(iv);
}
if(res==R.drawable.selected){
dotsView.add(iv);
}
}
- 获取屏幕分辨率
//获取屏幕分辨率，设置大小实现不同设备的显示效果一致
private float dip2x(int size){
return getResources().getDisplayMetrics().density*size;
}
DrawView
- 触摸事件记录路径和密码
//触摸事件保存绘制的路径
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y =event.getY();
ImageView dot;
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
dot = outOfCircle(x,y);
if(dot!=null){
dot.setVisibility(VISIBLE);
selected.add(dot);
//设置起始点
start = new Point((int)( dot.getPivotX()+dot.getX()),(int) (dot.getPivotY()+dot.getY()));
//密码拼接
pwd.append(dot.getTag());
}
break;
case MotionEvent.ACTION_MOVE:
dot = outOfCircle(x,y);
//画圆点之间的线
if(dot==null) {
end = new Point((int)x,(int)y);
//刷新
}else {
//判断是否是第一个点
if (start == null) {
dot.setVisibility(VISIBLE);
//设置起始点
start = new Point((int) (dot.getPivotX() + dot.getX()), (int) (dot.getPivotY() + dot.getY()));
} else {
dot.setVisibility(VISIBLE);
//记录路径
Path path = new Path();
path.moveTo(start.x, start.y);
path.lineTo((int) (dot.getPivotX() + dot.getX()), (int) (dot.getPivotY() + dot.getY()));
paths.add(path);
//重新设置起始点
start = new Point((int) (dot.getPivotX() + dot.getX()), (int) (dot.getPivotY() + dot.getY()));
end = start;
//刷新重绘
invalidate();
}
pwd.append(dot.getTag());
selected.add(dot);
}
break;
case MotionEvent.ACTION_UP:
//判断是否第一次滑动
if(password == null){
//第一次滑动，显示标题设置密码
password = pwd.toString();
}
else{
//验证密码
if(password.equals(pwd.toString())){
//密码输入正确
}
else{
//密码输入错误
paint.setColor(Color.RED);
invalidate();
}
}
clear();
}
return true;
}
- 绘制路径
//onDraw方法实现具体绘制功能
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (paths.size()>0){
for(Path path:paths){
canvas.drawPath(path,paint);
}
}
}
- 判断触摸点是否在圆内
//判断触摸的是否在圆内
private ImageView outOfCircle(float x,float y){
for(ImageView dot:dotsView)
{
float px = dot.getX();
float py =dot.getY();
if((x>=px&&x<=px+dot.getWidth())&&(y>=py&&y<=py+dot.getHeight())){
return dot;
}
}
return null;
}
}
- 初始化画笔
//初始化画笔
private void initPaint(){
//设置抗锯齿
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//设置画笔颜色
paint.setColor(Color.MAGENTA);
//画笔宽度
paint.setStrokeWidth(20);
//设置描边
paint.setStyle(Paint.Style.STROKE);
}
总结：这个demo主要用到今天和以前学过的知识，包括绘画和布局，当然自己对布局仍然不够熟悉，但是做的项目多了，也慢慢找到感觉了，然后呢这个 demo还没做完，后续会继续完善，感谢大家的阅读，小萌后面仍会继续更新文章，希望讲到的知识能帮助到大家
网友评论