Android實作九宮格圖案解鎖
前言:自定義了一個九宮格的VIew來繪制九宮格圖案,實作了繪制圖案解鎖的功能。
效果圖如下:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQ3chVEa0V3bT9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVPrhUZzVjMi5mRtN2asNTWopESkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39jM0ADNwkjMxETMykDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
1. 第一步
自定義九宮格View。
public class LockPatterView extends View {
private static final int POINT_SIZE = ;
private Point[][] points = new Point[][];
private boolean isInit,isSelect,isFinish,movePoint;
private Matrix matrix = new Matrix();
private float width,height,offstartX,offstartY,moveX,moveY;;
private Bitmap bitmap_pressed,bitmap_normal,bitmap_error,bitmap_line,bitmap_line_error;
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private List<Point> pointList = new ArrayList<Point>();
private OnPatterChangeLister onPatterChangeLister;
public LockPatterView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public LockPatterView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public LockPatterView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
if (!isInit) {
initPoints();
}
points2Canvas(canvas);
if (pointList.size() > ) {
Point a = pointList.get();
for (int i = ; i < pointList.size(); i++) {
Point b = pointList.get(i);
line2Canvas(canvas, a, b);
a = b;
}
if (movePoint) {
line2Canvas(canvas, a, new Point(moveX, moveY));
}
}
}
/**
* @param canvas
*/
private void points2Canvas(Canvas canvas) {
for (int i = ; i < points.length; i++) {
for (int j = ; j < points[i].length; j++) {
Point point = points[i][j];
if (point.state == Point.STATE_PRESSED) {
canvas.drawBitmap(bitmap_pressed, point.x - bitmap_normal.getWidth()/, point.y - bitmap_normal.getHeight() / , paint);
}else if (point.state == Point.STATE_ERROR) {
canvas.drawBitmap(bitmap_error, point.x - bitmap_normal.getWidth()/, point.y - bitmap_normal.getHeight() / , paint);
}else{
canvas.drawBitmap(bitmap_normal, point.x - bitmap_normal.getWidth()/, point.y - bitmap_normal.getHeight() / , paint);
}
}
}
}
/**
*
* @param canvas
* @param
* @param
*/
public void line2Canvas(Canvas canvas,Point a,Point b){
float linelength = (float) Point.distance(a, b);
float degress = getDegrees(a,b);
canvas.rotate(degress, a.x, a.y);
if (a.state == Point.STATE_PRESSED) {
matrix.setScale(linelength / bitmap_line.getWidth(), );
matrix.postTranslate(a.x, a.y);
canvas.drawBitmap(bitmap_line, matrix, paint);
}else{
matrix.setScale(linelength / bitmap_line.getWidth(), );
matrix.postTranslate(a.x, a.y);
canvas.drawBitmap(bitmap_line_error, matrix, paint);
}
canvas.rotate(-degress, a.x, a.y);
}
public float getDegrees(Point pointA, Point pointB) {
return (float) Math.toDegrees(Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x));
}
/**
*/
private void initPoints() {
width = getWidth();
height = getHeight();
if (width > height) {
offstartX = (width - height) / ;
width = height;
}else{
offstartY = (height - width) / ;
height = width;
}
bitmap_normal = BitmapFactory.decodeResource(getResources(), R.mipmap.normal);
bitmap_pressed = BitmapFactory.decodeResource(getResources(), R.mipmap.press);
bitmap_error = BitmapFactory.decodeResource(getResources(), R.mipmap.error);
bitmap_line = BitmapFactory.decodeResource(getResources(), R.mipmap.line_normal);
bitmap_line_error = BitmapFactory.decodeResource(getResources(), R.mipmap.line_error);
points[][] = new Point(offstartX + width / ,offstartY + height / );
points[][] = new Point(offstartX + width / ,offstartY + height / );
points[][] = new Point(offstartX + width - width / ,offstartY + height / );
points[][] = new Point(offstartX + width / ,offstartY + width / );
points[][] = new Point(offstartX + width / ,offstartY + width / );
points[][] = new Point(offstartX + width - width / ,offstartY + width / );
points[][] = new Point(offstartX + width / ,offstartY + width - width / );
points[][] = new Point(offstartX + width / ,offstartY + width - width / );
points[][] = new Point(offstartX + width - width / ,offstartY + width - width / );
isInit = true;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
moveX = event.getX();
moveY = event.getY();
movePoint = false;
isFinish = false;
Point point = null;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (onPatterChangeLister != null) {
onPatterChangeLister.onPatterStart(true);
}
resetPoint();
point = chechSelectPoint();
if (point != null) {
isSelect = true;
}
break;
case MotionEvent.ACTION_MOVE:
if (isSelect) {
point = chechSelectPoint();
if (point == null) {
movePoint = true;
}
}
break;
case MotionEvent.ACTION_UP:
isFinish = true;
isSelect = false;
break;
}
if (!isFinish && isSelect && point != null) {
if (crossPoint(point)) {
movePoint = true;
}else{
point.state = Point.STATE_PRESSED;
pointList.add(point);
}
}
if (isFinish) {
if (pointList.size() == ) {
errorPoint();
}else if(pointList.size() < POINT_SIZE && pointList.size() > ){
errorPoint();
if (onPatterChangeLister != null) {
onPatterChangeLister.onPatterChange(null);
}
}else{
if (onPatterChangeLister != null) {
String pass = "";
for (int i = ; i < pointList.size(); i++) {
pass = pass + pointList.get(i).index;
}
if (!TextUtils.isEmpty(pass)) {
onPatterChangeLister.onPatterChange(pass);
}
}
}
}
postInvalidate();
return true;
}
/**
* @param point
* @return
*/
private boolean crossPoint(Point point){
if (pointList.contains(point)) {
return true;
}else{
return false;
}
}
/**
*/
public void resetPoint(){
for (int i = ; i < pointList.size(); i++) {
Point point = pointList.get(i);
point.state = Point.STATE_NORMAL;
}
pointList.clear();
}
/**
*/
public void errorPoint(){
for (Point point : pointList) {
point.state = Point.STATE_ERROR;
}
}
/**
* @return
*/
private Point chechSelectPoint(){
for (int i = ; i < points.length; i++) {
for (int j = ; j < points[i].length; j++) {
Point point = points[i][j];
if (Point.with(point.x, point.y, bitmap_normal.getWidth() / , moveX, moveY)) {
return point;
}
}
}
return null;
}
public static class Point{
public static int STATE_NORMAL = ;
public static int STATE_PRESSED = ;
public static int STATE_ERROR = ;
public float x,y;
public int index = ,state = ;
public Point(){};
public Point(float x,float y){
this.x = x;
this.y = y;
}
/**
* @param a
* @param b
* @return
*/
public static double distance(Point a,Point b){
return Math.sqrt(Math.abs(a.x - b.x) * Math.abs(a.x - b.x) + Math.abs(a.y - b.y) * Math.abs(a.y - b.y)) ;
}
/**
*
* @param paintX
* @param pointY
* @param r
* @param moveX
* @param moveY
* @return
*/
public static boolean with(float paintX,float pointY,float r,float moveX,float moveY){
return Math.sqrt((paintX - moveX) * (paintX - moveX) + (pointY - moveY) * (pointY - moveY)) < r ;
}
}
}
2. 第二步
編寫布局檔案activity_main.xml,在主布局檔案中引入自定義的View。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.newdegree.mylock.LockPatterView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
最後,運作程式就能看到九宮格圖案了。
總結:這樣我們就完成了九宮格圖案解鎖的開發,我們可以在自己完成的程式中繪制各種解鎖圖案。