Android自定义全屏方格，手指滑动变色控件

 1、该功能是把整个屏幕画满正方形格子，手指滑动变色，也可以换成圆形，还可以做成9宫格16宫格类似于屏幕解锁的功能，里面已经包含功能自己读懂修改一下就行。

2、该类是画质屏幕加载时的图形样式

package com.example.tptest.view;

import android.content.Context;
import android.graphics.Color;
import android.util.Log;
import android.view.View;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;

public class TpLockView extends View {
    /**
     * GestureLockView的三种状态
     */
    enum Mode {
        STATUS_NO_FINGER, STATUS_FINGER_ON, STATUS_FINGER_UP;
    }

    private Mode mCurrentStatus = Mode.STATUS_NO_FINGER;
    private int mWidth;
    private int mHeight;
    private int mRadius;
    private int mStrokeWidth = 2;

    private int mCenterX;
    private int mCenterY;
    private Paint mPaint;

    /**
     * 箭头（小三角最长边的一半长度 = mArrawRate * mWidth / 2 ）
     */
    private float mArrowRate = 0.333f;
    private int mArrowDegree = -1;
    private Path mArrowPath;
    /**
     * 内圆的半径 = mInnerCircleRadiusRate * mRadus
     */
    private float mInnerCircleRadiusRate = 0.3F;

    /**
     * 四个颜色，可由用户自定义，初始化时由GestureLockViewGroup传入
     */
    private int mColorNoFinger;
    private int mColorFingerOn;
    private int mColorFingerUpCorrect;
    private int mColorFingerUpError;

    public TpLockView(Context context, int colorNoFingerr, int colorFingerOn, int colorCorrect, int colorError) {
        super(context);
        this.mColorNoFinger = colorNoFingerr;
        this.mColorFingerOn = colorFingerOn;
        this.mColorFingerUpCorrect = colorCorrect;
        this.mColorFingerUpError = colorError;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mArrowPath = new Path();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);

        // 取长和宽中的小值
        mWidth = mWidth < mHeight ? mWidth : mHeight;
        mRadius = mCenterX = mCenterY = mWidth / 2;
        mRadius -= mStrokeWidth / 2;

        // 绘制三角形，初始时是个默认箭头朝上的一个等腰三角形，用户绘制结束后，根据由两个GestureLockView决定需要旋转多少度
//        float mArrowLength = mWidth / 2 * mArrowRate;
//        mArrowPath.moveTo(mWidth / 2, mStrokeWidth + 2);
//        mArrowPath.lineTo(mWidth / 2 - mArrowLength, mStrokeWidth + 2 + mArrowLength);
//        mArrowPath.lineTo(mWidth / 2 + mArrowLength, mStrokeWidth + 2 + mArrowLength);
//        mArrowPath.close();
//        mArrowPath.setFillType(Path.FillType.WINDING);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        switch (mCurrentStatus) {
            case STATUS_FINGER_ON:
                // 绘制外圆
                mPaint.setStyle(Style.STROKE);
                mPaint.setColor(Color.GREEN);      //画的过程填充颜色
                mPaint.setStrokeWidth(50);
//                canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
                // 绘制内圆
                mPaint.setStyle(Style.FILL);
                canvas.drawCircle(mCenterX, mCenterY, 100, mPaint);
                break;
            case STATUS_FINGER_UP:
                // 绘制外圆
                if (TpLockViewGroup.isCorrect)
                    mPaint.setColor(mColorFingerUpCorrect);
                else
                    mPaint.setColor(Color.GREEN);   //画完之后填充颜色

                mPaint.setStyle(Style.STROKE);
                mPaint.setStrokeWidth(2);
//                canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
                    // 绘制内圆
                    mPaint.setStyle(Style.FILL);
                canvas.drawCircle(mCenterX, mCenterY, 100, mPaint);    //第三个参数判断是圆形还是60左右是圆形，100正方形
//                drawArrow(canvas);
                break;
            case STATUS_NO_FINGER:
//                Log.i("bll", "cccc-mCenterX=" + mCenterX + ",mCenterY=" + mCenterY + ",mRadius=" + mRadius);
                // 绘制外圆
                mPaint.setStyle(Style.STROKE);
                mPaint.setColor(Color.WHITE);   //填充颜色
                mPaint.setStrokeWidth(1);
//                canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
                // 绘制内圆
                mPaint.setStyle(Style.FILL);    //绘制出来的状态 fill 全覆盖
                mPaint.setColor(Color.WHITE);//笔画颜色
                canvas.drawCircle(mCenterX, mCenterY, 100, mPaint);  //第三个参数判断是圆形还是正方形
                break;
        }
    }

    /**
     * 绘制箭头
     *
     * @param canvas
     */
//    private void drawArrow(Canvas canvas) {
//        if (mArrowDegree != -1) {
//            mPaint.setStyle(Style.FILL);
//
//            canvas.save();
//            canvas.rotate(mArrowDegree, mCenterX, mCenterY);
//            canvas.drawPath(mArrowPath, mPaint);
//            canvas.restore();
//        }
//    }

    /**
     * 设置当前模式并重绘界面
     *
     * @param mode
     */
    public void setMode(Mode mode) {
        this.mCurrentStatus = mode;
        invalidate();
    }

    public void setArrowDegree(int degree) {
        this.mArrowDegree = degree;
    }

}

3、该类可以控制图形的大小 数量 间隔 和 画笔大小样式等等

package com.example.tptest.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;

import com.example.tptest.R;


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


public class TpLockViewGroup extends RelativeLayout {

    private static final String TAG = "TpLockViewGroup";

    Context mContext;
    /**
     * 保存所有的GestureLockView
     */
    private TpLockView[] mGestureLockViews;
    /**
     * 每个边上的GestureLockView的个数
     */
    private int mCount = 14;

    /**
     * 保存用户选中的GestureLockView的id
     */
    private List<Integer> mChoose = new ArrayList<>();

    private String mChooseString = "";

    private Paint mPaint;
    /**
     * 每个GestureLockView中间的间距 设置为：mGestureLockViewWidth * 25%
     */
    private int mMarginBetweenLockView = 1;
    /**
     * GestureLockView的边长 4 * mWidth / ( 5 * mCount + 1 )
     */
    private int mGestureLockViewWidth;

    /**
     * GestureLockView无手指触摸的状态下圆的颜色
     */
    private int mNoFingerColor = 0xFF378FC9;

    /**
     * GestureLockView手指触摸的状态下圆的颜色
     */
    private int mFingerOnColor = 0XFFEC159F;
    /**
     * GestureLockView手指抬起的状态下,正确时圆的颜色
     */
    private int mFingerUpColorCorrect = 0xFF91DC5A;

    /**
     * GestureLockView手指抬起的状态下，错误圆的颜色
     */
    private int mFingerUpColorError = 0xFFFF0000;
    /**
     * 宽度
     */
    private int mWidth;
    /**
     * 高度
     */
    private int mHeight;

    private Path mPath;
    /**
     * 指引线的开始位置x
     */
    private int mLastPathX;
    /**
     * 指引线的开始位置y
     */
    private int mLastPathY;
    /**
     * 指引下的结束位置
     */
    private Point mTmpTarget = new Point();

    /**
     * 最大尝试次数
     */
    private int mTryTimes = -1;
    public static boolean isCorrect = false;

    /**
     * 回调接口
     */
    private TpLockListener onGestureLockListener;


    private boolean isRetryTimeLimit = false;

    private int mPrferenceId = -1;


    public TpLockViewGroup(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        this.mContext=context;
    }

    public TpLockViewGroup(Context context, AttributeSet attrs,
                                int defStyle) {
        super(context, attrs, defStyle);

        /**
         * 获得所有自定义的参数的值
         */
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.ConstraintLayout_Layout, defStyle, 0);

        mNoFingerColor = a.getColor(R.styleable.ConstraintSet_chainUseRtl, mNoFingerColor);
        mFingerOnColor = a.getColor(R.styleable.ConstraintSet_chainUseRtl, mFingerOnColor);
        mFingerUpColorCorrect = a.getColor(R.styleable.ConstraintSet_chainUseRtl, mFingerUpColorCorrect);
        mFingerUpColorError = a.getColor(R.styleable.ConstraintSet_chainUseRtl, mFingerUpColorError);
        mCount = a.getInt(R.styleable.ConstraintSet_chainUseRtl, mCount);
        mPrferenceId = a.getInt(R.styleable.ConstraintSet_chainUseRtl, mPrferenceId);

        a.recycle();


        // 初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPath = new Path();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        mHeight = mWidth = mWidth < mHeight ? mWidth : mHeight;
        initViews();
    }

    private void initViews() {
        // 初始化mGestureLockViews
        if (mGestureLockViews == null) {
            mGestureLockViews = new TpLockView[mCount * mCount];
            // 计算每个GestureLockView的宽度
            mGestureLockViewWidth = (int) (19.4 * mWidth * 1.0f / (11 * mCount + 1));    //mCount=14  宽800 高1196
            Log.i("bll","mGestureLockViewWidth-"+mGestureLockViewWidth);
            //mGestureLockViewWidth = (int) (19.7 * mWidth * 1.0f / (12.15 * mCount + 1));
            //计算每个GestureLockView的间距
//            mMarginBetweenLockView = (int) (mGestureLockViewWidth * 0.25);  //这里是间距 我用不到
            // 设置画笔的宽度为GestureLockView的内圆直径稍微小点
            mPaint.setStrokeWidth( 0.1f);    //画笔宽度   宽一点的话会很明显

            for (int i = 0; i < mGestureLockViews.length; i++) {
                //初始化每个GestureLockView
                mGestureLockViews[i] = new TpLockView(getContext(), mNoFingerColor, mFingerOnColor, mFingerUpColorCorrect, mFingerUpColorError);
                mGestureLockViews[i].setId(i + 1);
                //设置参数，主要是定位GestureLockView间的位置
                LayoutParams lockerParams = new LayoutParams(
                        mGestureLockViewWidth, mGestureLockViewWidth);

                // 不是每行的第一个，则设置位置为前一个的右边
                if (i % mCount != 0) {
                    lockerParams.addRule(RelativeLayout.RIGHT_OF,
                            mGestureLockViews[i - 1].getId());
                }
                // 从第二行开始，设置为上一行同一位置View的下面
                if (i > mCount - 1) {
                    lockerParams.addRule(RelativeLayout.BELOW,
                            mGestureLockViews[i - mCount].getId());
                }
                //设置右下左上的边距
                int rightMargin = mMarginBetweenLockView;
                int bottomMargin = mMarginBetweenLockView;

                int leftMargin = 0;
                int topMargin = 0;
                /**
                 * 每个View都有右外边距和底外边距 第一行的有上外边距 第一列的有左外边距
                 */
                if (i >= 0 && i < mCount)// 第一行
                {
                    topMargin = mMarginBetweenLockView;
                }
                if (i % mCount == 0)// 第一列
                {
                    leftMargin = mMarginBetweenLockView;
                }

                lockerParams.setMargins(leftMargin, topMargin, rightMargin,
                        bottomMargin);
                mGestureLockViews[i].setMode(TpLockView.Mode.STATUS_NO_FINGER);
                addView(mGestureLockViews[i], lockerParams);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        int x = (int) event.getX();
        int y = (int) event.getY();

        //重试次数超过限制，直接返回
        if (mTryTimes <= 0 && isRetryTimeLimit) {
            return true;
        }

        switch (action) {
            case MotionEvent.ACTION_DOWN:
//                Log.i("bll","MotionEvent.ACTION_DOWN-重置");
//                reset();     // 重置
                break;
            case MotionEvent.ACTION_MOVE:
                drawAndGetSelectedWhenTouchMove(x, y);
                break;
            case MotionEvent.ACTION_UP:

                if (onGestureLockListener != null) {
                    onGestureLockListener.onComplete("hahaha");
                }

//                EventBus.getDefault().post("UPUPUP");


//                Log.i("bll", "mChooseString==" + mChooseStrixng);
//
//                if (onGestureLockListener != null) {
//                    onGestureLockListener.onComplete(mChooseString);
//                }
//                drawWhenTouchUp();
                break;
        }
        invalidate();
        return true;
    }

    int number=0; //计算触摸后得总数量
    private void drawAndGetSelectedWhenTouchMove(int x, int y) {
        mPaint.setColor(mFingerOnColor);
        mPaint.setAlpha(50);
        TpLockView child = getChildIdByPos(x, y);
        if (child != null) {
            int cId = child.getId();
            if (!mChoose.contains(cId)) {
                mChoose.add(cId);
                mChooseString = mChooseString + (cId - 1);
                child.setMode(TpLockView.Mode.STATUS_FINGER_ON);
                // 设置指引线的起点
                mLastPathX = child.getLeft() / 2 + child.getRight() / 2;
                mLastPathY = child.getTop() / 2 + child.getBottom() / 2;

                if (mChoose.size() == 1)// 当前添加为第一个
                {
                    Log.i("bll", "mLastPathX==" + mLastPathX+",mLastPathY="+mLastPathY);
                    mPath.moveTo(mLastPathX, mLastPathY);
                } else
                // 非第一个，将两者使用线连上
                {
                    mPath.lineTo(mLastPathX, mLastPathY);
                    number++;
                    if(number>=111){
                        if (onGestureLockListener != null) {
                         onGestureLockListener.onComplete("hahaha");
                    }
                        Log.i("bll", "number==" + number);
                    }
                }
            }
        }
        // 指引线的终点
        mTmpTarget.x = x;
        mTmpTarget.y = y;
    }

    private void drawWhenTouchUp() {
        if (isCorrect) {
            mPaint.setColor(mFingerUpColorCorrect);
        } else {
            mPaint.setColor(mFingerUpColorError);
        }
        mPaint.setAlpha(50);
        Log.e(TAG, "mChoose = " + mChoose);
        // 将终点设置位置为起点，即取消指引线
        mTmpTarget.x = mLastPathX;
        mTmpTarget.y = mLastPathY;

        // 改变子元素的状态为UP
        setItemModeUp();

        // 计算每个元素中箭头需要旋转的角度
        for (int i = 0; i + 1 < mChoose.size(); i++) {
            int childId = mChoose.get(i);
            int nextChildId = mChoose.get(i + 1);

            TpLockView startChild = (TpLockView) findViewById(childId);
            TpLockView nextChild = (TpLockView) findViewById(nextChildId);

            int dx = nextChild.getLeft() - startChild.getLeft();
            int dy = nextChild.getTop() - startChild.getTop();
            // 计算角度
            int angle = (int) Math.toDegrees(Math.atan2(dy, dx)) + 90;
            startChild.setArrowDegree(angle);
        }
    }



    private void setItemModeUp() {
        for (TpLockView gestureLockView : mGestureLockViews) {
            if (mChoose.contains(gestureLockView.getId())) {
                gestureLockView.setMode(TpLockView.Mode.STATUS_FINGER_UP);
            }
        }
    }



    /**
     * 通过x,y获得落入的GestureLockView
     *
     * @param x
     * @param y
     * @return
     */
    private TpLockView getChildIdByPos(int x, int y) {
        for (TpLockView gestureLockView : mGestureLockViews) {
            if (checkPositionInChild(gestureLockView, x, y)) {
                return gestureLockView;
            }
        }
        return null;
    }

    /**
     * 检查当前是否在child中
     *
     * @param child
     * @param x
     * @param y
     * @return
     */
    private boolean checkPositionInChild(View child, int x, int y) {

        //设置了内边距，即x,y必须落入下GestureLockView的内部中间的小区域中，可以通过调整padding使得x,y落入范围变大，或者不设置padding
        int padding = (int) (mGestureLockViewWidth * 0.15);

        if (x >= child.getLeft() + padding && x <= child.getRight() - padding
                && y >= child.getTop() + padding
                && y <= child.getBottom() - padding) {
            return true;
        }
        return false;
    }

    @Override
    public void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        //绘制GestureLockView间的连线
        if (mPath != null) {
            canvas.drawPath(mPath, mPaint);
        }
        //绘制指引线
        if (mChoose.size() > 0) {
            if (mLastPathX != 0 && mLastPathY != 0)
                canvas.drawLine(mLastPathX, mLastPathY, mTmpTarget.x,
                        mTmpTarget.y, mPaint);
        }
    }

    /**
     * 做一些必要的重置
     */
    private void reset() {
        mChoose.clear();
        mChooseString = "";
        mPath.reset();
        for (TpLockView gestureLockView : mGestureLockViews) {
            gestureLockView.setMode(TpLockView.Mode.STATUS_NO_FINGER);
            gestureLockView.setArrowDegree(-1);
        }
        handler.removeCallbacksAndMessages(null);
    }


    //对外公开的一些方法


    public void setGestureLockListener(TpLockListener onGestureLockListener) {
        this.onGestureLockListener = onGestureLockListener;
    }


    public void resetView() {
        reset();
        invalidate();
    }


    public void setmCount(int mCount) {
        if (this.mCount == mCount) {
            return;
        }
        this.mCount = mCount;
        invalidate();
        requestLayout();
    }

    public void setPointCount(int mCount){

        if (this.mCount == mCount) {
            return;
        }
        this.mCount = mCount;

        removeAllViews();

        mGestureLockViews = null;

        initViews();
    }

    private final Handler handler = new Handler();

    public void showErrorStatus(long millisecond) {

        handler.removeCallbacksAndMessages(null);

        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                resetView();
            }
        },millisecond);

    }

    public void clearView() {
        resetView();
    }

}

4、返回结果让外部可以处理事务。

public abstract class TpLockListener {

    public abstract void onComplete(String result);
}

5、在layout里面调用即可

<?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"
    android:orientation="vertical"
    android:id="@+id/ts_ly"
    tools:context=".MainActivity">
    
    <com.example.tptest.view.TpLockViewGroup
        android:id="@+id/gesture_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="#00ff00"
        />
</RelativeLayout>

6、在activity里面处理结果