自己动手做一个--手势解锁

手势解锁在Android手机上算是很普遍的了,在网上也有很多大牛做的很完美, 但还是想自己琢磨着做一遍~~

---

首先分析一下:
手势解锁其实就相当于 就是1~9的不同排列方式,根密码差不多,但不同的是,这个密码是数字不重复的,一个数字只能出现一次.

在这里我们暂且就把9个圆形编个号,就横向排列1~9号
分析过小米手势解锁的就会发现:
如图: 如果密码是1-7-4 ,事实上手从1绕过4滑到7上去时,事实上小米的手势解锁已经算作划过了4,出来的密码也就是 1-4-7了, 也就是说,这样的设置你永远都不可能划出1-7-4的密码出来

我实现的这个手势解锁没有要求不能出现这种1-7-4的这种密码,没有任何限制的这种,看了其他的一些APP或手机,大部分手势密码也都是没有这种限制的.

好了,既然手势密码分析得差不多了,就该想想怎么实现了~
首先准备好图片资源:
–这是按钮未选中时的样子:

–这是按钮已选中时的样子:

–这是密码输入错误时的样子:

然后写一个CheckBox的选择器:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true" android:state_checked="false" android:drawable="@drawable/btn_radio_off"></item>
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/btn_radio_on"></item>

    <item android:state_enabled="false" android:state_checked="false" android:drawable="@drawable/btn_radio_off"></item>
    <item android:state_enabled="false" android:state_checked="true" android:drawable="@drawable/btn_radio_error"></item>

</selector>

然后写一个9宫格解锁的那个布局,用RelativeLayout,大概样子就是:

现在看着是挺丑的哈..没关系,因为最终效果并不是这个样子啦,贴上代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <CheckBox 
        android:id="@+id/unlock_cb_0"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_1"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_centerHorizontal="true"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_2"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_alignParentRight="true"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_3"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_centerVertical="true"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_4"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_centerInParent="true"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_5"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_6"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_alignParentBottom="true"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_7"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        />
    <CheckBox 
        android:id="@+id/unlock_cb_8"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/radio_btn"
        android:button="@null"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        />

</RelativeLayout>

好了,到此为止好像还差很多啊,任重道远!!!
我先大概说说我的思路:

1.先自己写一个view继承自FrameLayout(其他的Layout也行)
2.然后再把刚才那个9宫格的布局加进去
3.拦截Touch事件
4.根据手指滑动的X,Y值计算出滑到哪个按钮了,然后做相应操作.

好了逻辑这个东西不是三言两语说的清楚的,直接上代码吧,我会在代码中尽量解释清楚:

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.CheckBox;
import android.widget.FrameLayout;

import com.yuc.common.R;
/**
 * YUC
 * @author Administrator
 *  2016 - 1 - 23
 */
public class UnlockView extends FrameLayout{

    private static String backgroundColor = "01000000";

    private int view_width;//整个空间宽度
    private int btn_width;//按钮宽度,直径
    private int view_height;
//  private ArrayList<int[]> btn_coord_list;
    private int[][] btn_coord;
    private List<CheckBox> checkBox_btns;

    /**
     * 密码
     */
    private List<Integer> password = new ArrayList<Integer>();
    private float x;//当前手指坐标
    private float y;

    private boolean isError = false;//当前密码是否正确
    private boolean isTouch = false;//是否正在操作

    /**
     * 正确密码. 
     *  为空时,当前模式为捕捉用户输入(用于设置手势)
     *  不为空,当前模式为验证密码模式(用于解锁验证)
     */
    private String rightPwd;
    private OnUnlockListener onUnlockListener;
    private OnGetPwdListener onGetPwdListener;

    public void setRightPwd(String rightPwd){
        this.rightPwd=rightPwd;
    }

    public void setOnUnlockListener(OnUnlockListener onUnlockListener) {
        this.onUnlockListener = onUnlockListener;
    }

    public void setOnGetPwdListener(OnGetPwdListener onGetPwdListener) {
        this.onGetPwdListener = onGetPwdListener;
    }

    /**
     * 验证模式下,密码验证监听
     * @author Administrator
     */
    public interface OnUnlockListener{
        void onSuccess();
        void onError();
    }
    /**
     * 捕捉用户输入模式下,密码获取监听
     * @author Administrator
     */
    public interface OnGetPwdListener{
        void onSetting(String pwd);
    }

    /**
     *  重置9宫格
     * @param context
     */
    Handler handler = new Handler(){
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
            case 1:
                if (!isTouch) {
                    reset();
                }
                break;
            }
        }

    };

    public UnlockView(Context context) {
        super(context);
        initView();
    }

    public UnlockView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public UnlockView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        //高度,和宽度一样,保证view是个正方形
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }

    /**
     * 初始化view
     */
    private void initView() {
        //将9宫格按钮的布局文件加载进来
        inflate(getContext(), R.layout.unlock_layout, this);
        setBackgroundColor(Color.parseColor(backgroundColor));

        CheckBox unlock_cb_0 = (CheckBox) findViewById(R.id.unlock_cb_0);
        CheckBox unlock_cb_1 = (CheckBox) findViewById(R.id.unlock_cb_1);
        CheckBox unlock_cb_2 = (CheckBox) findViewById(R.id.unlock_cb_2);
        CheckBox unlock_cb_3 = (CheckBox) findViewById(R.id.unlock_cb_3);
        CheckBox unlock_cb_4 = (CheckBox) findViewById(R.id.unlock_cb_4);
        CheckBox unlock_cb_5 = (CheckBox) findViewById(R.id.unlock_cb_5);
        CheckBox unlock_cb_6 = (CheckBox) findViewById(R.id.unlock_cb_6);
        CheckBox unlock_cb_7 = (CheckBox) findViewById(R.id.unlock_cb_7);
        CheckBox unlock_cb_8 = (CheckBox) findViewById(R.id.unlock_cb_8);

        checkBox_btns = new ArrayList<CheckBox>();
        checkBox_btns.add(unlock_cb_0);
        checkBox_btns.add(unlock_cb_1);
        checkBox_btns.add(unlock_cb_2);
        checkBox_btns.add(unlock_cb_3);
        checkBox_btns.add(unlock_cb_4);
        checkBox_btns.add(unlock_cb_5);
        checkBox_btns.add(unlock_cb_6);
        checkBox_btns.add(unlock_cb_7);
        checkBox_btns.add(unlock_cb_8);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //在这里获取按钮的尺寸,view的尺寸等
        view_width = getWidth();
        view_height = getHeight();
        View lock_btn = findViewById(R.id.unlock_cb_0);
        btn_width = lock_btn.getWidth();

        //计算各按钮中点坐标
        int[] btn1_coord = {btn_width/2,btn_width/2};
        int[] btn2_coord = {view_width/2,btn_width/2};
        int[] btn3_coord = {view_width-(btn_width/2),btn_width/2};
        int[] btn4_coord = {btn_width/2,view_height/2};
        int[] btn5_coord = {view_width/2,view_height/2};
        int[] btn6_coord = {view_width-(btn_width/2),view_height/2};
        int[] btn7_coord = {btn_width/2,view_height-(btn_width/2)};
        int[] btn8_coord = {view_width/2,view_height-(btn_width/2)};
        int[] btn9_coord = {view_width-(btn_width/2),view_height-(btn_width/2)};

        //保存到一个二维数组中
        btn_coord = new int[9][2];
        btn_coord[0][0] = btn1_coord[0];
        btn_coord[0][1] = btn1_coord[1];

        btn_coord[1][0] = btn2_coord[0];
        btn_coord[1][1] = btn2_coord[1];

        btn_coord[2][0] = btn3_coord[0];
        btn_coord[2][1] = btn3_coord[1];

        btn_coord[3][0] = btn4_coord[0];
        btn_coord[3][1] = btn4_coord[1];

        btn_coord[4][0] = btn5_coord[0];
        btn_coord[4][1] = btn5_coord[1];

        btn_coord[5][0] = btn6_coord[0];
        btn_coord[5][1] = btn6_coord[1];

        btn_coord[6][0] = btn7_coord[0];
        btn_coord[6][1] = btn7_coord[1];

        btn_coord[7][0] = btn8_coord[0];
        btn_coord[7][1] = btn8_coord[1];

        btn_coord[8][0] = btn9_coord[0];
        btn_coord[8][1] = btn9_coord[1];

        //拦截Touch事件
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //当 当前密码不为空时,说明用户正在绘制手势,现在就要把手势按钮中间的连线画出来
        if (password!=null) {
            Paint paint=new Paint();
            //按钮之间的连接画线
            if (isError) {
                //输入错误时线的颜色
                paint.setColor(Color.RED);
            }else{
                //正常输入时线的颜色
                paint.setColor(Color.YELLOW);
            }
            paint.setAlpha(125);
            paint.setStrokeWidth(10);
    //      canvas.drawLine(50, 50, 500, 500, paint);

            //绘制按钮间中间连线
            for (int i = 0; i < password.size(); i++) {
                if (i==password.size()-1) {
                    //最后一个,只有一个
                    if (x>0&&y>0) {
                        canvas.drawLine(btn_coord[password.get(i)-1][0], btn_coord[password.get(i)-1][1], x, y, paint);
                    }
                }else{
                    //不是第一个,也不是最后一个
                    canvas.drawLine(btn_coord[password.get(i)-1][0], btn_coord[password.get(i)-1][1], btn_coord[password.get(i+1)-1][0], btn_coord[password.get(i+1)-1][1], paint);
                }
            }
        }


        super.onDraw(canvas);

    }

    /**
     * 在这里控制9个checkbox的选中状态
     */
    @Override
    public boolean onTouchEvent(MotionEvent e) {
//      Log.e("yuc", "X:"+e.getX());

        switch (e.getAction()) {
        case MotionEvent.ACTION_DOWN:
            //手指按下,重置一下9宫格
            isTouch=true;
            reset();
            break;
        case MotionEvent.ACTION_MOVE:

            x = e.getX();
            y = e.getY();

            //判断当前位置是否处于某个按钮之中
            for (int i = 0; i < btn_coord.length; i++) {
                float dx=x-btn_coord[i][0];
                float dy=y-btn_coord[i][1];

                if ((dx*dx)+(dy*dy)<=((btn_width*btn_width)/2)) {
//                  Log.e("yuc", "选中:"+(i+1));
                    if (!password.contains(i+1)) {
                        password.add(i+1);
                        checkBox_btns.get(i).setChecked(true);
                    }
                }
            }

            break;
        case MotionEvent.ACTION_UP:
            isTouch=false;
            x=0;
            y=0;
            StringBuffer sb = new StringBuffer("");
            for (Integer i : password) {
                sb.append(i);
            }
            //正确密码为空则不判断
            if (TextUtils.isEmpty(rightPwd)) {
                reset();
                if (onGetPwdListener!=null) {
                    onGetPwdListener.onSetting(sb.toString());
                }
            }else{
                //错误后,变红
                if (sb.toString().equals(rightPwd)) {
                    isError=false;
                }else{
                    isError=true;
                }

                if (!isError) {
                    if (onUnlockListener!=null) {
                        onUnlockListener.onSuccess();
                    }
                }else{
                    if (onUnlockListener!=null) {
                        onUnlockListener.onError();
                    }
                }

                for (CheckBox checkBox : checkBox_btns) {
                    checkBox.setEnabled(false);
                }
//          Toast.makeText(getContext(), "密码:"+password, 0).show();
                if (isError) {
                    Message msg=new Message();
                    msg.what=1;
                    handler.sendMessageDelayed(msg, 600);
                }else{
                    reset();
                }
            }

            break;
        }

        invalidate();

        return true;
    }

    private void reset() {
        //重置
        if (password.size()>0) {
            password.clear();
            isError=false;
            for (CheckBox cb : checkBox_btns) {
                cb.setEnabled(true);
                cb.setChecked(false);
            }
            invalidate();
        }
    }

}

好了,现在自定义控件做好了,是骡子是马拉出来溜溜吧:
在你想要添加手势控件的地方添加进来:

注意:这里的高度设置是没用的,因为在代码里已经控制高度和宽度一样
<com.yuc.common.view.UnlockView
        android:id="@+id/unlock"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        />

Activity里面设置相应监听:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        unlock = (UnlockView) findViewById(R.id.unlock);
        et = (EditText) findViewById(R.id.et);

        //设置验证密码时的监听
        unlock.setOnUnlockListener(new OnUnlockListener() {

            @Override
            public void onSuccess() {
                Toast.makeText(MainActivity.this, "密码正确", 0).show();
            }
            @Override
            public void onError() {
                Toast.makeText(MainActivity.this, "密码错误", 0).show();
            }
        });
        //设置捕捉密码时的监听
        unlock.setOnGetPwdListener(new OnGetPwdListener() {

            @Override
            public void onSetting(String pwd) {
                Toast.makeText(MainActivity.this, "密码:"+pwd, 0).show();
            }
        });
    }

运行起来看看效果吧:
我把正确密码设置为14789,画一个147896的图案,提升失败

附上源码地址:
https://github.com/yuchong123/GestureLock