Android自定义UI手势密码改进版

接着第一个Android UI手势密码设计的基础上继续改进，效果图如下

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"
 android:orientation="vertical"
 tools:context=".MainActivity" > 

 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center"
 android:text="请输入密码"
 android:id="@+id/text"
 /> 

 <com.example.lockpatterview.LockPatterView
 android:id="@+id/lock"
 android:layout_weight="1"
 android:layout_width="match_parent"
 android:layout_height="0dp" /> 

</LinearLayout>

MainActivity

package com.example.lockpatterview; 

import com.example.lockpatterview.LockPatterView.OnPatterChangeLister; 

import android.os.Bundle;
import android.text.TextUtils;
import android.widget.TextView;
import android.widget.Toast;
import android.app.Activity; 

public class MainActivity extends Activity implements OnPatterChangeLister { 

 LockPatterView lock;
 TextView text;
 String p = "14789"; 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 text = (TextView) findViewById(R.id.text);
 lock = (LockPatterView) findViewById(R.id.lock);
 lock.SetOnPatterChangeLister(this);
 } 

 @Override
 public void onPatterChange(String passwordStr) {
 if (!TextUtils.isEmpty(passwordStr)) {
  if (passwordStr.equals(p)) {
  text.setText(passwordStr);
  } else {
  text.setText("密码错误");
  lock.errorPoint();
  }
 }else {
  Toast.makeText(MainActivity.this, "至少连接5点", 0).show();
 } 

 } 

 @Override
 public void onPatterStart(boolean isStart) {
 if (isStart) {
  text.setText("请绘制图案");
 }
 } 

}

LockPatterView

package com.example.lockpatterview; 

import java.util.ArrayList;
import java.util.List; 

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View; 

public class LockPatterView extends View { 

 private static final int POINT_SIZE = 5; 

 private Point[][] points = new Point[3][3]; 

 private Matrix matrix = new Matrix(); 

 private float width, height, 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<LockPatterView.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);
 } 

 /*********************************************************
 * 绘制9宫格
 * movePoint代表鼠标在移动，但是不是9宫格里面的点
 * isInit是否初始化过9个点
 * isSelect 点位是否被选中状态
 * isFinish 是否绘制完毕
 */
 private boolean isInit, isSelect, isFinish, movePoint; 

 @Override
 protected void onDraw(Canvas canvas) {
 // 第一次没有初始化就进行初始化，一旦初始化就不在初始化工作了，isInit的意思是---默认没有初始化过
 if (!isInit) {
  // 初始化9个点
  initPoints();
 }
 // 绘制9个点
 points2Canvas(canvas); 

 if (pointList.size() > 0) {
  Point a = pointList.get(0);
  // 绘制九宫格坐标点
  for (int i = 0; i < pointList.size(); i++) {
  Point b = pointList.get(i);
  line2Canvas(canvas, a, b);
  a = b;
  }
  // 绘制鼠标坐标点
  if (movePoint) {
  line2Canvas(canvas, a, new Point(moveX, moveY));
  }
 }
 } 

 /**
 * 初始化9个点位 获取点位的3种状态 线的2种状态 以及9点的坐标位置 以及初始化密码操作 isInit=
 * true设置状态--下次不必初始化话工作了
 */
 private void initPoints() { 

 // 获取布局宽高
 width = getWidth();
 height = getHeight(); 

 // 横屏和竖屏 

 offstartY = (height - width) / 2; 

 // 图片资源
 bitmap_normal = BitmapFactory.decodeResource(getResources(),
  R.drawable.btn_circle_normal);
 bitmap_pressed = BitmapFactory.decodeResource(getResources(),
  R.drawable.btn_circle_pressed);
 bitmap_error = BitmapFactory.decodeResource(getResources(),
  R.drawable.btn_circle_selected);
 bitmap_line = BitmapFactory.decodeResource(getResources(),
  R.drawable.ddd);
 bitmap_line_error = BitmapFactory.decodeResource(getResources(),
  R.drawable.qqq); 

 points[0][0] = new Point(width / 4, offstartY + width / 4);
 points[0][1] = new Point(width / 2, offstartY + width / 4);
 points[0][2] = new Point(width / 4 * 3, offstartY + width / 4); 

 points[1][0] = new Point(width / 4, offstartY + width / 4 * 2);
 points[1][1] = new Point(width / 2, offstartY + width / 4 * 2);
 points[1][2] = new Point(width / 4 * 3, offstartY + width / 4 * 2); 

 points[2][0] = new Point(width / 4, offstartY + width / 4 * 3);
 points[2][1] = new Point(width / 2, offstartY + width / 4 * 3);
 points[2][2] = new Point(width / 4 * 3, offstartY + width / 4 * 3); 

 // 设置密码1--9
 int index = 1;
 for (Point[] points : this.points) {
  for (Point point : points) {
  point.index = index;
  index++;
  }
 }
 // 初始化完成
 isInit = true;
 } 

 /**
 * 将9个点绘制到画布 循环遍历9个点位， 根据3种不同的状态绘制3种不同的9个点位
 */
 private void points2Canvas(Canvas canvas) {
 // 循环遍历9个点位
 for (int i = 0; i < points.length; i++) {
  // 循环遍历每行的3个点位
  for (int j = 0; j < points[i].length; j++) {
  // 获取依次的某个点位
  Point point = points[i][j];
  if (point.state == Point.STATE_PRESSED) {
   // (Bitmap bitmap, float left, float top, Paint paint)
   canvas.drawBitmap(bitmap_pressed,
    point.x - bitmap_normal.getWidth() / 2, point.y
     - bitmap_normal.getHeight() / 2, paint);
  } else if (point.state == Point.STATE_ERROR) {
   canvas.drawBitmap(bitmap_error,
    point.x - bitmap_normal.getWidth() / 2, point.y
     - bitmap_normal.getHeight() / 2, paint);
  } else {
   canvas.drawBitmap(bitmap_normal,
    point.x - bitmap_normal.getWidth() / 2, point.y
     - bitmap_normal.getHeight() / 2, paint);
  }
  }
 }
 } 

 /**
 * 画线
 */
 public void line2Canvas(Canvas canvas, Point a, Point b) {
 // 线的长度--2点之间的距离
 float linelength = (float) Point.distance(a, b);
 // 获取2点之间的角度
 float degress = getDegrees(a, b);
 //根据a点进行旋转
 canvas.rotate(degress, a.x, a.y); 

 if (a.state == Point.STATE_PRESSED) {
  // xy方向上的缩放比例
  matrix.setScale(linelength / bitmap_line.getWidth(), 1);
  matrix.postTranslate(a.x - bitmap_line.getWidth() / 2, a.y
   - bitmap_line.getHeight() / 2);
  canvas.drawBitmap(bitmap_line, matrix, paint);
 } else {
  matrix.setScale(linelength / bitmap_line.getWidth(), 1);
  matrix.postTranslate(a.x - bitmap_line.getWidth() / 2, a.y
   - bitmap_line.getHeight() / 2);
  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));
 } 

 /****************************************************************************
 * onTouch事件处理
 */ 

 @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) {
  //如果按下的位置在9宫格内，就改成状态为true
  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() == 1) {
  // resetPoint();
  errorPoint();
  } else if (pointList.size() < POINT_SIZE && pointList.size() > 0) {// 绘制错误
  errorPoint();
  if (onPatterChangeLister != null) {
   onPatterChangeLister.onPatterChange(null);
  }
  } else {
  if (onPatterChangeLister != null) {
   String pass = "";
   for (int i = 0; i < pointList.size(); i++) {
   pass = pass + pointList.get(i).index;
   }
   if (!TextUtils.isEmpty(pass)) {
   onPatterChangeLister.onPatterChange(pass);
   }
  }
  }
 } 

 postInvalidate();
 return true;
 } 

 /**
 * 重新绘制
 */
 public void resetPoint() {
 for (int i = 0; i < pointList.size(); i++) {
  Point point = pointList.get(i);
  point.state = Point.STATE_NORMAL;
 }
 pointList.clear();
 } 

 /**
 * 检查是否选中
 */
 private Point chechSelectPoint() {
 for (int i = 0; i < points.length; i++) {
  for (int j = 0; j < points[i].length; j++) {
  Point point = points[i][j];
  if (Point.with(point.x, point.y, bitmap_normal.getWidth() / 2,
   moveX, moveY)) {
   return point;
  }
  }
 } 

 return null;
 } 

 /**
 * 交叉点
 */
 private boolean crossPoint(Point point) {
 if (pointList.contains(point)) {
  return true;
 } else {
  return false;
 }
 } 

 /**
 * 绘制错误
 */
 public void errorPoint() {
 for (Point point : pointList) {
  point.state = Point.STATE_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;
 } 

 /**
  * 两点之间的距离
  */
 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));
 } 

 /**
  */
 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;
 }
 } 

 /**
 * 图案监听器
 */
 public static interface OnPatterChangeLister {
 void onPatterChange(String passwordStr); 

 void onPatterStart(boolean isStart);
 } 

 /**
 * 设置图案监听器
 */
 public void SetOnPatterChangeLister(OnPatterChangeLister changeLister) {
 if (changeLister != null) {
  this.onPatterChangeLister = changeLister;
 }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。