Android实现九宫格解锁的方法

相信大家都有使用九宫格解锁,比如在设置手机安全项目中,可以使用九宫格解锁,提高安全性,以及在使用支付功能的时候,为了提高安全使用九宫锁,今天就为大家介绍Android实现九宫格的方法,分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

布局文件如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context=".MainActivity" >

  <com.xuliugen.jiugongge.SudokuView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

</RelativeLayout>

从布局文件中可以看出需要自定义一个View用于绘制九宫格图案:
SudokuView.java

package com.xuliugen.jiugongge;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

public class SudokuView extends View {

  private static final int DEFALUT_CELL_WIDTH = 60; //默认的cell宽度
  private static final int DEFALUT_CELL_STROKE_WIDTH = 2;
  private static final int DEFALUT_SPACE = DEFALUT_CELL_WIDTH >> 1;

  private Cell mCells[] = new Cell[9]; // 九宫格:定义用于存放九个数组

  private int mCellWidth;
  private int mCellRadius;
  private int mCellStrokeWidth;
  private int mSpace;

  private Paint mPaintNormal;
  private Paint mPaintSelected;
  private int mWidth;
  private int mHeight;

  private float mCurrentX;
  private float mCurrentY;
  private boolean mFinish = false;

  private StringBuffer mSbSelected = new StringBuffer(20);

  /**
   * 下边是三个构造方法:每一个构造方法中有一个初始化操作
   */
  public SudokuView(Context context) {
    super(context);
    init();
  }

  public SudokuView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  public SudokuView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  /**
   * 初始化操作
   */
  private void init() {
    mCellWidth = DensityUtil.dip2px(getContext(), DEFALUT_CELL_WIDTH);
    mCellRadius = DensityUtil.dip2px(getContext(), DEFALUT_CELL_WIDTH >> 1);
    mCellStrokeWidth = DensityUtil.dip2px(getContext(),
        DEFALUT_CELL_STROKE_WIDTH);
    mSpace = DensityUtil.dip2px(getContext(), DEFALUT_SPACE);

    mPaintNormal = new Paint();
    mPaintNormal.setColor(Color.WHITE);
    mPaintNormal.setStrokeWidth(mCellStrokeWidth);
    mPaintNormal.setStyle(Paint.Style.STROKE);
    mPaintNormal.setAntiAlias(true);

    mPaintSelected = new Paint();
    mPaintSelected.setColor(Color.CYAN);
    mPaintSelected.setStrokeWidth(mCellStrokeWidth);
    mPaintSelected.setStyle(Paint.Style.STROKE);
    mPaintSelected.setAntiAlias(true);

    Cell cell;
    float x;
    float y;

    for (int i = 0; i < 9; i++) {
      x = mSpace * (i % 3 + 1) + mCellRadius + mCellWidth * (i % 3);
      y = mSpace * (i / 3 + 1) + mCellRadius + mCellWidth * (i / 3);

      cell = new Cell(x, y);
      mCells[i] = cell;
    }
  }

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

  private void drawCell(Canvas canvas) {
    for (int i = 0; i < 9; i++) {
      canvas.drawCircle(mCells[i].getCenterX(), mCells[i].getCenterY(),
          mCellRadius, mCells[i].isSelected() ? mPaintSelected
              : mPaintNormal);
    }
  }

  private void drawLine(Canvas canvas) {
    if ("".equals(mSbSelected.toString())) {
      return;
    }

    String[] selectedIndexs = mSbSelected.toString().split(",");
    Cell cell = mCells[Integer.valueOf(selectedIndexs[0])];
    Cell nextCell;
    if (selectedIndexs.length > 1) {
      for (int i = 1; i < selectedIndexs.length; i++) {
        nextCell = mCells[Integer.valueOf(selectedIndexs[i])];
        canvas.drawLine(cell.getCenterX(), cell.getCenterY(),
            nextCell.getCenterX(), nextCell.getCenterY(),
            mPaintSelected);

        cell = nextCell;
      }
    }

    if (!mFinish) {
      canvas.drawLine(cell.getCenterX(), cell.getCenterY(), mCurrentX,
          mCurrentY, mPaintSelected);
    }
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    mWidth = getRealSize(widthMeasureSpec);
    mHeight = getRealSize(heightMeasureSpec);

    setMeasuredDimension(mWidth, mWidth);
  }

  private int getRealSize(int measureSpc) {
    int result;
    int mode = MeasureSpec.getMode(measureSpc);
    int size = MeasureSpec.getSize(measureSpc);

    if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
      result = mCellWidth * 3 + mSpace * 4;
    } else {
      result = size;
    }

    return result;
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {

    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
      if (mFinish) {
        for (int i = 0; i < 9; i++) {
          mCells[i].setSelected(false);
        }
        mFinish = false;
        mSbSelected.delete(0, mSbSelected.length());
        invalidate();
        return false;
      }
      handleDownEvent(event);
      break;
    case MotionEvent.ACTION_UP:
      mFinish = true;
      Toast.makeText(getContext(), mSbSelected.toString(),
          Toast.LENGTH_SHORT).show();
      break;
    case MotionEvent.ACTION_MOVE:
      handleMoveEvent(event);
      break;
    }

    return true;
  }

  private void handleMoveEvent(MotionEvent event) {
    int index = findCellIndex(event.getX(), event.getY());
    if (index != -1) {
      mCells[index].setSelected(true);
      mSbSelected.append(index).append(",");
    }
    invalidate();

    mCurrentX = event.getX();
    mCurrentY = event.getY();
  }

  private void handleDownEvent(MotionEvent event) {
    int index = findCellIndex(event.getX(), event.getY());
    if (index != -1) {
      mCells[index].setSelected(true);
      mSbSelected.append(index).append(",");
      invalidate();
    }

    mCurrentX = event.getX();
    mCurrentY = event.getY();
  }

  private int findCellIndex(float x, float y) {
    float cellX;
    float cellY;
    int result = -1;

    for (int i = 0; i < 9; i++) {
      if (mCells[i].isSelected()) {
        continue;
      }

      cellX = mCells[i].getCenterX();
      cellY = mCells[i].getCenterY();

      float tempX = cellX - x;
      float tempY = cellY - y;

      float distance = (float) Math.sqrt(tempX * tempX + tempY * tempY);

      if (distance < mCellRadius) {
        result = i;
        break;
      }
    }

    return result;
  }
}

MainActivity.java如下:

package com.xuliugen.jiugongge;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.action_settings) {
      return true;
    }
    return super.onOptionsItemSelected(item);
  }
}

另外还需要一个存放圆圈的Javabean

package com.xuliugen.jiugongge;

/**
 * 代表每一个九宫格圆圈的Javabean
 * @author xuliugenpc
 */
public class Cell {
  private float centerX;
  private float centerY;
  private boolean selected;

  public Cell(float x, float y) {
    centerX = x;
    centerY = y;
  }

  public float getCenterX() {
    return centerX;
  }

  public void setCenterX(float centerX) {
    this.centerX = centerX;
  }

  public float getCenterY() {
    return centerY;
  }

  public void setCenterY(float centerY) {
    this.centerY = centerY;
  }

  public boolean isSelected() {
    return selected;
  }

  public void setSelected(boolean selected) {
    this.selected = selected;
  }
}

像素转换的工具类:

package com.xuliugen.jiugongge;

import android.content.Context;
/**
 * 手机屏幕px转dp和dp转px工具类
 * @author xuliugenpc
 */
public class DensityUtil {

  private static float scale;

  /**
   * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
   */
  public static int dip2px(Context context, float dpValue) {
    if (scale == 0) {
      scale = context.getResources().getDisplayMetrics().density;
    }
    return (int) (dpValue * scale + 0.5f);
  }

  /**
   * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
   */
  public static int px2dip(Context context, float pxValue) {
    if (scale == 0) {
      scale = context.getResources().getDisplayMetrics().density;
    }
    return (int) (pxValue / scale + 0.5f);
  }
}

以上就是Android实现九宫格解锁的方法,希望本文所述对大家学习有所帮助。

时间: 2015-12-07

android 九宫格滑动解锁开机实例源码学习

效果图由于网站占时不能上传,以后补上. NinePointLineView.java 复制代码 代码如下: package org.demo.custon_view; import org.demo.utils.MLog; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; imp

Android 仿小米锁屏实现九宫格解锁功能(无需图片资源)

最近公司要求做个九宫格解锁,本人用的是小米手机,看着他那个设置锁屏九宫格很好看,就做了该组件,不使用图片资源,纯代码实现. 尊重每个辛苦的博主,在http://blog.csdn.net/mu399/article/details/38734449的基础上进行修改 效果图: 关键代码类: MathUtil.Java /** * @author SoBan * @create 2016/12/5 15:52. */ public class MathUtil { public static dou

轻松实现安卓(Android)九宫格解锁

效果图 思路 首先我们来分析一下实现九宫格解锁的思路:当用户的手指触摸到某一个点时,先判断该点是否在九宫格的某一格范围之内,若在范围内,则该格变成选中的状态:之后用户手指滑动的时候,以该格的圆心为中心,用户手指为终点,两点连线.最后当用户手指抬起时,判断划过的九宫格密码是否和原先的密码匹配. 大致的思路流程就是上面这样的了,下面我们可以来实践一下. Point 类 我们先来创建一个 Point 类,用来表示九宫格锁的九个格子.除了坐标 x ,y 之外,还有三种模式:正常模式.按下模式和错误模式.

轻松实现Android自定义九宫格图案解锁

Android实现九宫格图案解锁,自带将图案转化成数字密码的功能,代码如下: LockPatternView.java package com.jackie.lockpattern; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Point; import android.text.TextUtils; i

Android自定义控件实现九宫格解锁功能

最终Android九宫格解锁效果如下 1.进行定义实体point点 public class Point { private float x; private float y; //正常模式 public static final int NORMAL_MODE = 1; //按下模式 public static final int PRESSED_MODE = 2; //错误模式 public static final int ERROR_MODE = 3; private int state

使用Android自定义控件实现滑动解锁九宫格

本文概述:  滑动解锁九宫格的分析: 1.需要自定义控件: 2.需要重写事件onTouchEvent(); 3.需要给九个点设置序号和坐标,这里用Map类就行: 4.需要判断是否到滑到过九点之一,并存储滑到过的点的序号,而且需要一个方法可以返回它们,这里用List类就行: 滑动解锁当前还是比较流行的,今天写了个简单的滑动解锁九宫格的例程,分享出来让初学者看看. 我的是这样的: Demo 首先,自定义一个View /** * 九宫格 */ public class NineGridView ext

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

当年感觉九宫格解锁很是高大上,一脸懵逼,今天正好要做解锁这一块业务,回头来看九宫格,这特么简单啊 首先理清一下逻辑,我们要做NxN的九宫格 下图是3x3的简单图例 // -(--)-(--)-(--)- // -(--)-(--)-(--)- // -(--)-(--)-(--)- 我们就把九宫格分解成 外圆 .内圆.连线三部分 外圆半径Radius,内圆半径dp(5) 建立一个集合来放置 外圆的圆心( 内圆的圆心也一样) private ArrayList<Point> mListCircl

Android 手势 正则匹配图片实例代码

为没有手势的控件(ViewFlipper) 添加手势 xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools

Android自定义手机界面状态栏实例代码

前言 我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现这个效果有两个方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActi

Android 底部导航控件实例代码

一.先给大家展示下最终效果 通过以上可以看到,图一是简单的使用,图二.图三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是图二为选中非选中两张图片,图三的选中非选中是一张图片只是做了颜色变化. 二. 需求 我们希望做可以做成这样的,可以在xml布局中引入控件并绑定数据,在代码中设置监听回调,并且配置使用要非常简单! 三.需求分析 根据我们多年做不明确需求项目的经验,以上需求还算明确.那么我们可以采用在LinearLayout添加子View控件,这个子Vie

Android Dialog详解及实例代码

 Android Dialog详解及实例代码 概述: Android开发中最常用的就是Dialog类,除了自定义dialog布局,最多的就是用在弹出对话框.进度条.输入框.单选.复选框. 1.选择对话框: AlertDialog.Builder dialog = new AlertDialog.Builder(this); dialog.setTitle("选择对话框"); dialog.setMessage("请选择确认或取消"); dialog.setCance

Android sd卡读取数据库实例代码

Android sd卡读取数据库实例代码 前言: 本文主要给大家讲解如何利用Android SD卡读取数据库,提供一些代码如下.先在 Manifest 里添加权限: <span style="font-size:16px;"><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name=

Android okhttputils现在进度显示实例代码

OkHttpUtils是一款封装了okhttp的网络框架,支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数一起上传),链式调用,整合Gson,自动解析返回对象,支持Https和自签名证书,支持cookie自动管理,扩展了统一的上传管理和下载管理功能. //download the new app private void downLoadNewApp(NewVersion.XianzaishiRfBean version) { if (StringUtils.isEmpt

Android DrawerLayout实现抽屉效果实例代码

官网:https://developer.android.com/training/implementing-navigation/nav-drawer.html 贴上主要的逻辑和布局文件: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schema

Android中复制图片的实例代码

activity_main.xml中的配置 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent&quo