Android实现九宫格解锁的实例代码

Android实现九宫格解锁的实例代码,第1张

概述当年感觉九宫格解锁很是高大上,一脸懵逼,今天正好要做解锁这一块业务,回头来看九宫格,这特么简单啊

当年感觉九宫格解锁很是高大上,一脸懵逼,今天正好要做解锁这一块业务,回头来看九宫格,这特么简单啊

首先理清一下逻辑,我们要做NxN的九宫格 下图是3x3的简单图例

// -(--)-(--)-(--)-
// -(--)-(--)-(--)-
// -(--)-(--)-(--)-

我们就把九宫格分解成

外圆 、内圆、连线三部分

外圆半径Radius,内圆半径dp(5)

建立一个集合来放置 外圆的圆心( 内圆的圆心也一样)

 private ArrayList<Point> mListCircle;//外圆的圆心 for (int i = 0; i < mCount; i++) {      for (int j = 0; j < mCount; j++) {        Point point = new Point((3 * i + 2) * (int) mRadius,(3 * j + 2) * (int) mRadius);        mListCircle.add(point);      }    }

这样我们就初始化好了内外圆的位置point集合

我们draw一下看一下效果

voID drawAll_Cicle(Canvas canvas) {    for (int i = 0; i < mListCircle.size(); i++) {      Point point = mListCircle.get(i);        canvas.drawCircle(point.x,point.y,mRadius,mPaint);        canvas.drawCircle(point.x,mMinRadius,miniPaint);    }

效果图就是上图了 (哈哈一样的)

主结构已经画完了,接下来就是如何绘制点与点之间的连线了,有人会觉得没思路,其实很简单了,以3X3 为例子哈
我们可以给这九个棋子编号1--9号,把他存入linkedHashSet中,着重介绍这个linkedHashSet有顺序不重复这个真的在合适不过了。

这样就不会有重复的事情了。这个和解锁时候的密码也很契合。所以选对了存储方式会事半功倍。

还有一个问题,就是点击边界问题,这个好解决,我们把每一个棋子都花矩形,通过圆来控制边界,(其实也可以通过矩形来控制边界,这个也很简单,原理是差不多的,有兴趣的同学可以下去试试)

同样也是用集合。和上边的圆是一样一样的。

ArrayList<RectF> mListRectFs;for (int i = 0; i < mCount; i++) {      for (int j = 0; j < mCount; j++) {        RectF rectF = new RectF((3 * i + 1) * mRadius,(3 * j + 1) * mRadius,(3 * i + 3) * mRadius,(3 * j + 3) * mRadius);        mListRectFs.add(rectF);      }    }

好边界也有了,我们来计算边界返回编号

/**   * 点和圆形碰撞检测   *   * @param x1   手指接触点   * @param y1   手指接触点   * @param x2   外圆   * @param y2   外圆   * @param radius 半径   * @return   */  private boolean isCollision(float x1,float y1,float x2,float y2,float radius) {    if (Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1 - y2,2)) <= radius) {      // 如果点和圆心距离小于或等于半径则认为发生碰撞      return true;    }    return false;  }/**   * 判断触摸点在哪个item上   *   * @param x   * @param y   * @return   */  private int touchIndex(float x,float y) {    for (int i = 0; i < mListCircle.size(); i++) {      Point p = mListCircle.get(i);      if (isCollision(x,y,p.x,p.y,mRadius)) {        return i;      }    }    return -1;  }

几个关键点都写到了接下来就是具体的细节了。我把代码都贴上来,注释的很详细。当然加入了一个手指触控点,更加好看一些。

import androID.content.Context;import androID.graphics.Canvas;import androID.graphics.color;import androID.graphics.Paint;import androID.graphics.Point;import androID.graphics.RectF;import androID.util.AttributeSet;import androID.util.Log;import androID.vIEw.HapticFeedbackConstants;import androID.vIEw.MotionEvent;import androID.vIEw.VIEw;import java.util.ArrayList;import java.util.linkedHashMap;import java.util.linkedHashSet;/** * Created by ld on 2017/7/25. */public class NineGrIDLockVIEw extends VIEw {  private Context context;  int index_point = 0;  private float mDensity;  private int mCount = 3;  private ArrayList<RectF> mListRectFs;//圆的外形矩形  private ArrayList<Point> mListCircle;//外圆的圆心  private linkedHashSet<Integer> mSetPoints;//记录需要连线的外圆圆心点在mListCircle中的索引值,linkedHashSet线性不可重复 集合,FIFO  private Paint mPaint,miniPaint;//画笔  private float mRadius;//外圆半径  private float mMinRadius;//内圆半径  private float mstrokeWIDth = 10; //绘制时的画笔宽度  private Point mMovePoint; //记录手指移动时的点  public NineGrIDLockVIEw(Context context) {    this(context,null);  }  public NineGrIDLockVIEw(Context context,AttributeSet attrs) {    super(context,attrs);    this.context = context;    mDensity = getContext().getResources().getdisplayMetrics().density;    mListRectFs = new ArrayList<>();    mListCircle = new ArrayList<>();    mPaint = new Paint();    mPaint.setstrokeWIDth(5);    mPaint.setStyle(Paint.Style.stroke);    mPaint.setAntiAlias(true);    mPaint.setcolor(color.BLUE);    miniPaint = new Paint();    miniPaint.setcolor(color.BLACK);    miniPaint.setAntiAlias(true);    miniPaint.setStyle(Paint.Style.stroke);    miniPaint.setstrokeWIDth(5);    mMinRadius = dp(5);    mSetPoints = new linkedHashSet<>();  }  @OverrIDe  protected voID onDraw(Canvas canvas) {    super.onDraw(canvas);    drawAll_Cicle(canvas);    draw_line(canvas);  }  private int dp(int dp) {    return (int) (dp * mDensity + 0.5f);  }  //绘制 连接线  voID draw_line(Canvas canvas) {    Point p1 = null;    Point p2 = null;    //从结合中获取 move过的点    for (int index : mSetPoints) {      //当第一个点为null的时候 给第一个点赋值      if (p1 == null) {        p1 = mListCircle.get(index);        //然后 给第二个点赋值 两点一条线      } else if (p2 == null) {        p2 = mListCircle.get(index);        canvas.drawline(p1.x,p1.y,p2.x,p2.y,mPaint);        //p1 挪到p2        p1 = p2;        //接下来就是第三个点了 乃至更多点      } else {        //p2重新赋值 两点一条线        p2 = mListCircle.get(index);        canvas.drawline(p1.x,mPaint);        //p1 挪到p2        p1 = p2;      }    }    //绘制实时连线    if (mMovePoint != null && p1 != null) {      canvas.drawline(p1.x,mMovePoint.x,mMovePoint.y,mPaint);    }  }  //绘制 外圆 内圆  voID drawAll_Cicle(Canvas canvas) {    for (int i = 0; i < mListRectFs.size(); i++) {      Point point = mListCircle.get(i);      //如果move过的 就换颜色      if (mSetPoints.contains(i)) {        canvas.drawCircle(point.x,miniPaint);        canvas.drawCircle(point.x,mPaint);      } else {        canvas.drawCircle(point.x,miniPaint);      }    }  }  @OverrIDe  protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {    super.onMeasure(wIDthMeasureSpec,heightmeasureSpec);    float w = Math.min(getMeasureDWIDth(),getMeasuredHeight());    //   -(--)-(--)-(--)-    //   -(--)-(--)-(--)-    //   -(--)-(--)-(--)-    mRadius = getMeasureDWIDth() * 1.00f / (mCount * 3 + 1);    float rectWH = mRadius * 2;    mListRectFs.clear();    mListCircle.clear();    for (int i = 0; i < mCount; i++) {      for (int j = 0; j < mCount; j++) {        RectF rectF = new RectF((3 * i + 1) * mRadius,(3 * j + 3) * mRadius);        mListRectFs.add(rectF);        Point point = new Point((3 * i + 2) * (int) mRadius,(3 * j + 2) * (int) mRadius);        mListCircle.add(point);      }    }  }  @OverrIDe  public boolean ontouchEvent(MotionEvent event) {    float point_x = event.getX();    float point_y = event.getY();    switch (event.getAction()) {      case MotionEvent.ACTION_DOWN:        break;      case MotionEvent.ACTION_UP:        mMovePoint = null;        mSetPoints.clear();        invalIDate();        break;      case MotionEvent.ACTION_MOVE:        int index = touchIndex(point_x,point_y);        if (mMovePoint == null) {          mMovePoint = new Point((int) point_x,(int) point_y);        } else {          mMovePoint.set((int) point_x,(int) point_y);        }        if (index != -1) {          mSetPoints.add(index);          if (index_point != mSetPoints.size()) {            index_point = mSetPoints.size();            performHapticFeedback(HapticFeedbackConstants.LONG_PRESS);          }        }        invalIDate();        break;    }    return true;  }  /**   * 判断触摸点在哪个item上   *   * @param x   * @param y   * @return   */  private int touchIndex(float x,mRadius)) {        return i;      }    }    return -1;  }  /**   * 点和圆形碰撞检测   *   * @param x1   手指接触点   * @param y1   手指接触点   * @param x2   外圆   * @param y2   外圆   * @param radius 半径   * @return   */  private boolean isCollision(float x1,2)) <= radius) {      // 如果点和圆心距离小于或等于半径则认为发生碰撞      return true;    }    return false;  }}

下一篇会把把应用锁和这个结合起来,就是appLock功能了。敬请期待・・・

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android实现九宫格解锁的实例代码全部内容,希望文章能够帮你解决Android实现九宫格解锁的实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1145522.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存