最終效果如下

整體思路

a、自定義了一個(gè)RelativeLayout(GestureLockViewGroup)在里面會(huì)根據(jù)傳入的每行的個(gè)數(shù)，生成多個(gè)GestureLockView（就是上面一個(gè)個(gè)小圈圈），然后會(huì)自動(dòng)進(jìn)行布局，里面的寬度，間距，內(nèi)圓的直徑，箭頭的大小神馬的都是百分比實(shí)現(xiàn)的，所以大膽的設(shè)置你喜歡的個(gè)數(shù)，只要你沒(méi)有密集恐懼癥~

b、GestureLockView有三個(gè)狀態(tài)，沒(méi)有手指觸碰、手指觸碰、和手指抬起，會(huì)根據(jù)這三個(gè)狀態(tài)繪制不同的效果，以及抬起時(shí)的小箭頭需要旋轉(zhuǎn)的角度，會(huì)根據(jù)用戶選擇的GestureLockView，進(jìn)行計(jì)算，在GestureLockViewGroup為每個(gè)GestureLockView設(shè)置

c、GestureLockViewGroup主要就是判斷用戶ACTION_MOVE，ACTION_DOWN ， ACTION_UP時(shí)改變選中的GestureLockView的狀態(tài)，并且記錄下來(lái)，提供一定的回調(diào)。

自定義屬性

<?xml version="1.0" encoding="utf-8"?> <resources><attr name="color_no_finger_inner_circle" format="color" /><attr name="color_no_finger_outer_circle" format="color" /><attr name="color_finger_on" format="color" /><attr name="color_finger_up" format="color" /><attr name="count" format="integer" /><attr name="tryTimes" format="integer" /><declare-styleable name="GestureLockViewGroup"><attr name="color_no_finger_inner_circle" /><attr name="color_no_finger_outer_circle" /><attr name="color_finger_on" /><attr name="color_finger_up" /><attr name="count" /><attr name="tryTimes" /></declare-styleable></resources>

GestureLockView

package com.zhy.zhy_gesturelockview.view;import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Path; import android.view.View;public class GestureLockView extends View {private static final String TAG = "GestureLockView";/*** GestureLockView的三種狀態(tài)*/enum Mode{STATUS_NO_FINGER, STATUS_FINGER_ON, STATUS_FINGER_UP;}/*** GestureLockView的當(dāng)前狀態(tài)*/private Mode mCurrentStatus = Mode.STATUS_NO_FINGER;/*** 寬度*/private int mWidth;/*** 高度*/private int mHeight;/*** 外圓半徑*/private int mRadius;/*** 畫(huà)筆的寬度*/private int mStrokeWidth = 2;/*** 圓心坐標(biāo)*/private int mCenterX;private int mCenterY;private Paint mPaint;/*** 箭頭（小三角最長(zhǎng)邊的一半長(zhǎng)度 = mArrawRate * mWidth / 2 ）*/private float mArrowRate = 0.333f;private int mArrowDegree = -1;private Path mArrowPath;/*** 內(nèi)圓的半徑 = mInnerCircleRadiusRate * mRadus* */private float mInnerCircleRadiusRate = 0.3F;/*** 四個(gè)顏色，可由用戶自定義，初始化時(shí)由GestureLockViewGroup傳入*/private int mColorNoFingerInner;private int mColorNoFingerOutter;private int mColorFingerOn;private int mColorFingerUp;public GestureLockView(Context context , int colorNoFingerInner , int colorNoFingerOutter , int colorFingerOn , int colorFingerUp ){super(context);this.mColorNoFingerInner = colorNoFingerInner;this.mColorNoFingerOutter = colorNoFingerOutter;this.mColorFingerOn = colorFingerOn;this.mColorFingerUp = colorFingerUp;mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mArrowPath = new Path();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);mWidth = MeasureSpec.getSize(widthMeasureSpec);mHeight = MeasureSpec.getSize(heightMeasureSpec);// 取長(zhǎng)和寬中的小值mWidth = mWidth < mHeight ? mWidth : mHeight;mRadius = mCenterX = mCenterY = mWidth / 2;mRadius -= mStrokeWidth / 2;// 繪制三角形，初始時(shí)是個(gè)默認(rèn)箭頭朝上的一個(gè)等腰三角形，用戶繪制結(jié)束后，根據(jù)由兩個(gè)GestureLockView決定需要旋轉(zhuǎn)多少度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);}@Overrideprotected void onDraw(Canvas canvas){switch (mCurrentStatus){case STATUS_FINGER_ON:// 繪制外圓mPaint.setStyle(Style.STROKE);mPaint.setColor(mColorFingerOn);mPaint.setStrokeWidth(2);canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);// 繪制內(nèi)圓mPaint.setStyle(Style.FILL);canvas.drawCircle(mCenterX, mCenterY, mRadius* mInnerCircleRadiusRate, mPaint);break;case STATUS_FINGER_UP:// 繪制外圓mPaint.setColor(mColorFingerUp);mPaint.setStyle(Style.STROKE);mPaint.setStrokeWidth(2);canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);// 繪制內(nèi)圓mPaint.setStyle(Style.FILL);canvas.drawCircle(mCenterX, mCenterY, mRadius* mInnerCircleRadiusRate, mPaint);drawArrow(canvas);break;case STATUS_NO_FINGER:// 繪制外圓mPaint.setStyle(Style.FILL);mPaint.setColor(mColorNoFingerOutter);canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);// 繪制內(nèi)圓mPaint.setColor(mColorNoFingerInner);canvas.drawCircle(mCenterX, mCenterY, mRadius* mInnerCircleRadiusRate, mPaint);break;}}/*** 繪制箭頭* @param canvas*/private void drawArrow(Canvas canvas){if (mArrowDegree != -1){mPaint.setStyle(Paint.Style.FILL);canvas.save();canvas.rotate(mArrowDegree, mCenterX, mCenterY);canvas.drawPath(mArrowPath, mPaint);canvas.restore();}}/*** 設(shè)置當(dāng)前模式并重繪界面* * @param mode*/public void setMode(Mode mode){this.mCurrentStatus = mode;invalidate();}public void setArrowDegree(int degree){this.mArrowDegree = degree;}public int getArrowDegree(){return this.mArrowDegree;} }

GestureLockViewGroup

package com.zhy.zhy_gesturelockview.view;import java.util.ArrayList; import java.util.List;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.graphics.Point; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.widget.RelativeLayout;import com.zhy.zhy_gesturelockview.R; import com.zhy.zhy_gesturelockview.view.GestureLockView.Mode;/*** 整體包含n*n個(gè)GestureLockView,每個(gè)GestureLockView間間隔mMarginBetweenLockView，* 最外層的GestureLockView與容器存在mMarginBetweenLockView的外邊距* * 關(guān)于GestureLockView的邊長(zhǎng)（n*n）： n * mGestureLockViewWidth + ( n + 1 ) ** mMarginBetweenLockView = mWidth ; 得：mGestureLockViewWidth = 4 * mWidth / ( 5* * mCount + 1 ) 注：mMarginBetweenLockView = mGestureLockViewWidth * 0.25 ;* * @author zhy* */ public class GestureLockViewGroup extends RelativeLayout {private static final String TAG = "GestureLockViewGroup";/*** 保存所有的GestureLockView*/private GestureLockView[] mGestureLockViews;/*** 每個(gè)邊上的GestureLockView的個(gè)數(shù)*/private int mCount = 3;/*** 存儲(chǔ)答案*/private int[] mAnswer = { 0, 1, 2, 5, 8 };/*** 保存用戶選中的GestureLockView的id*/private List<Integer> mChoose = new ArrayList<Integer>();private Paint mPaint;/*** 每個(gè)GestureLockView中間的間距 設(shè)置為：mGestureLockViewWidth * 25%*/private int mMarginBetweenLockView = 30;/*** GestureLockView的邊長(zhǎng) 4 * mWidth / ( 5 * mCount + 1 )*/private int mGestureLockViewWidth;/*** GestureLockView無(wú)手指觸摸的狀態(tài)下內(nèi)圓的顏色*/private int mNoFingerInnerCircleColor = 0xFF939090;/*** GestureLockView無(wú)手指觸摸的狀態(tài)下外圓的顏色*/private int mNoFingerOuterCircleColor = 0xFFE0DBDB;/*** GestureLockView手指觸摸的狀態(tài)下內(nèi)圓和外圓的顏色*/private int mFingerOnColor = 0xFF378FC9;/*** GestureLockView手指抬起的狀態(tài)下內(nèi)圓和外圓的顏色*/private int mFingerUpColor = 0xFFFF0000;/*** 寬度*/private int mWidth;/*** 高度*/private int mHeight;private Path mPath;/*** 指引線的開(kāi)始位置x*/private int mLastPathX;/*** 指引線的開(kāi)始位置y*/private int mLastPathY;/*** 指引下的結(jié)束位置*/private Point mTmpTarget = new Point();/*** 最大嘗試次數(shù)*/private int mTryTimes = 4;/*** 回調(diào)接口*/private OnGestureLockViewListener mOnGestureLockViewListener;public GestureLockViewGroup(Context context, AttributeSet attrs){this(context, attrs, 0);}public GestureLockViewGroup(Context context, AttributeSet attrs,int defStyle){super(context, attrs, defStyle);/*** 獲得所有自定義的參數(shù)的值*/TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.GestureLockViewGroup, defStyle, 0);int n = a.getIndexCount();for (int i = 0; i < n; i++){int attr = a.getIndex(i);switch (attr){case R.styleable.GestureLockViewGroup_color_no_finger_inner_circle:mNoFingerInnerCircleColor = a.getColor(attr,mNoFingerInnerCircleColor);break;case R.styleable.GestureLockViewGroup_color_no_finger_outer_circle:mNoFingerOuterCircleColor = a.getColor(attr,mNoFingerOuterCircleColor);break;case R.styleable.GestureLockViewGroup_color_finger_on:mFingerOnColor = a.getColor(attr, mFingerOnColor);break;case R.styleable.GestureLockViewGroup_color_finger_up:mFingerUpColor = a.getColor(attr, mFingerUpColor);break;case R.styleable.GestureLockViewGroup_count:mCount = a.getInt(attr, 3);break;case R.styleable.GestureLockViewGroup_tryTimes:mTryTimes = a.getInt(attr, 5);default:break;}}a.recycle();// 初始化畫(huà)筆mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setStyle(Paint.Style.STROKE);// mPaint.setStrokeWidth(20);mPaint.setStrokeCap(Paint.Cap.ROUND);mPaint.setStrokeJoin(Paint.Join.ROUND);// mPaint.setColor(Color.parseColor("#aaffffff"));mPath = new Path();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);mWidth = MeasureSpec.getSize(widthMeasureSpec);mHeight = MeasureSpec.getSize(heightMeasureSpec);// Log.e(TAG, mWidth + "");// Log.e(TAG, mHeight + "");mHeight = mWidth = mWidth < mHeight ? mWidth : mHeight;// setMeasuredDimension(mWidth, mHeight);// 初始化mGestureLockViewsif (mGestureLockViews == null){mGestureLockViews = new GestureLockView[mCount * mCount];// 計(jì)算每個(gè)GestureLockView的寬度mGestureLockViewWidth = (int) (4 * mWidth * 1.0f / (5 * mCount + 1));//計(jì)算每個(gè)GestureLockView的間距mMarginBetweenLockView = (int) (mGestureLockViewWidth * 0.25);// 設(shè)置畫(huà)筆的寬度為GestureLockView的內(nèi)圓直徑稍微小點(diǎn)（不喜歡的話，隨便設(shè)）mPaint.setStrokeWidth(mGestureLockViewWidth * 0.29f);for (int i = 0; i < mGestureLockViews.length; i++){//初始化每個(gè)GestureLockViewmGestureLockViews[i] = new GestureLockView(getContext(),mNoFingerInnerCircleColor, mNoFingerOuterCircleColor,mFingerOnColor, mFingerUpColor);mGestureLockViews[i].setId(i + 1);//設(shè)置參數(shù)，主要是定位GestureLockView間的位置RelativeLayout.LayoutParams lockerParams = new RelativeLayout.LayoutParams(mGestureLockViewWidth, mGestureLockViewWidth);// 不是每行的第一個(gè)，則設(shè)置位置為前一個(gè)的右邊if (i % mCount != 0){lockerParams.addRule(RelativeLayout.RIGHT_OF,mGestureLockViews[i - 1].getId());}// 從第二行開(kāi)始，設(shè)置為上一行同一位置View的下面if (i > mCount - 1){lockerParams.addRule(RelativeLayout.BELOW,mGestureLockViews[i - mCount].getId());}//設(shè)置右下左上的邊距int rightMargin = mMarginBetweenLockView;int bottomMargin = mMarginBetweenLockView;int leftMagin = 0;int topMargin = 0;/*** 每個(gè)View都有右外邊距和底外邊距 第一行的有上外邊距 第一列的有左外邊距*/if (i >= 0 && i < mCount)// 第一行{topMargin = mMarginBetweenLockView;}if (i % mCount == 0)// 第一列{leftMagin = mMarginBetweenLockView;}lockerParams.setMargins(leftMagin, topMargin, rightMargin,bottomMargin);mGestureLockViews[i].setMode(Mode.STATUS_NO_FINGER);addView(mGestureLockViews[i], lockerParams);}Log.e(TAG, "mWidth = " + mWidth + " , mGestureViewWidth = "+ mGestureLockViewWidth + " , mMarginBetweenLockView = "+ mMarginBetweenLockView);}}@Overridepublic boolean onTouchEvent(MotionEvent event){int action = event.getAction();int x = (int) event.getX();int y = (int) event.getY();switch (action){case MotionEvent.ACTION_DOWN:// 重置reset();break;case MotionEvent.ACTION_MOVE:mPaint.setColor(mFingerOnColor);mPaint.setAlpha(50);GestureLockView child = getChildIdByPos(x, y);if (child != null){int cId = child.getId();if (!mChoose.contains(cId)){mChoose.add(cId);child.setMode(Mode.STATUS_FINGER_ON);if (mOnGestureLockViewListener != null)mOnGestureLockViewListener.onBlockSelected(cId);// 設(shè)置指引線的起點(diǎn)mLastPathX = child.getLeft() / 2 + child.getRight() / 2;mLastPathY = child.getTop() / 2 + child.getBottom() / 2;if (mChoose.size() == 1)// 當(dāng)前添加為第一個(gè){mPath.moveTo(mLastPathX, mLastPathY);} else// 非第一個(gè)，將兩者使用線連上{mPath.lineTo(mLastPathX, mLastPathY);}}}// 指引線的終點(diǎn)mTmpTarget.x = x;mTmpTarget.y = y;break;case MotionEvent.ACTION_UP:mPaint.setColor(mFingerUpColor);mPaint.setAlpha(50);this.mTryTimes--;// 回調(diào)是否成功if (mOnGestureLockViewListener != null && mChoose.size() > 0){mOnGestureLockViewListener.onGestureEvent(checkAnswer());if (this.mTryTimes == 0){mOnGestureLockViewListener.onUnmatchedExceedBoundary();}}Log.e(TAG, "mUnMatchExceedBoundary = " + mTryTimes);Log.e(TAG, "mChoose = " + mChoose);// 將終點(diǎn)設(shè)置位置為起點(diǎn)，即取消指引線mTmpTarget.x = mLastPathX;mTmpTarget.y = mLastPathY;// 改變子元素的狀態(tài)為UPchangeItemMode();// 計(jì)算每個(gè)元素中箭頭需要旋轉(zhuǎn)的角度for (int i = 0; i + 1 < mChoose.size(); i++){int childId = mChoose.get(i);int nextChildId = mChoose.get(i + 1);GestureLockView startChild = (GestureLockView) findViewById(childId);GestureLockView nextChild = (GestureLockView) findViewById(nextChildId);int dx = nextChild.getLeft() - startChild.getLeft();int dy = nextChild.getTop() - startChild.getTop();// 計(jì)算角度int angle = (int) Math.toDegrees(Math.atan2(dy, dx)) + 90;startChild.setArrowDegree(angle);}//reset();break;}invalidate();return true;}private void changeItemMode(){for (GestureLockView gestureLockView : mGestureLockViews){if (mChoose.contains(gestureLockView.getId())){gestureLockView.setMode(Mode.STATUS_FINGER_UP);}}}/*** * 做一些必要的重置*/private void reset(){mChoose.clear();mPath.reset();for (GestureLockView gestureLockView : mGestureLockViews){gestureLockView.setMode(Mode.STATUS_NO_FINGER);gestureLockView.setArrowDegree(-1);}}/*** 檢查用戶繪制的手勢(shì)是否正確* @return*/private boolean checkAnswer(){if (mAnswer.length != mChoose.size())return false;for (int i = 0; i < mAnswer.length; i++){if (mAnswer[i] != mChoose.get(i))return false;}return true;}/*** 檢查當(dāng)前左邊是否在child中* @param child* @param x* @param y* @return*/private boolean checkPositionInChild(View child, int x, int y){//設(shè)置了內(nèi)邊距，即x,y必須落入下GestureLockView的內(nèi)部中間的小區(qū)域中，可以通過(guò)調(diào)整padding使得x,y落入范圍不變大，或者不設(shè)置paddingint 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;}/*** 通過(guò)x,y獲得落入的GestureLockView* @param x* @param y* @return*/private GestureLockView getChildIdByPos(int x, int y){for (GestureLockView gestureLockView : mGestureLockViews){if (checkPositionInChild(gestureLockView, x, y)){return gestureLockView;}}return null;}/*** 設(shè)置回調(diào)接口* * @param listener*/public void setOnGestureLockViewListener(OnGestureLockViewListener listener){this.mOnGestureLockViewListener = listener;}/*** 對(duì)外公布設(shè)置答案的方法* * @param answer*/public void setAnswer(int[] answer){this.mAnswer = answer;}/*** 設(shè)置最大實(shí)驗(yàn)次數(shù)* * @param boundary*/public void setUnMatchExceedBoundary(int boundary){this.mTryTimes = boundary;}@Overridepublic 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);}}public interface OnGestureLockViewListener{/*** 單獨(dú)選中元素的Id* * @param position*/public void onBlockSelected(int cId);/*** 是否匹配* * @param matched*/public void onGestureEvent(boolean matched);/*** 超過(guò)嘗試次數(shù)*/public void onUnmatchedExceedBoundary();} }

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.zhy_gesturelockview"android:layout_width="match_parent"android:layout_height="match_parent" ><com.zhy.zhy_gesturelockview.view.GestureLockViewGroup android:id="@+id/id_gestureLockViewGroup"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F2F2F7"android:gravity="center_vertical"zhy:count="3"zhy:tryTimes="5" /> <!-- zhy:color_no_finger_inner_circle="#ff085D58"zhy:color_no_finger_outer_circle="#ff08F0E0"zhy:color_finger_on="#FF1734BF" --></RelativeLayout>

調(diào)用

package com.zhy.zhy_gesturelockview;import android.app.Activity; import android.os.Bundle; import android.widget.Toast;import com.zhy.zhy_gesturelockview.view.GestureLockViewGroup; import com.zhy.zhy_gesturelockview.view.GestureLockViewGroup.OnGestureLockViewListener;public class MainActivity extends Activity {private GestureLockViewGroup mGestureLockViewGroup;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mGestureLockViewGroup = (GestureLockViewGroup) findViewById(R.id.id_gestureLockViewGroup);mGestureLockViewGroup.setAnswer(new int[] { 1, 2, 3 });mGestureLockViewGroup.setOnGestureLockViewListener(new OnGestureLockViewListener(){@Overridepublic void onUnmatchedExceedBoundary(){Toast.makeText(MainActivity.this, "錯(cuò)誤5次...",Toast.LENGTH_SHORT).show();mGestureLockViewGroup.setUnMatchExceedBoundary(5);}@Overridepublic void onGestureEvent(boolean matched){Toast.makeText(MainActivity.this, matched+"",Toast.LENGTH_SHORT).show();}@Overridepublic void onBlockSelected(int cId){}});}}

ondraw() 和dispatchdraw（）的區(qū)別

本文中用到了dispatchdraw,
繪制VIew本身的內(nèi)容，通過(guò)調(diào)用View.onDraw(canvas)函數(shù)實(shí)現(xiàn)

繪制自己的孩子通過(guò)dispatchDraw（canvas）實(shí)現(xiàn)

參考鏈接

ondraw() 和dispatchdraw（）的區(qū)別 - scorplopan的專(zhuān)欄 - 博客頻道 - CSDN.NET

在計(jì)算箭頭應(yīng)該轉(zhuǎn)化的角度時(shí)用到了atan2

atan2 返回的是方位角，也可以理解為計(jì)算復(fù)數(shù) x+yi 的輻角

參考鏈接

atan2_百度百科

本文主要參考鏈接

Android 手勢(shì)鎖的實(shí)現(xiàn) 讓自己的應(yīng)用更加安全吧 - Hongyang - 博客頻道 - CSDN.NET

源代碼下載

源代碼下載

完成

總結(jié)

以上是生活随笔為你收集整理的Android手势锁实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。