android自定义控件手势密码

现在很多app都用到一种安全机制，手势密码，特别是银行相关的app，虽然他也并不是那么安全，但是就是喜欢用。今天来看一个简单而炫酷的手势密码锁，废话不多说，上图上代码。

看图说话，想怎么定义就怎么定义，使用起来就是这么任性。。。

箭头可以随手指任意旋转，这就是我要的效果

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="count" format="integer" />
    <attr name="outerNorColor" format="color" />
    <attr name="innerNorColor" format="color" />
    <attr name="outerPressColor" format="color" />
    <attr name="innerPressColor" format="color" />
    <attr name="outerUpColor" format="color" />
    <attr name="innerUpColor" format="color" />
    <attr name="mlineColor" format="color" />
    <declare-styleable name="LockViewGroup">
        <attr name="count" />
        <attr name="outerNorColor" />
        <attr name="innerNorColor" />
        <attr name="outerPressColor" />
        <attr name="innerPressColor" />
        <attr name="outerUpColor" />
        <attr name="innerUpColor" />
        <attr name="mlineColor" />
    </declare-styleable>

</resources>

将用到的属性定义出来，供用户自己选择定义。

package com.example.apple.Custom;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by apple on 17/9/16.
 */

public class LockItem extends View {

    final String TAG = this.getClass().getSimpleName();

    private Mode states = Mode.NOR;
    private int width, hight;
    private int outerCircleWidth = 2, outerCircleRadius, innerCircleRadius, centerXY;

    //paint
    private Paint mouerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);//去锯齿
    private Paint minnerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    //color
    private int outerNorColor, innerNorColor;
    private int outerPressColor, innerPressColor;
    private int outerUpColor, innerUpColor;

    //Arrow
    private int mArrowline;
    private Path mArrowPath = new Path();
    private int angle = -1000;//角度，这里值给大点，不然可能有问题

    enum Mode {NOR, PRESS, UP}

    public LockItem(Context context) {
        this(context, null);
    }

    public LockItem(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LockItem(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public LockItem(Context context, int outerNorColor, int innerNorColor, int outerPressColor, int innerPressColor, int outerUpColor, int innerUpColor) {
        this(context);
        this.outerNorColor = outerNorColor;
        this.innerNorColor = innerNorColor;
        this.outerPressColor = outerPressColor;
        this.innerPressColor = innerPressColor;
        this.outerUpColor = outerUpColor;
        this.innerUpColor = innerUpColor;
    }

    public int getCenterXY() {
        return centerXY;
    }


    private void init() {
        mouerCirclePaint.setColor(outerNorColor);
        mouerCirclePaint.setStyle(Paint.Style.STROKE);//空心画笔
        mouerCirclePaint.setStrokeWidth(outerCircleWidth);
        minnerCirclePaint.setStyle(Paint.Style.FILL);//实心
        minnerCirclePaint.setColor(innerNorColor);
        mArrowPath.reset();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int wsize = MeasureSpec.getSize(widthMeasureSpec);
        int hsize = MeasureSpec.getSize(heightMeasureSpec);
        width = hight = Math.min(wsize, hsize);
        centerXY = width / 2;
        outerCircleRadius = (width - 2) / 2;
        innerCircleRadius = width / 6;
        setMeasuredDimension(width, hight);
        mArrowPath.reset();
        mArrowline = (int) (width * 1.0 / 2 * 0.3);
        //指引三角形箭头
        mArrowPath.moveTo(width / 2 - mArrowline, centerXY - innerCircleRadius - 4);
        mArrowPath.lineTo(width / 2 + mArrowline, centerXY - innerCircleRadius - 4);
        mArrowPath.lineTo(width / 2, (outerCircleRadius - innerCircleRadius) / 3);
        mArrowPath.close();
    }

    public LockItem setMode(Mode mode) {
        states = mode;
        return this;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (states == Mode.NOR) {
            mouerCirclePaint.setColor(outerNorColor);
            minnerCirclePaint.setColor(innerNorColor);
        } else if (states == Mode.PRESS) {
            mouerCirclePaint.setColor(outerPressColor);
            minnerCirclePaint.setColor(innerPressColor);
        } else if (states == Mode.UP) {
            mouerCirclePaint.setColor(outerUpColor);
            minnerCirclePaint.setColor(innerUpColor);
        }

        canvas.drawCircle(centerXY, centerXY, outerCircleRadius, mouerCirclePaint);
        canvas.drawCircle(centerXY, centerXY, innerCircleRadius, minnerCirclePaint);
        if (angle != -1000) {
            canvas.rotate(angle, centerXY, centerXY);
            canvas.drawPath(mArrowPath, mouerCirclePaint);
        }
    }

    public LockItem setAngle(int angle) {
        this.angle = angle;
        return this;
    }


}

LockItem里面定义了枚举状态，根据用户的手指触摸事件修改状态，来控制view的绘制颜色。里面还定义了一个三角箭头，看效果图能看出效果，根据手势去控制箭头的方向，这个是难点，箭头看起来简单，控制起来却不是那么简单，哎，又少了几根头发。。。

package com.example.apple.Custom;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Toast;

import com.example.apple.pullzoom.R;

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

/**
 * Created by apple on 17/9/16.
 */

public class LockViewGroup extends ViewGroup {

    final String TAG = this.getClass().getSimpleName();

    //密码元素的宽高
    private int lockItemWidth;
    //元素的个数
    private int count = 3;
    //装item容器
    private LockItem[] lockItems;
    //每一个item的间隔
    private int spacingWidth;
    private int width, hight;
    private List<Integer> selectLockViews = new ArrayList<>();
    private Integer[] pwd = new Integer[]{1, 4, 7, 8, 9};

    private int donwx, downy, scaledTouchSlop;
    //color
    private int outerNorColor = Color.RED, innerNorColor = Color.RED;
    private int outerPressColor = Color.BLUE, innerPressColor = Color.BLUE;
    private int outerUpColor = Color.YELLOW, innerUpColor = Color.YELLOW;
    private int mlineColor = Color.BLACK;

    private Paint mlinePait = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Path mlinePath = new Path();

    private int tempx, tempy;
    private LockItem lastView;
    private int pathCenterX, pathCenterY, lastPointX, lastPointY;

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

    public LockViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        scaledTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
        mlinePait.setColor(mlineColor);
        mlinePait.setStrokeWidth(30);
        mlinePait.setAlpha(150);
        mlinePait.setStyle(Paint.Style.STROKE);
        mlinePait.setStrokeCap(Paint.Cap.ROUND);
        mlinePait.setStrokeJoin(Paint.Join.ROUND);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,R.styleable.LockViewGroup,defStyleAttr,0);
        int indexCount = typedArray.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
        int arr = typedArray.getIndex(i);
            switch (arr) {
                case R.styleable.LockViewGroup_count:
                    count = typedArray.getInteger(arr, 3);
                    break;
                case R.styleable.LockViewGroup_outerNorColor:
                    outerNorColor = typedArray.getColor(arr, Color.RED);
                    break;
                case R.styleable.LockViewGroup_innerNorColor:
                    innerNorColor = typedArray.getColor(arr, Color.RED);
                    break;
                case R.styleable.LockViewGroup_outerPressColor:
                    outerPressColor = typedArray.getColor(arr, Color.BLUE);

                    break;
                case R.styleable.LockViewGroup_innerPressColor:
                    innerPressColor = typedArray.getColor(i, Color.BLUE);
                    break;
                case R.styleable.LockViewGroup_outerUpColor:
                    outerUpColor = typedArray.getColor(arr, Color.YELLOW);
                    break;
                case R.styleable.LockViewGroup_innerUpColor:
                    mlineColor = typedArray.getColor(arr, Color.YELLOW);
                    break;
                case R.styleable.LockViewGroup_mlineColor:
                    innerUpColor = typedArray.getColor(arr, Color.YELLOW);
                    break;


            }

        }

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int wsize = MeasureSpec.getSize(widthMeasureSpec);
        int hsize = MeasureSpec.getSize(heightMeasureSpec);
        width = hight = Math.min(wsize, hsize);
        lockItemWidth = (2 * width) / (3 * count + 1);// width / (count + (count + 1) / 2);间隔是item宽度的一半
        spacingWidth = lockItemWidth / 2;
        if (lockItems == null) {
            lockItems = new LockItem[count * count];
            removeAllViews();
            for (int i = 0, j = count * count; i < j; i++) {
                LockItem lockItem = new LockItem(getContext(), outerNorColor, innerNorColor, outerPressColor, innerPressColor, outerUpColor, innerUpColor);
                ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(lockItemWidth, lockItemWidth);
                lockItem.setLayoutParams(layoutParams);
                lockItem.setTag(j - i);
                lockItems[i] = lockItem;
                addView(lockItem);
                measureChild(lockItem, lockItemWidth, lockItemWidth);
            }
        }
    }


    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int mChildCount = getChildCount();
        long num = (long) Math.sqrt(mChildCount);
        for (int i = 0; i < num; i++) {
            for (int j = 0; j < num; j++) {
                View childAt = getChildAt(--mChildCount);
                childAt.layout(
                        spacingWidth * (j + 1) + j * lockItemWidth,
                        spacingWidth * (i + 1) + i * lockItemWidth,
                        lockItemWidth * (j + 1) + spacingWidth * (j + 1),
                        lockItemWidth * (i + 1) + spacingWidth * (i + 1));
            }
        }
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.drawPath(mlinePath, mlinePait);
        if (pathCenterX > 0 && pathCenterY > 0) {
            canvas.drawLine(pathCenterX, pathCenterY, lastPointX, lastPointY, mlinePait);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        tempx = (int) event.getX();
        tempy = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                reset(tempx, tempy);
                break;
            case MotionEvent.ACTION_MOVE:
                int dy = downy - tempy;
                int dx = donwx - tempx;
                if (Math.abs(dy) > scaledTouchSlop || Math.abs(dx) > scaledTouchSlop) {

                    donwx = tempx;
                    downy = tempy;
                    LockItem child = getChildByXY(tempx, tempy);
                    if (child != null) {
                        if (!selectLockViews.contains(child.getTag())) {
                            selectLockViews.add((Integer) child.getTag());
                            child.setMode(LockItem.Mode.PRESS);
                            pathCenterX = (child.getLeft() + child.getRight()) / 2;
                            pathCenterY = (child.getTop() + child.getBottom()) / 2;
                            if (selectLockViews.size() == 1) {
                                mlinePath.moveTo(pathCenterX, pathCenterY);
                            } else {
                                mlinePath.lineTo(pathCenterX, pathCenterY);
                            }
                            //箭头直接直接指向某一个小圆的圆心
                            changeArraw(child.getLeft() + child.getCenterXY(), child.getTop() + child.getCenterXY());
                            lastView = child;
                            child.invalidate();
                        }
                    }
                }
                //箭头随着手指改变方向
                changeArraw(tempx, tempy);
                lastPointX = tempx;
                lastPointY = tempy;
                break;
            case MotionEvent.ACTION_UP:
                lastView = null;
                pathCenterX = lastPointX;
                pathCenterY = lastPointY;
                if (selectLockViews.size() == 0) return true;
                if (selectLockViews.size() < 4) {
                    Toast.makeText(getContext(), "密码不能少于4个", Toast.LENGTH_LONG).show();
                    reset(tempx, tempy);
                    return true;
                }
                if (checkPwd()) {
                    Toast.makeText(getContext(), "亲，密码正确", Toast.LENGTH_LONG).show();
                } else {
                    Toast.makeText(getContext(), "密码错误", Toast.LENGTH_LONG).show();
                }
                changeMode();
                this.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        reset(tempx, tempy);
                    }
                }, 200);
                break;
        }
        invalidate();
        return true;
    }

    private void changeArraw(int x, int y) {
        if (lastView != null) {
            double v = getAngle(lastView.getLeft() + lastView.getCenterXY(), lastView.getTop() + lastView.getCenterXY(), x, y);
            lastView.setAngle((int) v);
            lastView.invalidate();
        }
    }

    /**
     * up的时候改变状态，更新view，用户可以根据自己的需要增加几个状态，如：密码错误和密码正确的颜色样式
     */
    private void changeMode() {
        if (lockItems == null) return;
        for (int i = 0; i < lockItems.length; i++) {
            lockItems[i].setMode(LockItem.Mode.UP).invalidate();

            if (lockItems[i].getTag() == selectLockViews.get(selectLockViews.size() - 1)) {
                //去掉最后一个箭头
                lockItems[i].setAngle(-1000).invalidate();
            }
        }
    }

    /**
     *检查密码是否正确
     * @return
     */
    private boolean checkPwd() {
        if (selectLockViews.size() != pwd.length) return false;
        for (int i = 0; i < pwd.length; i++) {
            if (selectLockViews.get(i) != pwd[i]) {
                return false;
            }
        }
        return true;
    }

    /**
     * 重置，将各种状态复原。
     * @param x
     * @param y
     */
    private void reset(int x, int y) {
        selectLockViews.clear();
        mlinePath.reset();
        donwx = x;
        downy = y;
        pathCenterX = lastPointX = 0;
        pathCenterY = lastPointY = 0;
        for (int i = 0; i < lockItems.length; i++) {
            lockItems[i].setMode(LockItem.Mode.NOR).setAngle(-1000).invalidate();
        }
        invalidate();
    }

    /**
     * 通过手指的坐标去检查当前点在哪一个子view上面
     * @param x
     * @param y
     * @return
     */
    private LockItem getChildByXY(int x, int y) {
        if (lockItems == null) return null;
        for (int i = 0; i < lockItems.length; i++) {
            LockItem lockItem = lockItems[i];
            if (positionInView(lockItem, x, y)) {
                return lockItem;
            }
        }
        return null;
    }

    /**
     * 通过view的边界检查x。y是否在内部
     * @param lockItem
     * @param x
     * @param y
     * @return
     */
    private boolean positionInView(LockItem lockItem, int x, int y) {
        if (x > lockItem.getLeft() && x < lockItem.getRight() && y > lockItem.getTop() && y < lockItem.getBottom()) {
            return true;
        }
        return false;
    }

    /**
     * 这个就是根据两个点坐标计算角度，通知箭头的方向。
     * @param px1
     * @param py1
     * @param px2
     * @param py2
     * @return
     */
    double getAngle(int px1, int py1, int px2, int py2) {
        //两点的x、y值
        int x = px2 - px1;
        int y = py2 - py1;
        double hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
        //斜边长度
        double sin = x / hypotenuse;
        double radian = Math.asin(sin);
        //求出弧度
        double angle = 180 / (Math.PI / radian);
        //用弧度算出角度
        if (y > 0) {
            angle = 180 - angle;
        }
        return angle;
    }
}

这里面也一样遵循了自定义控件的三部曲，onMeasure，onLayout，draw。onLayout有很多种方式可以控制子view的位置，这里采用的最简单，最易懂的n＊n的乘法口诀模式，里面没有太多的复杂逻辑，都是一些细节的东西，我觉得最麻烦的就是计算角度了，数学是体育老师教的，哎。。。

<?xml version="1.0" encoding="utf-8"?>
<com.example.apple.Custom.LockViewGroup 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"
    app:count="5"
    android:background="@android:color/darker_gray"
    android:layout_height="match_parent">

</com.example.apple.Custom.LockViewGroup>

使用很简单的，拿来就直接可以用，我就不放demo工程了，里面的代码粘贴就能跑，哟。。又十二点了，洗洗睡了。。。