创建手势密码

设置手势密码，看大神弄的，我自己也跟着学了一遍，还是不太懂，但依然分享给大家

大家看代码吧！

1、mainactivity：

package com.wangy.wiperswitch;

import android.app.Instrumentation;
import android.content.Intent;
import android.content.SharedPreferences;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn_gesture;
    private String password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }
    private  void init(){
        btn_gesture = (Button)findViewById(R.id.btn_gesture);
        btn_gesture.setOnClickListener(MainActivity.this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_gesture:{
                Intent intent=new Intent(MainActivity.this,GestureSetingActivity.class);
                startActivityForResult(intent,RESULT_OK);
//                finish();
                break;
            }
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode==RESULT_OK){
            if (data!=null){
                Bundle bundle = data.getExtras();
                if (bundle!=null){
                    Boolean isOk=bundle.getBoolean("isOk");
                    if (isOk){
                        password = bundle.getString("password");
                    }else {
                        Toast.makeText(MainActivity.this,"您两次输入的手势密码不相同，设置失败！",Toast.LENGTH_SHORT).show();
                    }
                }
            }
        }
    }
}

mainactivi布局：

<?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"
   >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="#ffffff"
        android:layout_marginTop="10dp">

        <Button
            android:id="@+id/btn_gesture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:text="设置手势密码"
            android:textColor="#333333"
            android:textSize="16sp" />

    </RelativeLayout>

</RelativeLayout>

2点击进入设置密码界面GestureSetingActivity

package com.wangy.wiperswitch;

import android.content.Context;
import android.content.Intent;
import android.gesture.Gesture;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.util.AttributeSet;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.Toast;

import com.wangy.wiperswitch.Custom.Drawl;
import com.wangy.wiperswitch.Custom.GestureView;
import com.wangy.wiperswitch.R;
import com.wangy.wiperswitch.utils.SharepreferenceUtil;

/**
 * Created by xhb on 2016/9/13.
 */
public class GestureSetingActivity extends AppCompatActivity {

    private FrameLayout boby_layout;
    private String pass;
    private GestureView content;
    private int time=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gesture_setting_layout);
        init();
    }
    protected void init(){
        pass = "";
        boby_layout = (FrameLayout)findViewById(R.id.body_layout);
        WindowManager m = getWindowManager();
        Display d = m.getDefaultDisplay();
        content = new GestureView(this, pass, d.getWidth(), new Drawl.GestureCallBack() {
            @Override
            public void checkedSuccess(String s) {
                if (s.length()<3){
                    Toast.makeText(GestureSetingActivity.this,"手势密码最少是3个！",Toast.LENGTH_SHORT).show();
                }else {
                    if (time==0){
                        Toast.makeText(GestureSetingActivity.this,"请再输入一次！",Toast.LENGTH_SHORT).show();
                        time++;
                        pass=s;//将第一次输入的密码与第二次输入的密码比较是否一致
                         }else {
                        if (pass.equals(s)){
                            Toast.makeText(GestureSetingActivity.this,"设置成功！手势密码为："+s,Toast.LENGTH_SHORT).show();
                            Bundle bundle = new Bundle();
                            bundle.putBoolean("isOk",true);
                            bundle.putString("password", s);
                            Intent intent = new Intent();
                            intent.putExtras(bundle);
                            setResult(RESULT_OK, intent);
                            SharepreferenceUtil.setstring(GestureSetingActivity.this,"pass",s);
                            finish();
                        }else {
                            Bundle bundle = new Bundle();
                            bundle.putBoolean("isOk", false);
                            Intent intent = new Intent();
                            intent.putExtras(bundle);
                            setResult(RESULT_OK, intent);
                            finish();
                        }
                    }
                }
            }

            @Override
            public void checkedFail() {
                Toast.makeText(GestureSetingActivity.this,"校验失败！",Toast.LENGTH_SHORT).show();
            }
        });

        //设置手势解锁显示到哪个布局里面
        content.setParentView(boby_layout);
    }
}

GestureSetingActivity布局

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

    <FrameLayout
        android:id="@+id/body_layout"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        >
    </FrameLayout>
</LinearLayout>

3、2中设计到了一个非常重要的自定义控件GestureView，这是手势密码特别重要的view，接下来看代码吧！

package com.wangy.wiperswitch.Custom;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.wangy.wiperswitch.R;
import com.wangy.wiperswitch.utils.ScreenUtils;

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

/**
 * Created by xhb on 2016/9/14.
 */
public class GestureView extends ViewGroup{

    private int baseNum = 6;

    private int[] screenDispaly;

    private int d;
    /**
     * 声明一个集合用来封装坐标集合
     */
    private List<Point> list;
    private Context context;
    private Drawl drawl;

    /**
     * 包含9个ImageView的容器，初始化
     * @param context
     * @param passWord 用户传入密码
     * @param callBack 手势绘制完毕的回调
     */
    public GestureView(Context context, String passWord, float width, Drawl.GestureCallBack callBack) {
        super(context);
        screenDispaly = ScreenUtils.getScreenDispaly(context);
        d = screenDispaly[0]/3;
        this.list = new ArrayList<Point>();
        this.context = context;
        // 添加9个图标
        addChild();
        // 初始化一个可以画线的view
        drawl = new Drawl(context, list,passWord,width,callBack);
    }

    private void addChild(){
        for (int i = 0; i < 9; i++) {
            ImageView image = new ImageView(context);
            image.setBackgroundResource(R.drawable.lock_pattern_node_normal);
            this.addView(image);

            // 第几行
            int row = i / 3;
            // 第几列
            int col = i % 3;

            // 定义点的每个属性
            int leftX = col*d+d/baseNum;
            int topY = row*d+d/baseNum;
            int rightX = col*d+d-d/baseNum;
            int bottomY = row*d+d-d/baseNum;

            Point p = new Point(leftX, rightX, topY, bottomY, image,i+1);

            this.list.add(p);
        }
    }


    public void setParentView(ViewGroup parent){
        // 得到屏幕的宽度
        int width = screenDispaly[0];
        LayoutParams layoutParams = new LayoutParams(width, width);

        this.setLayoutParams(layoutParams);
        drawl.setLayoutParams(layoutParams);

        parent.addView(drawl);
        parent.addView(this);

    }


    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int i = 0; i < getChildCount(); i++) {
            //第几行
            int row = i/3;
            //第几列
            int col = i%3;
            View v = getChildAt(i);
            v.layout(col*d+d/baseNum, row*d+d/baseNum+50, col*d+d-d/baseNum, row*d+d-d/baseNum+50);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        for (int i = 0; i < getChildCount(); i++) {
            View v = getChildAt(i);
            v.measure(widthMeasureSpec, heightMeasureSpec);
        }
    }

}

这里面也有个非常重要的Drawl（用来初始化一个可以画线的view），还有自定义笔Point

Drawl：

package com.wangy.wiperswitch.Custom;

/**
 * Created by xhb on 2016/9/14.
 */

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.util.Pair;
import android.view.MotionEvent;
import android.view.View;

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

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff;
import android.util.Pair;
import android.view.MotionEvent;
import android.view.View;

import com.wangy.wiperswitch.utils.StringUtils;

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


/**
 *
 * @author wangy
 *
 */
public  class Drawl extends View {
    private int mov_x;// 声明起点坐标
    private int mov_y;
    private Paint paint;// 声明画笔
    private Canvas canvas;// 画布
    private Bitmap bitmap;// 位图

    private List<Point> list;// 装有各个view坐标的集合
    private List<Pair<Point, Point>> lineList;// 记录画过的线

    /**
     * 手指当前在哪个Point内
     */
    private Point currentPoint;
    /**
     * 用户绘图的回调
     */
    private GestureCallBack callBack;

    /**
     * 用户当前绘制的图形密码
     */
    private StringBuilder passWordSb;

    /**
     * 用户传入的passWord
     */
    private String passWord;

    public Drawl(Context context, List<Point> list, String passWord, float width, GestureCallBack callBack) {
        super(context);
        paint = new Paint(Paint.DITHER_FLAG);// 创建一个画笔
        bitmap = Bitmap.createBitmap((int)width, 800, Bitmap.Config.ARGB_8888); // 设置位图的宽高
        canvas = new Canvas();
        canvas.setBitmap(bitmap);

        paint.setStyle(Paint.Style.STROKE);// 设置非填充
        paint.setStrokeWidth(10);// 笔宽5像素
        paint.setColor(Color.parseColor("#ffffff"));// 设置颜色
        paint.setAntiAlias(true);// 不显示锯齿

        this.list = list;
        this.lineList = new ArrayList<Pair<Point, Point>>();
        this.callBack = callBack;

        //初始化密码缓存
        this.passWordSb = new StringBuilder();
        this.passWord = passWord;
    }

    // 画位图
    @Override
    protected void onDraw(Canvas canvas) {
        // super.onDraw(canvas);
        canvas.drawBitmap(bitmap, 0, 0, null);
    }

    // 触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:

                mov_x = (int) event.getX();
                mov_y = (int) event.getY();

                // 判断当前点击的位置是处于哪个点之内
                currentPoint = getPointAt(mov_x, mov_y);
                if (currentPoint != null) {
                    currentPoint.setHighLighted(true);
                    passWordSb.append(currentPoint.getNum());
                }
                // canvas.drawPoint(mov_x, mov_y, paint);// 画点
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                clearScreenAndDrawList();

                // 得到当前移动位置是处于哪个点内
                Point pointAt = getPointAt((int) event.getX(), (int) event.getY());
                //代表当前用户手指处于点与点之前
                if(currentPoint==null && pointAt == null){
                    return true;
                }else{//代表用户的手指移动到了点上
                    if(currentPoint == null){//先判断当前的point是不是为null
                        //如果为空，那么把手指移动到的点赋值给currentPoint
                        currentPoint = pointAt;
                        //把currentPoint这个点设置选中为true;
                        currentPoint.setHighLighted(true);
                        passWordSb.append(currentPoint.getNum());
                    }
                }

                if (pointAt == null || currentPoint.equals(pointAt)
                        || pointAt.isHighLighted()) {
                    // 点击移动区域不在圆的区域 或者
                    // 如果当前点击的点与当前移动到的点的位置相同
                    // 那么以当前的点中心为起点，以手指移动位置为终点画线
                    canvas.drawLine(currentPoint.getCenterX(),
                            currentPoint.getCenterY()+50, event.getX(), event.getY()+50,
                            paint);// 画线
                } else {
                    // 如果当前点击的点与当前移动到的点的位置不同
                    // 那么以前前点的中心为起点，以手移动到的点的位置画线
                    canvas.drawLine(currentPoint.getCenterX(),
                            currentPoint.getCenterY()+50, pointAt.getCenterX(),
                            pointAt.getCenterY()+50, paint);// 画线

                    pointAt.setHighLighted(true);

                    Pair<Point, Point> pair = new Pair<Point, Point>(currentPoint,
                            pointAt);
                    lineList.add(pair);

                    // 赋值当前的point;
                    currentPoint = pointAt;
                    passWordSb.append(currentPoint.getNum());
                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:// 当手指抬起的时候
                // 清掉屏幕上所有的线，只画上集合里面保存的线
                if(StringUtils.isEmpty(passWord)){
                    callBack.checkedSuccess(passWordSb.toString());
                }else{
                    if(passWord.equals(passWordSb.toString())){
                        //代表用户绘制的密码手势与传入的密码相同
                        callBack.checkedSuccess(passWordSb.toString());
                    }else{
                        //用户绘制的密码与传入的密码不同。
                        callBack.checkedFail();
                    }
                }

                //重置passWordSb
                passWordSb = new StringBuilder();
                //清空保存点的集合
                lineList.clear();
                //重新绘制界面
                clearScreenAndDrawList();
                for (Point p : list) {
                    p.setHighLighted(false);
                }
                invalidate();
                break;
            default:
                break;
        }
        return true;
    }

    /**
     * 通过点的位置去集合里面查找这个点是包含在哪个Point里面的
     *
     * @param x
     * @param y
     * @return 如果没有找到，则返回null，代表用户当前移动的地方属于点与点之间
     */
    private Point getPointAt(int x, int y) {

        for (Point point : list) {
            // 先判断x
            int leftX = point.getLeftX();
            int rightX = point.getRightX();
            if (!(x >= leftX && x < rightX)) {
                // 如果为假，则跳到下一个对比
                continue;
            }

            int topY = point.getTopY();
            int bottomY = point.getBottomY();
            if (!(y >= topY && y < bottomY)) {
                // 如果为假，则跳到下一个对比
                continue;
            }

            // 如果执行到这，那么说明当前点击的点的位置在遍历到点的位置这个地方
            return point;
        }

        return null;
    }

    /**
     * 清掉屏幕上所有的线，然后画出集合里面的线
     */
    private void clearScreenAndDrawList() {
        canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
        for (Pair<Point, Point> pair : lineList) {
            canvas.drawLine(pair.first.getCenterX(), pair.first.getCenterY()+50,
                    pair.second.getCenterX(), pair.second.getCenterY()+50, paint);// 画线
        }
    }

    public interface GestureCallBack{

        /**
         * 代表用户绘制的密码与传入的密码相同
         */
        void checkedSuccess(String s);
        /**
         * 代表用户绘制的密码与传入的密码不相同
         */
        void checkedFail();
    }

}

Point：

package com.wangy.wiperswitch.Custom;

import android.widget.ImageView;

import com.wangy.wiperswitch.R;

/**
 * Created by xhb on 2016/9/14.
 */
    public class Point {
        /**
         * 左边x的值
         */
        private int leftX;
        /**
         * 右边x的值
         */
        private int rightX;
        /**
         * 上边y的值
         */
        private int topY;
        /**
         * 下边y的值
         */
        private int bottomY;
        /**
         * 这个点对应的ImageView控件
         */
        private ImageView image;

        /**
         * 中心x值
         */
        private int centerX;

        /**
         * 中心y值
         */
        private int centerY;

        /**
         * 是否是高亮(划过)
         */
        private boolean highLighted;

        /**
         * 代表这个Point对象代表的数字，从1开始(直接感觉从1开始)
         */
        private int num;

        public Point(int leftX, int rightX, int topY, int bottomY, ImageView image, int num) {
            super();
            this.leftX = leftX;
            this.rightX = rightX;
            this.topY = topY;
            this.bottomY = bottomY;
            this.image = image;

            this.centerX = (leftX + rightX) / 2;
            this.centerY = (topY + bottomY) / 2;

            this.num = num;
        }

        public int getLeftX() {
            return leftX;
        }

        public void setLeftX(int leftX) {
            this.leftX = leftX;
        }

        public int getRightX() {
            return rightX;
        }

        public void setRightX(int rightX) {
            this.rightX = rightX;
        }

        public int getTopY() {
            return topY;
        }

        public void setTopY(int topY) {
            this.topY = topY;
        }

        public int getBottomY() {
            return bottomY;
        }

        public void setBottomY(int bottomY) {
            this.bottomY = bottomY;
        }

        public ImageView getImage() {
            return image;
        }

        public void setImage(ImageView image) {
            this.image = image;
        }

        public int getCenterX() {
            return centerX;
        }

        public void setCenterX(int centerX) {
            this.centerX = centerX;
        }

        public int getCenterY() {
            return centerY;
        }

        public void setCenterY(int centerY) {
            this.centerY = centerY;
        }

        public boolean isHighLighted() {
            return highLighted;
        }

        public void setHighLighted(boolean highLighted) {
            this.highLighted = highLighted;
            if (highLighted) {
                this.image.setBackgroundResource(R.drawable.lock_pattern_node_pressed);
            } else {
                this.image.setBackgroundResource(R.drawable.lock_pattern_node_normal);
            }
        }

        public int getNum() {
            return num;
        }

        public void setNum(int num) {
            this.num = num;
        }

        @Override
        public int hashCode() {
            final int prime = 31;
            int result = 1;
            result = prime * result + bottomY;
            result = prime * result + ((image == null) ? 0 : image.hashCode());
            result = prime * result + leftX;
            result = prime * result + rightX;
            result = prime * result + topY;
            return result;
        }

        @Override
        public boolean equals(Object obj) {
            if (this == obj)
                return true;
            if (obj == null)
                return false;
            if (getClass() != obj.getClass())
                return false;
            Point other = (Point) obj;
            if (bottomY != other.bottomY)
                return false;
            if (image == null) {
                if (other.image != null)
                    return false;
            } else if (!image.equals(other.image))
                return false;
            if (leftX != other.leftX)
                return false;
            if (rightX != other.rightX)
                return false;
            return topY == other.topY;
        }

        @Override
        public String toString() {
            return "Point [leftX=" + leftX + ", rightX=" + rightX + ", topY="
                    + topY + ", bottomY=" + bottomY + "]";
        }
    }

4、这就完成了，不过其中需要用到一些工具类我都奉上啦！

ScreenUtils：获取手机屏幕的高度和宽度

public class ScreenUtils {
    @SuppressWarnings("deprecation")
    public static int[] getScreenDispaly(Context context){
        WindowManager wm=(WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
        int width=wm.getDefaultDisplay().getWidth();//手机屏幕的宽度
        int height=wm.getDefaultDisplay().getHeight();//手机屏幕的高度
        int result[] = {width,height};
        return result;

    }
}

SharepreferenceUtil：本地记录密码，一般用于登录

package com.wangy.wiperswitch.utils;

import android.content.Context;
import android.content.SharedPreferences;

/**
 * Created by xhb on 2016/9/18.
 */
public class SharepreferenceUtil {
        private static final String   name="cogi";
        public static  boolean getboolean(Context con,String key,boolean defaultValues){
            SharedPreferences sp=con.getSharedPreferences(name
                    ,Context.MODE_PRIVATE);
            return sp.getBoolean(key, defaultValues);
        }

        public static void putboolean(Context con,String key,boolean values){
            SharedPreferences sp=con.getSharedPreferences(name,Context.MODE_PRIVATE);
            sp.edit().putBoolean(key, values).commit();
        }

        public static  String getstring(Context con,String key,String defaultValues){
            SharedPreferences sp=con.getSharedPreferences(name
                    ,Context.MODE_PRIVATE);
            return sp.getString(key, defaultValues);
        }

        public static void setstring(Context con,String key,String values){
            SharedPreferences sp=con.getSharedPreferences(name,Context.MODE_PRIVATE);
            sp.edit().putString(key, values).commit();
        }
    }

StringUtils：字符串常用的

public class StringUtils {
        public StringUtils() {
        }

        public static boolean isEmpty(String str) {
            return str == null || str.length() == 0;
        }

        public static boolean equals(String str1, String str2) {
            return str1 == null?str2 == null:str1.equals(str2);
        }

        public static boolean equalsIgnoreCase(String str1, String str2) {
            return str1 == null?str2 == null:str1.equalsIgnoreCase(str2);
        }

        public static boolean gbk(String str) {
            int count = 0;
            String regEx = "[\u4e00-\u9fa5]";
            Pattern p = Pattern.compile(regEx);
            Matcher m = p.matcher(str);

            while(m.find()) {
                for(int i = 0; i <= m.groupCount(); ++i) {
                    ++count;
                }
            }

            if(count > 0) {
                return true;
            } else {
                return false;
            }
        }
    

图片也打包送上了背景图就不放了，随大家了

看看效果图吧！