Android解锁项目

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还没做完，后续会继续完善，感谢大家的阅读，小萌后面仍会继续更新文章，希望讲到的知识能帮助到大家