图案解锁的原理：
九宫格解锁故名思议就是要有九个宫格；然后宫格间进行连线。
首先我们要先绘制九个点（宫格），确定位置，然后绘制不同的图案。
图案分为不同的状态：正常的状态，按下时的状态和错误的状态
当用户进行绘制时，会根据用户的行为来给他对应的提醒，如果用户输入过短、或者输错，进行提示。如果用户输入正确，将图案转换成一种密码保存。
绘制过程：
1.自定义点的状态
/**
* 自定义的点
*/
public static class Point{
//正常状态
public static int STATE_NOMAL = 0;
// 选中状态
public static int STATE_SELECT = 1;
// 错误状态
public static int STATE_ERROR = 2;
public float x,y;
public int index = 0,state = 0;
public Point(){
}
public Point(float x,float y){
this.x = x;
this.y = y;
}
}
2.在view中初始化point，添加图案资源
/**
* 初始化点
*/
private void initPoints() {
//获取布局的宽高
width = getWidth();
height = getHeight();
//判断屏幕横竖屏状态
if(width>height){//横屏状态
offsetsX = (width-height)/2;
width = height;
}else {//竖屏
offsetsY = (height-width)/2;
height = width;
}
//计算点的位置
points[0][0] = new Point(offsetsX+width/4,offsetsY+width/4);
points[0][1] = new Point(offsetsX+width/2,offsetsY+width/4);
points[0][2] = new Point(offsetsX+width-width/4,offsetsY+width/4);
points[1][0] = new Point(offsetsX+width/4,offsetsY+width/2);
points[1][1] = new Point(offsetsX+width/2,offsetsY+width/2);
points[1][2] = new Point(offsetsX+width-width/4,offsetsY+width/2);
points[2][0] = new Point(offsetsX+width/4,offsetsY+width-width/4);
points[2][1] = new Point(offsetsX+width/2,offsetsY+width-width/4);
points[2][2] = new Point(offsetsX+width-width/4,offsetsY+width-width/4);
//添加图案资源
pointNormal = BitmapFactory.decodeResource(getResources(), R.mipmap.point_normal);
pointPressed = BitmapFactory.decodeResource(getResources(), R.mipmap.point_pressed);
pointError = BitmapFactory.decodeResource(getResources(), R.mipmap.point_error);
// 连线图案
linePressed = BitmapFactory.decodeResource(getResources(), R.mipmap.point_pressed);
lineError = BitmapFactory.decodeResource(getResources(), R.mipmap.point_error);
}
3.绘制点到画布
/**
* 绘制点到画布
* @param canvas 画布
*/
private void canvasPoints(Canvas canvas) {
for (int i = 0;i<points.length;i++){
for(int j = 0;j<points[i].length;j++){
Point point = points[i][j];
if(point.state == Point.STATE_NORMAL){//正常状态
paint.setColor(Color.GREEN);
//调整画布的位置，因为在点的右下边开始画的图案，图案的中心并没有和点对齐，将图案向上和左偏移图案的半径（pointNormal.getwidth()/2）
canvas.drawBitmap(pointNormal,point.x-pointNormal.getWidth()/2,point.y-pointNormal.getWidth()/2,paint);
}else if(point.state == Point.STATE_PRESSED){//选中状态
canvas.drawBitmap(pointPressed,point.x,point.y,paint);
}else {//错误状态
canvas.drawBitmap(pointError,point.x,point.y,paint);
}
}
}
}
4.运行测试
6W$$XHM00XXL@$JZ88CI%DU.png
5.绘制九宫格的全部代码：
package com.zzj.lockviewdemo.views;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import com.zzj.lockviewdemo.R;
/**
* Created by zzj on 2016/11/15.
*/
public class LockView extends View {
//九宫格点的数组
private Point[][] points = new Point[3][3];
private boolean isInit;//是否初始化点
private int width,height,offsetsX,offsetsY;
//画笔
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap pointNormal,pointPressed,pointError,linePressed,lineError;
public LockView(Context context) {
super(context);
}
public LockView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public LockView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 重写ondraw
* @param canvas 画布
*/
@Override
protected void onDraw(Canvas canvas) {
if(!isInit){
initPoints();//初始化图案的点
}
canvasPoints(canvas);//绘制点到画布
}
/**
* 绘制点到画布
* @param canvas 画布
*/
private void canvasPoints(Canvas canvas) {
for (int i = 0;i<points.length;i++){
for(int j = 0;j<points[i].length;j++){
Point point = points[i][j];
if(point.state == Point.STATE_NORMAL){//正常状态
paint.setColor(Color.GREEN);
//调整画布的位置，因为在点的右下边开始画的图案，图案的中心并没有和点对齐，将图案向上和左偏移图案的半径（pointNormal.getwidth()/2）
canvas.drawBitmap(pointNormal,point.x-pointNormal.getWidth()/2,point.y-pointNormal.getWidth()/2,paint);
}else if(point.state == Point.STATE_PRESSED){//选中状态
canvas.drawBitmap(pointPressed,point.x,point.y,paint);
}else {//错误状态
canvas.drawBitmap(pointError,point.x,point.y,paint);
}
}
}
}
/**
* 初始化点
*/
private void initPoints() {
//获取布局的宽高
width = getWidth();
height = getHeight();
//判断屏幕横竖屏状态
if(width>height){//横屏状态
offsetsX = (width-height)/2;
width = height;
}else {//竖屏
offsetsY = (height-width)/2;
height = width;
}
//计算点的位置
points[0][0] = new Point(offsetsX+width/4,offsetsY+width/4);
points[0][1] = new Point(offsetsX+width/2,offsetsY+width/4);
points[0][2] = new Point(offsetsX+width-width/4,offsetsY+width/4);
points[1][0] = new Point(offsetsX+width/4,offsetsY+width/2);
points[1][1] = new Point(offsetsX+width/2,offsetsY+width/2);
points[1][2] = new Point(offsetsX+width-width/4,offsetsY+width/2);
points[2][0] = new Point(offsetsX+width/4,offsetsY+width-width/4);
points[2][1] = new Point(offsetsX+width/2,offsetsY+width-width/4);
points[2][2] = new Point(offsetsX+width-width/4,offsetsY+width-width/4);
//添加图案资源
pointNormal = BitmapFactory.decodeResource(getResources(), R.mipmap.point_normal);
pointPressed = BitmapFactory.decodeResource(getResources(), R.mipmap.point_pressed);
pointError = BitmapFactory.decodeResource(getResources(), R.mipmap.point_error);
// 连线图案
linePressed = BitmapFactory.decodeResource(getResources(), R.mipmap.point_pressed);
lineError = BitmapFactory.decodeResource(getResources(), R.mipmap.point_error);
}
/**
* 自定义的点
*/
public static class Point{
//正常状态
public static int STATE_NORMAL = 0;
// 选中状态
public static int STATE_PRESSED = 1;
// 错误状态
public static int STATE_ERROR = 2;
public float x,y;
public int index = 0,state = 0;
public Point(){
}
public Point(float x,float y){
this.x = x;
this.y = y;
}
}
}
有关文章：
android开发图案解锁学习记录二（九宫格间连线时的onTouchEvent事件的处理）：http://www.jianshu.com/p/931afdc0c1c3
android开发图案解锁学习记录三（设置图案监听）：http://www.jianshu.com/p/7ab2a8dea3b1
网友评论