自己定义九宫格手势解锁

项目中用到手势解锁，然而没有在GitHub上找到想要的样式= =，仅仅好自己来定义了。以下来看代码~~

基本上非常多应用的手势解锁全都是九宫格的，内部内就是九个小圈圈而已。

那么我们就先来自己定义这个小圈圈吧~

圈圈的颜色选择状态有大致有三种状态。所以我定义了一个枚举来区分

package com.juzisang.com.library;

/**
 * Created by 橘子桑 on 2016/3/27.
 */
public enum LockState {
    SELECT_STATE,//选中
    ERRER_STATE, //错误
    DEFAULT_COLOR //默认
}

圈圈分为边框。内部填充色。还有内部圆。所以我定义了三个画笔来区分。

package com.juzisang.com.library;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by 橘子桑 on 2016/3/27.
 */
public class MarkerView extends View {
    //是否显示内部的圈圈
    private boolean mInsideNodeShow;
    //宽度
    protected int mContentWidth;
    //宽度
    protected int mContentRadius;
    //选中状态
    protected LockState mCurrentState = LockState.DEFAULT_COLOR;
    //画边框画圆的的画笔
    private Paint mNodeFramePaint;
    private Paint mNodeCirclePaint;
    private Paint mNodeFullPaint;
    //默认的颜色
    private int mDefaultColor = Color.parseColor("#757575");
    private int mDefailtFullColor = Color.parseColor("#64757575");
    private int mNodeDefaultColor = Color.parseColor("#757575");
    //选中的颜色
    private int mSelectColor = Color.parseColor("#7ECEF4");
    private int mFrameSelectFullColor = Color.parseColor("#647ECEF4");
    private int mNodeSelectColor = Color.parseColor("#7ECEF4");
    //错误时候的颜色
    private int mErrerColor = Color.parseColor("#EC6941");
    private int mErrerFullColor = Color.parseColor("#64EC6941");
    private int mErrerNodeColor = Color.parseColor("#EC6941");
    //边框的宽度
    private int mFrameLineWidth;
    private int mNodeRadius;
    //每一个圈圈的内边距
    private int mNodePadding;
    //触摸有效的范围
    private float mTouchRatio;
    //当前标记的位置
    private int mNum;

    public MarkerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs, 0);
    }

    public MarkerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs, defStyleAttr);
    }
    //以后外部布局传来的參数
    public MarkerView(Context context, int mDefaultColor, int mDefailtFullColor, int mNodeDefaultColor,
                      int mSelectColor, int mFrameSelectFullColor, int mNodeSelectColor,
                      int mErrerColor, int mErrerFullColor, int mErrerNodeColor,
                      int mFrameLineWidth, int mNodeRadius, int mNodePadding, boolean insideNodeShow) {
        super(context);
        this.mInsideNodeShow = insideNodeShow;
        this.mDefaultColor = mDefaultColor;
        this.mDefailtFullColor = mDefailtFullColor;
        this.mNodeDefaultColor = mNodeDefaultColor;
        this.mSelectColor = mSelectColor;
        this.mFrameSelectFullColor = mFrameSelectFullColor;
        this.mNodeSelectColor = mNodeSelectColor;
        this.mErrerColor = mErrerColor;
        this.mErrerFullColor = mErrerFullColor;
        this.mErrerNodeColor = mErrerNodeColor;
        this.mFrameLineWidth = mFrameLineWidth;
        this.mNodeRadius = mNodeRadius;
        this.mNodePadding = mNodePadding;
        //内边距
        setPadding(mNodePadding, mNodePadding, mNodePadding, mNodePadding);
        //外部圆
        mNodeFramePaint = new Paint();
        mNodeFramePaint.setColor(mDefaultColor);
        mNodeFramePaint.setAntiAlias(true);
        mNodeFramePaint.setStrokeWidth(mFrameLineWidth);
        mNodeFramePaint.setStyle(Paint.Style.STROKE);//仅仅画出边框

        //内部填充色
        mNodeFullPaint = new Paint();
        mNodeFullPaint.setColor(mDefailtFullColor);
        mNodeFullPaint.setStyle(Paint.Style.FILL);
        mNodeFullPaint.setAntiAlias(true);

        //内部圆
        mNodeCirclePaint = new Paint();
        mNodeCirclePaint.setColor(mNodeDefaultColor);
        mNodeCirclePaint.setStyle(Paint.Style.FILL);//填充
        mNodeCirclePaint.setAntiAlias(true);
    }

    //取当前透明度的百分比
    public int getFullAlpha(int color, float ratio) {
        return Color.argb((int) (Color.alpha(color) * ratio), Color.red(color), Color.green(color), Color.blue(color));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mContentWidth = getWidth();
        mContentRadius = mContentWidth / 2 - Math.abs(getPaddingLeft()) - mFrameLineWidth / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        switch (mCurrentState) {
            case DEFAULT_COLOR: //默认
                mNodeFramePaint.setColor(mDefaultColor);
                mNodeFullPaint.setColor(mDefailtFullColor);
                mNodeCirclePaint.setColor(mNodeDefaultColor);
                //外圆
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius, mNodeFramePaint);
                //填充色
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius - mFrameLineWidth / 2, mNodeFullPaint);
                //中心圆
                if (mInsideNodeShow)
                    canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mNodeRadius, mNodeCirclePaint);
                break;
            case ERRER_STATE://错误
                mNodeFramePaint.setColor(mErrerColor);
                mNodeFullPaint.setColor(mErrerFullColor);
                mNodeCirclePaint.setColor(mErrerNodeColor);
                //外圆
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius, mNodeFramePaint);
                //填充色
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius - mFrameLineWidth / 2, mNodeFullPaint);
                //中心圆
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mNodeRadius, mNodeCirclePaint);
                break;
            case SELECT_STATE://选中
                mNodeFramePaint.setColor(mSelectColor);
                mNodeFullPaint.setColor(mFrameSelectFullColor);
                mNodeCirclePaint.setColor(mNodeSelectColor);
                //外圆
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius, mNodeFramePaint);
                //填充色
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius - mFrameLineWidth / 2, mNodeFullPaint);
                //中心圆
                canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mNodeRadius, mNodeCirclePaint);
                break;
        }

    }
    //设置状态，而且重绘
    public void setState(LockState CurrentState) {
        mCurrentState = CurrentState;
        invalidate();
    }
    //是否选中
    public boolean isHighLighted() {
        if (mCurrentState == LockState.SELECT_STATE || mCurrentState == LockState.ERRER_STATE) {
            return true;
        }
        return false;
    }
    //中心点X
    public int getCenterX() {
        return (getLeft() + getRight()) / 2;
    }
    //中心点Y
    public int getCenterY() {
        return (getTop() + getBottom()) / 2;
    }
    //设置圈圈在手势锁其中的位置
    protected void setNum(int num) {
        mNum = num;
    }

    protected int getNum() {
        return mNum;
    }
}

以上就是一个简单的圆了

那么，自己定义View当然会有自己定义属性，所以有这么多T0T，不要问我为什么这么多属性。任性= =（事实上我还想写很多其它），自己定义属性的方法

 <!-- 线的颜色 -->
    <attr name="lineColor" format="color" />
    <!-- 线的宽度 -->
    <attr name="lineWidth" format="dimension" />
    <!--默认颜色 -->
    <attr name="defaultColor" format="color" />
    <!--默认时的填充色-->
    <attr name="defaultFullColor" format="color" />
    <!--默认内部圆颜色-->
    <attr name="defaultNodeColor" format="color" />
    <!-- ======================================================= -->
    <!-- 边框选中时边框的颜色 -->
    <attr name="selectColor" format="color" />
    <!-- 边框选中时内部的填充色 -->
    <attr name="selectFrameFullColor" format="color" />
    <!--内部圆圈选中时的颜色-->
    <attr name="selectNodeColor" format="color" />
    <!-- ======================================================= -->
    <!-- 错误的颜色 -->
    <attr name="errorColor" format="color" />
    <!--错误时内部的填充色-->
    <attr name="errorFullColor" format="color" />
    <!-- 错误时的颜色 -->
    <attr name="errorNodeColor" format="color" />
    <!-- ======================================================= -->
    <!--边框的的宽度-->
    <attr name="frameLineWidth" format="dimension" />
    <!-- 内部圆圈的宽度 -->
    <attr name="nodeRadius" format="dimension" />
    <!--内边距-->
    <attr name="nodePadding" format="dimension" />
    <!--触摸有效的比例-->
    <attr name="touchRatio" format="float" />
    <!-- 是否显示内部的圆圈 -->
    <attr name="insideNodeShow" format="boolean"/>

LockView的代码

package com.juzisang.com.library;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
 * Created by 橘子桑 on 2016/3/27.
 */
public class LockView extends ViewGroup {
    //画连接线的画笔
    private Paint mLinePaint;
    //能够触摸的区域百分比
    private float mTouchRatio;
    //线的颜色
    protected int mLineColor;
    //先的宽度
    protected float mLineWidth;
    //已经选中了的View
    ArrayList<MarkerView> mNodeViews = new ArrayList<>();
    //存储password
    protected StringBuilder pawBuilder = new StringBuilder();
    //当前手指触摸的x坐标
    protected float x;
    //当前手指触摸的y坐标
    protected float y;
    //回调
    private onLockCallback mOnLockCallback;

    protected int mDefaultColor;

    protected int mSelectColor;

    protected int mErrerColor;

    //禁用手势锁
    private boolean mLockScreen;

    private boolean isTouch;

    //是否把连接线绘制在子View的上面
    private boolean mLineTop = false;
    //手指离开马上重绘
    private boolean mFingerLeaveRedraw = true;

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

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

    public LockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs, defStyleAttr);
    }

    protected void initView(Context context, AttributeSet attrs, int defStyleAttr) {

        TypedArray r = context.obtainStyledAttributes(attrs, R.styleable.MarkerView);

        boolean insideNodeShow = r.getBoolean(R.styleable.LockView_insideNodeShow, false);
        //默认的颜色
        mDefaultColor = r.getColor(R.styleable.LockView_defaultColor, context.getResources().getColor(android.R.color.holo_blue_dark));
        int mDefailtFullColor = r.getColor(R.styleable.LockView_defaultFullColor, getFullAlpha(mDefaultColor, 0.3F));
        int mNodeDefaultColor = (int) r.getColor(R.styleable.LockView_defaultNodeColor, mDefaultColor);
        //选中的颜色
        mSelectColor = (int) r.getColor(R.styleable.LockView_selectColor, context.getResources().getColor(android.R.color.holo_blue_light));
        int mFrameSelectFullColor = r.getColor(R.styleable.LockView_selectFrameFullColor, getFullAlpha(mSelectColor, 0.3F));
        int mNodeSelectColor = r.getColor(R.styleable.LockView_selectNodeColor, mSelectColor);
        //错误时候的颜色
        mErrerColor = r.getColor(R.styleable.LockView_errorColor, context.getResources().getColor(android.R.color.holo_red_light));
        int mErrerFullColor = r.getColor(R.styleable.LockView_errorFullColor, getFullAlpha(mErrerColor, 0.3F));
        int mErrerNodeColor = r.getColor(R.styleable.LockView_errorNodeColor, mErrerColor);
        //圆框变的宽度
        int mFrameLineWidth = (int) r.getDimension(R.styleable.LockView_frameLineWidth, DensityUtils.dip2px(context, 5));
        //内圆的直径
        int mNodeRadius = (int) r.getDimension(R.styleable.LockView_nodeRadius, DensityUtils.dip2px(context, 5));
        //内边距
        int mNodePadding = (int) r.getDimension(R.styleable.LockView_nodePadding, DensityUtils.dip2px(context, 10));
        //触摸有效区域
        mTouchRatio = r.getFloat(R.styleable.LockView_touchRatio, mTouchRatio);
        mLineColor = r.getColor(R.styleable.LockView_lineColor, mDefaultColor);
        mLineWidth = r.getDimension(R.styleable.LockView_lineWidth, DensityUtils.dip2px(context, 5));
        r.recycle();
        //设置线的颜色
        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLinePaint.setColor(mLineColor);
        mLinePaint.setStyle(Paint.Style.STROKE);
        mLinePaint.setStrokeWidth(mLineWidth);
        mLinePaint.setStrokeCap(Paint.Cap.ROUND);
        mLinePaint.setStrokeJoin(Paint.Join.ROUND);

        for (int i = 0; i < 9; i++) {
            MarkerView view = new MarkerView(context, mDefaultColor, mDefailtFullColor, mNodeDefaultColor, mSelectColor, mFrameSelectFullColor, mNodeSelectColor,
                    mErrerColor, mErrerFullColor, mErrerNodeColor, mFrameLineWidth, mNodeRadius, mNodePadding, insideNodeShow);
            view.setNum(i + 1);
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            view.setLayoutParams(params);
            addView(view);
        }

        // 清除FLAG，否则 onDraw() 不会调用。原因是 ViewGroup 默认透明背景不须要调用 onDraw()
        setWillNotDraw(false);

    }

    public int getFullAlpha(int color, float ratio) {
        return Color.argb((int) (Color.alpha(color) * ratio), Color.red(color), Color.green(color), Color.blue(color));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int size = Math.min(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec)); // 測量宽度
        setMeasuredDimension(size, size);
        for (int i = 0; i < getChildCount(); i++) {
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (changed) {
            float areaWidth = (r - l - getPaddingLeft() * 2) / 3;
            for (int n = 0; n < 9; n++) {
                MarkerView node = (MarkerView) getChildAt(n);
                // 获取3*3宫格内坐标
                int row = n / 3;
                int col = n % 3;
                //加上内间距
                int left = (int) (getPaddingLeft() + col * areaWidth);
                int top = (int) (getPaddingTop() + row * areaWidth);
                int right = (int) (left + areaWidth);
                int bottom = (int) (top + areaWidth);
                node.layout(left, top, right, bottom);
            }
        }
    }

    /**
     * 设置连接线是否绘制在子View的上面
     * true 绘制在子View的上面
     * false 绘制在子View的以下
     *
     * @param isLineTop 设置连接线是否绘制在子View的上面
     */
    public void setLineTop(boolean isLineTop) {
        mLineTop = isLineTop;
        invalidate();
    }

    /**
     * 设置连接线是否绘制在子View的上面
     * true 绘制在子View的上面
     * false 绘制在子View的以下
     */
    public boolean getLineTop() {
        return mLineTop;
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {

        if (getLockScreen()) {
            invalidate();
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //恢复默认
                resetDefault();
                x = event.getX();
                y = event.getY();
                isTouch = true;
                break;
            case MotionEvent.ACTION_MOVE:
                x = event.getX(); // 这里要实时记录手指的坐标
                y = event.getY();
                MarkerView nodeView = getNodeAt(x, y);
                //没有选中
                if (nodeView != null && !nodeView.isHighLighted()) {
                    nodeView.setState(LockState.SELECT_STATE);
                    mNodeViews.add(nodeView);
                    //进度
                    if (mOnLockCallback != null) {
                        pawBuilder.setLength(0);
                        for (MarkerView markerView : mNodeViews) {
                            pawBuilder.append(markerView.getNum());
                        }
                        mOnLockCallback.onProgress(pawBuilder.toString(), nodeView.getNum());
                    }
                }
                if (mNodeViews.size() > 0) {
                    invalidate();
                }
                break;
            case MotionEvent.ACTION_UP:
                LogUtils.i("手指抬起了");
                isTouch = false;
                pawBuilder.setLength(0);
                if (mNodeViews.size() <= 0) return true;
                pawBuilder.delete(0, pawBuilder.length());
                if (mOnLockCallback != null) {
                    for (MarkerView markerView : mNodeViews) {
                        pawBuilder.append(markerView.getNum());
                    }
                    mOnLockCallback.onFinish(pawBuilder.toString());
                }
                if (mFingerLeaveRedraw) {
                    resetDefault();
                } else {
                    invalidate();
                }
                break;
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //线画在子view的以下
        if (!mLineTop) onDrawLock(canvas);
    }

    //画子View的地方
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        //放在这里的原因是。线会被子View挡到
        if (mLineTop) onDrawLock(canvas);
    }

    /**
     * 绘图的方法
     */
    private void onDrawLock(Canvas canvas) {
        //屏幕锁住了，仅仅画起点到终点的
        if (getLockScreen()) {
            onDrawNodeViewLock(canvas);
            return;
        }
        if (isTouch || mFingerLeaveRedraw) {
            //从第一个和最后一个的连接线
            onDrawNodeViewLock(canvas);
            //最后一个点，到手指之间的线
            if (mNodeViews.size() > 0) {
                MarkerView lastNode = mNodeViews.get(mNodeViews.size() - 1);
                canvas.drawLine(lastNode.getCenterX(), lastNode.getCenterY(), x, y, mLinePaint);
            }
        } else {
            //假设手指离开屏幕。而且设置了手指离开马上重绘
            onDrawNodeViewLock(canvas);
        }


    }

    private void onDrawNodeViewLock(Canvas canvas) {
        //从第一个和最后一个的连接线
        for (int i = 1; i < mNodeViews.size(); i++) {
            MarkerView frontNode = mNodeViews.get(i - 1);
            MarkerView backNode = mNodeViews.get(i);
            canvas.drawLine(frontNode.getCenterX(), frontNode.getCenterY(), backNode.getCenterX(), backNode.getCenterY(), mLinePaint);
        }
    }

    /**
     * 获取给定坐标点的Node，返回null表示当前手指在两个Node之间
     */
    private MarkerView getNodeAt(float x, float y) {
        for (int n = 0; n < getChildCount(); n++) {
            MarkerView node = (MarkerView) getChildAt(n);
            //计算触摸区域以外的距离
            float ratioPadding = (node.getWidth() - (node.getWidth() * mTouchRatio)) / 2;
            if (!(x >= node.getLeft() + ratioPadding && x < node.getRight() - ratioPadding)) {
                continue;
            }
            if (!(y >= node.getTop() + ratioPadding && y < node.getBottom() - ratioPadding)) {
                continue;
            }
            return node;
        }
        return null;
    }

    /**
     * 设置连接线的颜色
     *
     * @param color 颜色值
     */
    public void setLineColor(int color) {
        mLinePaint.setColor(color);
    }

    /**
     * 手指离开马上重绘
     */
    public void setfingerLeaveRedraw(boolean mFingerLeaveRedraw) {
        this.mFingerLeaveRedraw = mFingerLeaveRedraw;
    }

    public boolean getfingerLeaveRedraw() {
        return this.mFingerLeaveRedraw;
    }

    /**
     * 重置状态 为默认状态
     */
    public void resetDefault() {
        setState(LockState.DEFAULT_COLOR);
        mNodeViews.clear();
    }

    /**
     * 重置状态错误状态
     */
    public void resetErrer() {
        setState(LockState.ERRER_STATE);
    }

    /**
     * 重置为选中状态
     */
    public void resetSelect() {
        setState(LockState.SELECT_STATE);
    }

    /**
     * 锁屏，不同意触摸
     */
    public void LockScreen(boolean isScreen) {
        mLockScreen = isScreen;
    }

    public boolean getLockScreen() {
        return mLockScreen;
    }

    public void setState(LockState state) {
        switch (state) {
            case DEFAULT_COLOR:
            case SELECT_STATE:
                setLineColor(mSelectColor);
                break;
            case ERRER_STATE:
                setLineColor(mErrerColor);
                break;
        }
        int size = mNodeViews.size();
        for (int i = 0; i < size; i++) {
            mNodeViews.get(i).setState(state);
        }
        invalidate();
    }

    public void setLockCallback(onLockCallback lockCallback) {
        mOnLockCallback = lockCallback;
    }
    //回调
    public interface onLockCallback {

        void onProgress(String paw, int current);

        void onFinish(String paw);
    }
}

以上凝视都写的非常清晰了。以下讲一下遇到的一些问题。

1.画出来的线被上面的圈圈覆盖了。

通过百度。知道ViewGroup的onDraw是画布局中的内容的，画子View的的方法在这种方法的后面运行。所以ViewGroup的内容会被子View覆盖。那么怎么才干把连接线画在子View的上面呢，非常easy
仅仅要在画子View的方法中运行就好了

//画子View的地方
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        //放在这里的原因是。线会被子View挡到
        if (mLineTop) onDrawLock(canvas);
    }

以下是View的draw()方法

 @CallSuper
    public void draw(Canvas canvas) {
        final int privateFlags = mPrivateFlags;
        final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&
                (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
        mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;

        // Step 1, draw the background, if needed
        int saveCount;

        if (!dirtyOpaque) {
            drawBackground(canvas);
        }

        // skip step 2 & 5 if possible (common case)
        final int viewFlags = mViewFlags;
        boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
        boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
        if (!verticalEdges && !horizontalEdges) {
            // Step 3, draw the content
            if (!dirtyOpaque) onDraw(canvas);

            // Step 4, draw the children
            //这里就是画子View的方法了
            dispatchDraw(canvas);

            // Overlay is part of the content and draws beneath Foreground
            if (mOverlay != null && !mOverlay.isEmpty()) {
                mOverlay.getOverlayView().dispatchDraw(canvas);
            }

            // Step 6, draw decorations (foreground, scrollbars)
            onDrawForeground(canvas);

            // we're done...
            return;
        }

2.怎么设置触摸的区域？

    /**
     * 获取给定坐标点的Node，返回null表示当前手指在两个Node之间
     */
    private MarkerView getNodeAt(float x, float y) {
        for (int n = 0; n < getChildCount(); n++) {
            MarkerView node = (MarkerView) getChildAt(n);
            //计算触摸区域以外的距离
            float ratioPadding = (node.getWidth() - (node.getWidth() * mTouchRatio)) / 2;
            if (!(x >= node.getLeft() + ratioPadding && x < node.getRight() - ratioPadding)) {
                continue;
            }
            if (!(y >= node.getTop() + ratioPadding && y < node.getBottom() - ratioPadding)) {
                continue;
            }
            return node;
        }
        return null;
    }

看上面代码。
依据圆圈的宽度减去可触摸区域的长度除2。得到可触摸区域距离边框的距的距离。

光看代码看着有点圆。画个图看一下吧

画个图是不是清晰非常多，仅仅要用getLeft+边距。和getRight-边距，就能得到可触摸区域在x轴上的范围了。Y轴同理。不懂的同学自己用笔画一下吧~

几乎相同就上面两个问题了

下载地址