Android之九宫格解锁的实现
九宫格解锁在Android中应用的很广泛，也是Android特有的一种解锁方式，其实实现起来也并不是很复杂，下面我就根据系统源码LockPatternView，移植出来的一个更加简单小巧九宫格解锁的例子，和大家一起学习一下。图片资源来自"支付宝钱包"，先看看效果图:
源码下载地址:http://download.csdn.net/detail/weidi1989/5374787
下面是最重要的那个LocusPassWordView:
/**
*
* 九宫格解锁
*
* @author way
*
*/
public class LocusPassWordView extends View {
private float w = 0;
private float h = 0;
//
private boolean isCache = false;
//
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
//
private Point[][] mPoints = new Point[3][3];
// 圆的半径
private float r = 0;
// 选中的点
private List<Point> sPoints = new ArrayList<Point>();
private boolean checking = false;
private Bitmap locus_round_original;// 圆点初始状态时的图片
private Bitmap locus_round_click;// 圆点点击时的图片
private Bitmap locus_round_click_error;// 出错时圆点的图片
private Bitmap locus_line;// 正常状态下线的图片
private Bitmap locus_line_semicircle;
private Bitmap locus_line_semicircle_error;
private Bitmap locus_arrow;// 线的移动方向
private Bitmap locus_line_error;// 错误状态下的线的图片
private long CLEAR_TIME = 0;// 清除痕迹的时间
private int passwordMinLength = 5;// 密码最小长度
private boolean isTouch = true; // 是否可操作
private Matrix mMatrix = new Matrix();
private int lineAlpha = 50;// 连线的透明度
public LocusPassWordView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public LocusPassWordView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public LocusPassWordView(Context context) {
super(context);
}
@Override
public void onDraw(Canvas canvas) {
if (!isCache) {
initCache();
}
drawToCanvas(canvas);
}
private void drawToCanvas(Canvas canvas) {
// mPaint.setColor(Color.RED);
// Point p1 = mPoints[1][1];
// Rect r1 = new Rect(p1.x - r,p1.y - r,p1.x +
// locus_round_click.getWidth() - r,p1.y+locus_round_click.getHeight()-
// r);
// canvas.drawRect(r1, mPaint);
// 画所有点
for (int i = 0; i < mPoints.length; i++) {
for (int j = 0; j < mPoints[i].length; j++) {
Point p = mPoints[i][j];
if (p.state == Point.STATE_CHECK) {
canvas.drawBitmap(locus_round_click, p.x - r, p.y - r,
mPaint);
} else if (p.state == Point.STATE_CHECK_ERROR) {
canvas.drawBitmap(locus_round_click_error, p.x - r,
p.y - r, mPaint);
} else {
canvas.drawBitmap(locus_round_original, p.x - r, p.y - r,
mPaint);
}
}
}
// mPaint.setColor(Color.BLUE);
// canvas.drawLine(r1.left+r1.width()/2, r1.top, r1.left+r1.width()/2,
// r1.bottom, mPaint);
// canvas.drawLine(r1.left, r1.top+r1.height()/2, r1.right,
// r1.bottom-r1.height()/2, mPaint);
// 画连线
if (sPoints.size() > 0) {
int tmpAlpha = mPaint.getAlpha();
mPaint.setAlpha(lineAlpha);
Point tp = sPoints.get(0);
for (int i = 1; i < sPoints.size(); i++) {
Point p = sPoints.get(i);
drawLine(canvas, tp, p);
tp = p;
}
if (this.movingNoPoint) {
drawLine(canvas, tp, new Point((int) moveingX, (int) moveingY));
}
mPaint.setAlpha(tmpAlpha);
lineAlpha = mPaint.getAlpha();
}
}
/**
* 初始化Cache信息
*
* @param canvas
*/
private void initCache() {
w = this.getWidth();
h = this.getHeight();
float x = 0;
float y = 0;
// 以最小的为准
// 纵屏
if (w > h) {
x = (w - h) / 2;
w = h;
}
// 横屏
else {
y = (h - w) / 2;
h = w;
}
locus_round_original = BitmapFactory.decodeResource(
this.getResources(), R.drawable.locus_round_original);
locus_round_click = BitmapFactory.decodeResource(this.getResources(),
R.drawable.locus_round_click);
locus_round_click_error = BitmapFactory.decodeResource(
this.getResources(), R.drawable.locus_round_click_error);
locus_line = BitmapFactory.decodeResource(this.getResources(),
R.drawable.locus_line);
locus_line_semicircle = BitmapFactory.decodeResource(
this.getResources(), R.drawable.locus_line_semicircle);
locus_line_error = BitmapFactory.decodeResource(this.getResources(),
R.drawable.locus_line_error);
locus_line_semicircle_error = BitmapFactory.decodeResource(
this.getResources(), R.drawable.locus_line_semicircle_error);
locus_arrow = BitmapFactory.decodeResource(this.getResources(),
R.drawable.locus_arrow);
// Log.d("Canvas w h :", "w:" + w + " h:" + h);
// 计算圆圈图片的大小
float canvasMinW = w;
if (w > h) {
canvasMinW = h;
}
float roundMinW = canvasMinW / 8.0f * 2;
float roundW = roundMinW / 2.f;
//
float deviation = canvasMinW % (8 * 2) / 2;
x += deviation;
x += deviation;
if (locus_round_original.getWidth() > roundMinW) {
float sf = roundMinW * 1.0f / locus_round_original.getWidth(); // 取得缩放比例，将所有的图片进行缩放
locus_round_original = BitmapUtil.zoom(locus_round_original, sf);
locus_round_click = BitmapUtil.zoom(locus_round_click, sf);
locus_round_click_error = BitmapUtil.zoom(locus_round_click_error,
sf);
locus_line = BitmapUtil.zoom(locus_line, sf);
locus_line_semicircle = BitmapUtil.zoom(locus_line_semicircle, sf);
locus_line_error = BitmapUtil.zoom(locus_line_error, sf);
locus_line_semicircle_error = BitmapUtil.zoom(
locus_line_semicircle_error, sf);
locus_arrow = BitmapUtil.zoom(locus_arrow, sf);
roundW = locus_round_original.getWidth() / 2;
}
mPoints[0][0] = new Point(x + 0 + roundW, y + 0 + roundW);
mPoints[0][1] = new Point(x + w / 2, y + 0 + roundW);
mPoints[0][2] = new Point(x + w - roundW, y + 0 + roundW);
mPoints[1][0] = new Point(x + 0 + roundW, y + h / 2);
mPoints[1][1] = new Point(x + w / 2, y + h / 2);
mPoints[1][2] = new Point(x + w - roundW, y + h / 2);
mPoints[2][0] = new Point(x + 0 + roundW, y + h - roundW);
mPoints[2][1] = new Point(x + w / 2, y + h - roundW);
mPoints[2][2] = new Point(x + w - roundW, y + h - roundW);
int k = 0;
for (Point[] ps : mPoints) {
for (Point p : ps) {
p.index = k;
k++;
}
}
r = locus_round_original.getHeight() / 2;// roundW;
isCache = true;
}
/**
* 画两点的连接
*
* @param canvas
* @param a
* @param b
*/
private void drawLine(Canvas canvas, Point a, Point b) {
float ah = (float) MathUtil.distance(a.x, a.y, b.x, b.y);
float degrees = getDegrees(a, b);
// Log.d("=============x===========", "rotate:" + degrees);
canvas.rotate(degrees, a.x, a.y);
if (a.state == Point.STATE_CHECK_ERROR) {
mMatrix.setScale((ah - locus_line_semicircle_error.getWidth())
/ locus_line_error.getWidth(), 1);
mMatrix.postTranslate(a.x, a.y - locus_line_error.getHeight()
/ 2.0f);
canvas.drawBitmap(locus_line_error, mMatrix, mPaint);
canvas.drawBitmap(locus_line_semicircle_error, a.x
+ locus_line_error.getWidth(),
a.y - locus_line_error.getHeight() / 2.0f, mPaint);
} else {
mMatrix.setScale((ah - locus_line_semicircle.getWidth())
/ locus_line.getWidth(), 1);
mMatrix.postTranslate(a.x, a.y - locus_line.getHeight() / 2.0f);
canvas.drawBitmap(locus_line, mMatrix, mPaint);
canvas.drawBitmap(locus_line_semicircle, a.x + ah
- locus_line_semicircle.getWidth(),
a.y - locus_line.getHeight() / 2.0f, mPaint);
}
canvas.drawBitmap(locus_arrow, a.x, a.y - locus_arrow.getHeight()
/ 2.0f, mPaint);
canvas.rotate(-degrees, a.x, a.y);
}
public float getDegrees(Point a, Point b) {
float ax = a.x;// a.index % 3;
float ay = a.y;// a.index / 3;
float bx = b.x;// b.index % 3;
float by = b.y;// b.index / 3;
float degrees = 0;
if (bx == ax) // y轴相等 90度或270
{
if (by > ay) // 在y轴的下边 90
{
degrees = 90;
} else if (by < ay) // 在y轴的上边 270
{
degrees = 270;
}
} else if (by == ay) // y轴相等 0度或180
{
if (bx > ax) // 在y轴的下边 90
{
degrees = 0;
} else if (bx < ax) // 在y轴的上边 270
{
degrees = 180;
}
} else {
if (bx > ax) // 在y轴的右边 270~90
{
if (by > ay) // 在y轴的下边 0 - 90
{
degrees = 0;
degrees = degrees
+ switchDegrees(Math.abs(by - ay),
Math.abs(bx - ax));
} else if (by < ay) // 在y轴的上边 270~0
{
degrees = 360;
degrees = degrees
- switchDegrees(Math.abs(by - ay),
Math.abs(bx - ax));
}
} else if (bx < ax) // 在y轴的左边 90~270
{
if (by > ay) // 在y轴的下边 180 ~ 270
{
degrees = 90;
degrees = degrees
+ switchDegrees(Math.abs(bx - ax),
Math.abs(by - ay));
} else if (by < ay) // 在y轴的上边 90 ~ 180
{
degrees = 270;
degrees = degrees
- switchDegrees(Math.abs(bx - ax),
Math.abs(by - ay));
}
}
}
return degrees;
}
/**
* 1=30度 2=45度 4=60度
*
* @param tan
* @return
*/
private float switchDegrees(float x, float y) {
return (float) MathUtil.pointTotoDegrees(x, y);
}
/**
* 取得数组下标
*
* @param index
* @return
*/
public int[] getArrayIndex(int index) {
int[] ai = new int[2];
ai[0] = index / 3;
ai[1] = index % 3;
return ai;
}
/**
*
* 检查
*
* @param x
* @param y
* @return
*/
private Point checkSelectPoint(float x, float y) {
for (int i = 0; i < mPoints.length; i++) {
for (int j = 0; j < mPoints[i].length; j++) {
Point p = mPoints[i][j];
if (RoundUtil.checkInRound(p.x, p.y, r, (int) x, (int) y)) {
return p;
}
}
}
return null;
}
/**
* 重置
*/
private void reset() {
for (Point p : sPoints) {
p.state = Point.STATE_NORMAL;
}
sPoints.clear();
this.enableTouch();
}
/**
* 判断点是否有交叉 返回 0,新点 ,1 与上一点重叠 2,与非最后一点重叠
*
* @param p
* @return
*/
private int crossPoint(Point p) {
// 重叠的不最后一个则 reset
if (sPoints.contains(p)) {
if (sPoints.size() > 2) {
// 与非最后一点重叠
if (sPoints.get(sPoints.size() - 1).index != p.index) {
return 2;
}
}
return 1; // 与最后一点重叠
} else {
return 0; // 新点
}
}
/**
* 添加一个点
*
* @param point
*/
private void addPoint(Point point) {
this.sPoints.add(point);
}
/**
* 转换为String
*
* @param points
* @return
*/
private String toPointString() {
if (sPoints.size() > passwordMinLength) {
StringBuffer sf = new StringBuffer();
for (Point p : sPoints) {
sf.append(",");
sf.append(p.index);
}
return sf.deleteCharAt(0).toString();
} else {
return "";
}
}
boolean movingNoPoint = false;
float moveingX, moveingY;
@Override
public boolean onTouchEvent(MotionEvent event) {
// 不可操作
if (!isTouch) {
return false;
}
movingNoPoint = false;
float ex = event.getX();
float ey = event.getY();
boolean isFinish = false;
boolean redraw = false;
Point p = null;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 点下
// 如果正在清除密码,则取消
if (task != null) {
task.cancel();
task = null;
Log.d("task", "touch cancel()");
}
// 删除之前的点
reset();
p = checkSelectPoint(ex, ey);
if (p != null) {
checking = true;
}
break;
case MotionEvent.ACTION_MOVE: // 移动
if (checking) {
p = checkSelectPoint(ex, ey);
if (p == null) {
movingNoPoint = true;
moveingX = ex;
moveingY = ey;
}
}
break;
case MotionEvent.ACTION_UP: // 提起
p = checkSelectPoint(ex, ey);
checking = false;
isFinish = true;
break;
}
if (!isFinish && checking && p != null) {
int rk = crossPoint(p);
if (rk == 2) // 与非最后一重叠
{
// reset();
// checking = false;
movingNoPoint = true;
moveingX = ex;
moveingY = ey;
redraw = true;
} else if (rk == 0) // 一个新点
{
p.state = Point.STATE_CHECK;
addPoint(p);
redraw = true;
}
// rk == 1 不处理
}
// 是否重画
if (redraw) {
}
if (isFinish) {
if (this.sPoints.size() == 1) {
this.reset();
} else if (this.sPoints.size() < passwordMinLength
&& this.sPoints.size() > 0) {
// mCompleteListener.onPasswordTooMin(sPoints.size());
error();
clearPassword();
Toast.makeText(this.getContext(), "密码太短,请重新输入!",
Toast.LENGTH_SHORT).show();
} else if (mCompleteListener != null) {
if (this.sPoints.size() >= passwordMinLength) {
this.disableTouch();
mCompleteListener.onComplete(toPointString());
}
}
}
this.postInvalidate();
return true;
}
/**
* 设置已经选中的为错误
*/
private void error() {
for (Point p : sPoints) {
p.state = Point.STATE_CHECK_ERROR;
}
}
/**
* 设置为输入错误
*/
public void markError() {
markError(CLEAR_TIME);
}
/**
* 设置为输入错误
*/
public void markError(final long time) {
for (Point p : sPoints) {
p.state = Point.STATE_CHECK_ERROR;
}
this.clearPassword(time);
}
/**
* 设置为可操作
*/
public void enableTouch() {
isTouch = true;
}
/**
* 设置为不可操作
*/
public void disableTouch() {
isTouch = false;
}
private Timer timer = new Timer();
private TimerTask task = null;
/**
* 清除密码
*/
public void clearPassword() {
clearPassword(CLEAR_TIME);
}
/**
* 清除密码
*/
public void clearPassword(final long time) {
if (time > 1) {
if (task != null) {
task.cancel();
Log.d("task", "clearPassword cancel()");
}
lineAlpha = 130;
postInvalidate();
task = new TimerTask() {
public void run() {
reset();
postInvalidate();
}
};
Log.d("task", "clearPassword schedule(" + time + ")");
timer.schedule(task, time);
} else {
reset();
postInvalidate();
}
}
//
private OnCompleteListener mCompleteListener;
/**
* @param mCompleteListener
*/
public void setOnCompleteListener(OnCompleteListener mCompleteListener) {
this.mCompleteListener = mCompleteListener;
}
/**
* 取得密码
*
* @return
*/
private String getPassword() {
SharedPreferences settings = this.getContext().getSharedPreferences(
this.getClass().getName(), 0);
return settings.getString("password", ""); // , "0,1,2,3,4,5,6,7,8"
}
/**
* 密码是否为空
*
* @return
*/
public boolean isPasswordEmpty() {
return StringUtil.isEmpty(getPassword());
}
public boolean verifyPassword(String password) {
boolean verify = false;
if (com.way.util.StringUtil.isNotEmpty(password)) {
// 或者是超级密码
if (password.equals(getPassword())) {
verify = true;
}
}
return verify;
}
/**
* 设置密码
*
* @param password
*/
public void resetPassWord(String password) {
SharedPreferences settings = this.getContext().getSharedPreferences(
this.getClass().getName(), 0);
Editor editor = settings.edit();
editor.putString("password", password);
editor.commit();
}
public int getPasswordMinLength() {
return passwordMinLength;
}
public void setPasswordMinLength(int passwordMinLength) {
this.passwordMinLength = passwordMinLength;
}
/**
* 轨迹球画完成事件
*
* @author way
*/
public interface OnCompleteListener {
/**
* 画完了
*
* @param str
*/
public void onComplete(String password);
}
}
这里只贴出了最重要的那部分代码，有兴趣的朋友可以下载源码看看