9宫格解锁 android_android开发图案解锁学习记录一（九宫格的绘制）

图案解锁的原理：

九宫格解锁故名思议就是要有九个宫格；然后宫格间进行连线。

首先我们要先绘制九个点(宫格)，确定位置，然后绘制不同的图案。

图案分为不同的状态：正常的状态，按下时的状态和错误的状态

当用户进行绘制时，会根据用户的行为来给他对应的提醒，如果用户输入过短、或者输错，进行提示。如果用户输入正确，将图案转换成一种密码保存。

绘制过程：

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

for(int j = 0;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);//绘制点到画布