1001727.jpg

前言：

小萌(你沒看錯，就是長了草的小明)今天呢要帶給大家的是滑動解鎖demo的實現(xiàn)，很炫酷，很簡單，寫得不好的地方，請見諒~

概述：

• 環(huán)境：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

• 創(chuàng)建圓點

//添加9個圓點
    private void initCircles(int res,int visible){

        //獲取圖片
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),res);
        //設(shè)置圓點與屏幕的左間距
        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++){

                //設(shè)置布局屬性的方法
                createCircles(res,(int)(x+space*j),(int)(y+i*space), visible);
            }

        }
 int tag=1;
        //設(shè)置Tag值，用來表示密碼
        for(ImageView iv:normal){
            iv.setTag(tag);
            tag++;
        }

    }

• 設(shè)置圓點的布局屬性

 private void createCircles(int res,int left,int top,int visible){

        ImageView iv = new ImageView(this);
        //設(shè)置背景
        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是正常狀態(tài)還是選中狀態(tài)
        if(res == R.drawable.normal){
            normal.add(iv);
        }
        if(res==R.drawable.selected){
            dotsView.add(iv);
        }
    }

• 獲取屏幕分辨率

//獲取屏幕分辨率，設(shè)置大小實現(xiàn)不同設(shè)備的顯示效果一致
    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);
                    //設(shè)置起始點
                    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);
                        //設(shè)置起始點
                        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);
                        //重新設(shè)置起始點
                        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){
                    //第一次滑動，顯示標題設(shè)置密碼
                    password = pwd.toString();
                }
                else{
                    //驗證密碼
                    if(password.equals(pwd.toString())){
                        //密碼輸入正確
                    }
                    else{
                        //密碼輸入錯誤
                        paint.setColor(Color.RED);
                        invalidate();
                    }
                }
                 clear();
                }

        return true;
    }

• 繪制路徑

    //onDraw方法實現(xiàn)具體繪制功能
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (paths.size()>0){
            for(Path path:paths){
                canvas.drawPath(path,paint);
            }
        }
    }

• 判斷觸摸點是否在圓內(nèi)

 //判斷觸摸的是否在圓內(nèi)
    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(){
        //設(shè)置抗鋸齒
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //設(shè)置畫筆顏色
        paint.setColor(Color.MAGENTA);
        //畫筆寬度
        paint.setStrokeWidth(20);
        //設(shè)置描邊
        paint.setStyle(Paint.Style.STROKE);
    }

總結(jié)：這個demo主要用到今天和以前學(xué)過的知識，包括繪畫和布局，當然自己對布局仍然不夠熟悉，但是做的項目多了，也慢慢找到感覺了，然后呢這個 demo還沒做完，后續(xù)會繼續(xù)完善，感謝大家的閱讀，小萌后面仍會繼續(xù)更新文章，希望講到的知識能幫助到大家