超实用的Android手势锁制作实例教程

今天偶遇以github上gesturelock关于手势锁的一个例子（有兴趣的去搜索下看看），于是下载下来研究，无奈基本没有注释，代码上存在一些问题(当设置gravity=center_vertical无法进行手势选择，无意中发现的)，于是借鉴这位仁兄的代码，自己重写写了一个，修复了一些问题，加入一些基本的自定义属性，在此先感谢这位兄弟~。
先上图，默认效果图：

当然可以自定义数量啊，颜色神马的，自定义效果图：

如果你有艺术细胞，可以给我推荐几个颜色，无奈个人审美有问题~

1、整体思路
a、自定义了一个RelativeLayout(GestureLockViewGroup)在里面会根据传入的每行的个数，生成多个GestureLockView（就是上面一个个小圈圈），然后会自动进行布局，里面的宽度，间距，内圆的直径，箭头的大小神马的都是百分比实现的，所以大胆的设置你喜欢的个数，只要你没有密集恐惧症~
b、GestureLockView有三个状态，没有手指触碰、手指触碰、和手指抬起，会根据这三个状态绘制不同的效果，以及抬起时的小箭头需要旋转的角度，会根据用户选择的GestureLockView，进行计算，在GestureLockViewGroup为每个GestureLockView设置
c、GestureLockViewGroup主要就是判断用户ACTION_MOVE，ACTION_DOWN ， ACTION_UP时改变选中的GestureLockView的状态，并且记录下来，提供一定的回调。
下面开始看代码：

2、声明一些用户可以设置的属性：

<?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> 

用户可以用过在xml文件中设置这些属性，改变外观，最多尝试次数以及数量等。

3、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"; 
   
  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; 
   
  private float mArrowRate = 0.333f; 
  private int mArrowDegree = -1; 
  private Path mArrowPath; 
   
  private float mInnerCircleRadiusRate = 0.3F; 
   
  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(); 
  } 
  @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(mColorFingerOn); 
      mPaint.setStrokeWidth(2); 
      canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint); 
      // 绘制内圆 
      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); 
      // 绘制内圆 
      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); 
      // 绘制内圆 
      mPaint.setColor(mColorNoFingerInner); 
      canvas.drawCircle(mCenterX, mCenterY, mRadius 
          * mInnerCircleRadiusRate, mPaint); 
      break; 
    } 
  } 
   
  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(); 
    } 
  } 
   
  public void setMode(Mode mode) 
  { 
    this.mCurrentStatus = mode; 
    invalidate(); 
  } 
  public void setArrowDegree(int degree) 
  { 
    this.mArrowDegree = degree; 
  } 
  public int getArrowDegree() 
  { 
    return this.mArrowDegree; 
  } 
} 

注释很详细，主要就是onDraw时，判断当前状态，绘制不同的显示效果；状态的改变都是GestureLockViewGroup的onTouchEvent中设置的。

4、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; 
 
public class GestureLockViewGroup extends RelativeLayout 
{ 
  private static final String TAG = "GestureLockViewGroup"; 
   
  private GestureLockView[] mGestureLockViews; 
   
  private int mCount = 4; 
   
  private int[] mAnswer = { 0, 1, 2, 5, 8 }; 
   
  private List<Integer> mChoose = new ArrayList<Integer>(); 
  private Paint mPaint; 
   
  private int mMarginBetweenLockView = 30; 
   
  private int mGestureLockViewWidth; 
   
  private int mNoFingerInnerCircleColor = 0xFF939090; 
   
  private int mNoFingerOuterCircleColor = 0xFFE0DBDB; 
   
  private int mFingerOnColor = 0xFF378FC9; 
   
  private int mFingerUpColor = 0xFFFF0000; 
   
  private int mWidth; 
   
  private int mHeight; 
  private Path mPath; 
   
  private int mLastPathX; 
   
  private int mLastPathY; 
   
  private Point mTmpTarget = new Point(); 
   
  private int mTryTimes = 4; 
   
  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); 
     
    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(); 
    // 初始化画笔 
    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(); 
  } 
  @Override 
  protected 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); 
    // 初始化mGestureLockViews 
    if (mGestureLockViews == null) 
    { 
      mGestureLockViews = new GestureLockView[mCount * mCount]; 
      // 计算每个GestureLockView的宽度 
      mGestureLockViewWidth = (int) (4 * mWidth * 1.0f / (5 * mCount + 1)); 
      //计算每个GestureLockView的间距 
      mMarginBetweenLockView = (int) (mGestureLockViewWidth * 0.25); 
      // 设置画笔的宽度为GestureLockView的内圆直径稍微小点（不喜欢的话，随便设） 
      mPaint.setStrokeWidth(mGestureLockViewWidth * 0.29f); 
      for (int i = 0; i < mGestureLockViews.length; i++) 
      { 
        //初始化每个GestureLockView 
        mGestureLockViews[i] = new GestureLockView(getContext(), 
            mNoFingerInnerCircleColor, mNoFingerOuterCircleColor, 
            mFingerOnColor, mFingerUpColor); 
        mGestureLockViews[i].setId(i + 1); 
        //设置参数，主要是定位GestureLockView间的位置 
        RelativeLayout.LayoutParams lockerParams = new RelativeLayout.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 leftMagin = 0; 
        int topMargin = 0; 
         
        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); 
    } 
  } 
  @Override 
  public 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); 
          // 设置指引线的起点 
          mLastPathX = child.getLeft() / 2 + child.getRight() / 2; 
          mLastPathY = child.getTop() / 2 + child.getBottom() / 2; 
          if (mChoose.size() == 1)// 当前添加为第一个 
          { 
            mPath.moveTo(mLastPathX, mLastPathY); 
          } else 
          // 非第一个，将两者使用线连上 
          { 
            mPath.lineTo(mLastPathX, mLastPathY); 
          } 
        } 
      } 
      // 指引线的终点 
      mTmpTarget.x = x; 
      mTmpTarget.y = y; 
      break; 
    case MotionEvent.ACTION_UP: 
      mPaint.setColor(mFingerUpColor); 
      mPaint.setAlpha(50); 
      this.mTryTimes--; 
      // 回调是否成功 
      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); 
      // 将终点设置位置为起点，即取消指引线 
      mTmpTarget.x = mLastPathX; 
      mTmpTarget.y = mLastPathY; 
      // 改变子元素的状态为UP 
      changeItemMode(); 
      // 计算每个元素中箭头需要旋转的角度 
      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(); 
        // 计算角度 
        int angle = (int) Math.toDegrees(Math.atan2(dy, dx)) + 90; 
        startChild.setArrowDegree(angle); 
      } 
      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); 
    } 
  } 
   
  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; 
  } 
   
  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; 
  } 
   
  private GestureLockView getChildIdByPos(int x, int y) 
  { 
    for (GestureLockView gestureLockView : mGestureLockViews) 
    { 
      if (checkPositionInChild(gestureLockView, x, y)) 
      { 
        return gestureLockView; 
      } 
    } 
    return null; 
  } 
   
  public void setOnGestureLockViewListener(OnGestureLockViewListener listener) 
  { 
    this.mOnGestureLockViewListener = listener; 
  } 
   
  public void setAnswer(int[] answer) 
  { 
    this.mAnswer = answer; 
  } 
   
  public void setUnMatchExceedBoundary(int boundary) 
  { 
    this.mTryTimes = boundary; 
  } 
  @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); 
    } 
  } 
  public interface OnGestureLockViewListener 
  { 
     
    public void onBlockSelected(int cId); 
     
    public void onGestureEvent(boolean matched); 
     
    public void onUnmatchedExceedBoundary(); 
  } 
} 

注释极其详细，用极其不过分~主要就是onTouchEvent中对用户选择的GestureLockView进行判断，以及改变GestureLockView状态等。

5、布局文件

<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> 

有兴趣的可以自定义属性，把注释的代码添进去就行，当然你也可以什么都不设置，单纯设置宽度和高度，我觉得默认效果也是不错的 ~

6、调用

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; 
  @Override 
  protected 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, 4,5 }); 
    mGestureLockViewGroup 
        .setOnGestureLockViewListener(new OnGestureLockViewListener() 
        { 
          @Override 
          public void onUnmatchedExceedBoundary() 
          { 
            Toast.makeText(MainActivity.this, "错误5次...", 
                Toast.LENGTH_SHORT).show(); 
            mGestureLockViewGroup.setUnMatchExceedBoundary(5); 
          } 
          @Override 
          public void onGestureEvent(boolean matched) 
          { 
            Toast.makeText(MainActivity.this, matched+"", 
                Toast.LENGTH_SHORT).show(); 
          } 
          @Override 
          public void onBlockSelected(int cId) 
          { 
          } 
        }); 
  } 
} 

您可能感兴趣的文章:Android 5秒学会使用手势解锁功能Android 自定义九宫格手势锁Android利用手势完成屏幕密码锁功能Android仿支付宝手势密码解锁功能android自定义View实现手势解锁