Android自定义控件实现九宫格解锁
最终效果如下
1.进行定义实体point点
public class Point { private float x; private float y; //正常模式 public static final int NORMAL_MODE = 1; //按下模式 public static final int PRESSED_MODE = 2; //错误模式 public static final int ERROR_MODE = 3; private int state = NORMAL_MODE; private String mark; public Point(float x, float y, String mark) { this.x = x; this.y = y; this.mark = mark; } public float getX() { return x; } public void setX(float x) { this.x = x; } public float getY() { return y; } public void setY(float y) { this.y = y; } public int getState() { return state; } public void setState(int state) { this.state = state; } public String getMark() { return mark; } public void setMark(String mark) { this.mark = mark; } }2.自定义ScreenLockView
public class ScreenLockView extends View { private static final String TAG = "ScreenLockView"; // 错误格子的图片 private Bitmap errorBitmap; // 正常格子的图片 private Bitmap normalBitmap; // 手指按下时格子的图片 private Bitmap pressedBitmap; // 错误时连线的图片 private Bitmap lineErrorBitmap; // 手指按住时连线的图片 private Bitmap linePressedBitmap; // 偏移量，使九宫格在屏幕中央 private int offset; // 九宫格的九个格子是否已经初始化 private boolean init; // 格子的半径 private int radius; // 密码 private String password = "123456"; // 九个格子 private Point[][] points = new Point[3][3]; private int width; private int height; private Matrix matrix = new Matrix(); private float moveX = -1; private float moveY = -1; // 是否手指在移动 private boolean isMove; // 是否可以触摸，当用户抬起手指，划出九宫格的密码不正确时为不可触摸 private boolean isTouch = true; // 用来存储记录被按下的点 private List<Point> pressedPoint = new ArrayList<>(); // 屏幕解锁监听器 private OnScreenLockListener listener; public ScreenLockView(Context context) { super(context); init(); } public ScreenLockView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public ScreenLockView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { errorBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bitmap_error); normalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bitmap_normal); pressedBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bitmap_pressed); lineErrorBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.line_error); linePressedBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.line_pressed); radius = normalBitmap.getWidth() / 2; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); if (widthSize > heightSize) { offset = (widthSize - heightSize) / 2; } else { offset = (heightSize - widthSize) / 2; } setMeasuredDimension(widthSize, heightSize); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (!init) { width = getWidth(); height = getHeight(); initPoint(); init = true; } drawPoint(canvas); if (moveX != -1 && moveY != -1) { drawLine(canvas); } } // 画直线 private void drawLine(Canvas canvas) { // 将pressedPoint中的所有格子依次遍历，互相连线 for (int i = 0; i < pressedPoint.size() - 1; i++) { // 得到当前格子 Point point = pressedPoint.get(i); // 得到下一个格子 Point nextPoint = pressedPoint.get(i + 1); // 旋转画布 canvas.rotate(RotateDegrees.getDegrees(point, nextPoint), point.getX(), point.getY()); matrix.reset(); // 根据距离设置拉伸的长度 matrix.setScale(getDistance(point, nextPoint) / linePressedBitmap.getWidth(), 1f); // 进行平移 matrix.postTranslate(point.getX(), point.getY() - linePressedBitmap.getWidth() / 2); if (point.getState() == Point.PRESSED_MODE) { canvas.drawBitmap(linePressedBitmap, matrix, null); } else { canvas.drawBitmap(lineErrorBitmap, matrix, null); } // 把画布旋转回来 canvas.rotate(-RotateDegrees.getDegrees(point, nextPoint), point.getX(), point.getY()); } // 如果是手指在移动的情况 if (isMove) { Point lastPoint = pressedPoint.get(pressedPoint.size() - 1); canvas.rotate(RotateDegrees.getDegrees(lastPoint, moveX, moveY), lastPoint.getX(), lastPoint.getY()); matrix.reset(); Log.i(TAG, "the distance : " + getDistance(lastPoint, moveX, moveY) / linePressedBitmap.getWidth()); matrix.setScale(getDistance(lastPoint, moveX, moveY) / linePressedBitmap.getWidth(), 1f); matrix.postTranslate(lastPoint.getX(), lastPoint.getY() - linePressedBitmap.getWidth() / 2); canvas.drawBitmap(linePressedBitmap, matrix, null); canvas.rotate(-RotateDegrees.getDegrees(lastPoint, moveX, moveY), lastPoint.getX(), lastPoint.getY()); } } // 根据point和坐标点计算出之间的距离 private float getDistance(Point point, float moveX, float moveY) { Point b = new Point(moveX,moveY,null); return getDistance(point,b); } // 根据两个point计算出之间的距离 private float getDistance(Point point, Point nextPoint) { return (float) Math.sqrt(Math.pow(nextPoint.getX() - point.getX(), 2f) + Math.pow(nextPoint.getY() - point.getY(), 2f)); } private void drawPoint(Canvas canvas) { for (int i = 0; i < points.length; i++) { for (int j = 0; j < points[i].length; j++) { int state = points[i][j].getState(); if (state == Point.NORMAL_MODE) { canvas.drawBitmap(normalBitmap, points[i][j].getX() - radius, points[i][j].getY() - radius, null); } else if (state == Point.PRESSED_MODE) { canvas.drawBitmap(pressedBitmap, points[i][j].getX() - radius, points[i][j].getY() - radius, null); } else { canvas.drawBitmap(errorBitmap, points[i][j].getX() - radius, points[i][j].getY() - radius, null); } } } } //初始化九宫格的点 private void initPoint() { points[0][0] = new Point(width / 4, offset + width / 4, "0"); points[0][1] = new Point(width / 2, offset + width / 4, "1"); points[0][2] = new Point(width * 3 / 4, offset + width / 4, "2"); points[1][0] = new Point(width / 4, offset + width / 2, "3"); points[1][1] = new Point(width / 2, offset + width / 2, "4"); points[1][2] = new Point(width * 3 / 4, offset + width / 2, "5"); points[2][0] = new Point(width / 4, offset + width * 3 / 4, "6"); points[2][1] = new Point(width / 2, offset + width * 3 / 4, "7"); points[2][2] = new Point(width * 3 / 4, offset + width * 3 / 4, "8"); } @Override public boolean onTouchEvent(MotionEvent event) { if (isTouch) { float x = event.getX(); float y = event.getY(); Point point; switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 判断用户触摸的点是否在九宫格的任意一个格子之内 point = isPoint(x, y); if (point != null) { point.setState(Point.PRESSED_MODE); // 切换为按下模式 pressedPoint.add(point); } break; case MotionEvent.ACTION_MOVE: if (pressedPoint.size() > 0) { point = isPoint(x, y); if (point != null) { if (!crossPoint(point)) { point.setState(Point.PRESSED_MODE); pressedPoint.add(point); } } moveX = x; moveY = y; isMove = true; } break; case MotionEvent.ACTION_UP: isMove = false; String tempPwd = ""; for (Point p : pressedPoint) { tempPwd += p.getMark(); } if (listener != null) { listener.getStringPassword(tempPwd); } if (tempPwd.equals(password)) { if (listener != null) { listener.isPassword(true); this.postDelayed(runnable, 1000); } } else { for (Point p : pressedPoint) { p.setState(Point.ERROR_MODE); } isTouch = false; this.postDelayed(runnable, 1000); if (listener != null) { listener.isPassword(false); } } break; } invalidate(); } return true; } private boolean crossPoint(Point point) { if (pressedPoint.contains(point)) { return true; } return false; } public interface OnScreenLockListener { public void getStringPassword(String password); public void isPassword(boolean flag); } public void setOnScreenLockListener(OnScreenLockListener listener) { this.listener = listener; } private Point isPoint(float x, float y) { Point point; for(int i = 0; i<points.length;i++){ for (int j = 0; j < points[i].length; j++) { point = points[i][j]; if (isContain(point, x, y)) { return point; } } } return null; } private boolean isContain(Point point, float x, float y) { return Math.sqrt(Math.pow(x - point.getX(), 2f) + Math.pow(y - point.getY(), 2f)) <= radius; } private Runnable runnable = new Runnable() { @Override public void run() { isTouch = true; reset(); invalidate(); } }; // 重置格子 private void reset(){ for (int i = 0; i < points.length; i++) { for (int j = 0; j < points[i].length; j++) { points[i][j].setState(Point.NORMAL_MODE); } } pressedPoint.clear(); } }3.RotateDegress类
public class RotateDegrees { public static float getDegrees(Point a, Point b){ float degrees = 0 ; float aX = a.getX(); float aY = a.getY(); float bX = b.getX(); float bY = b.getY(); if(aX == bX){ if(aY<bY){ degrees = 90; }else{ degrees = 270; } }else if(bY == aY){ if(aX<bX){ degrees = 0 ; }else{ degrees = 180; } }else{ if(aX>bX){ if(aY>bY){ degrees = 180 + (float)(Math.atan2(aY-bY,aX-bX)*180/Math.PI); }else{ degrees = 180 - (float)(Math.atan2(bY -aY,aX - bX)*180/Math.PI); } }else{ if(aY>bY){ degrees = 360 -(float)(Math.atan2(aY - bY,bX-aX)*180/Math.PI); }else{ degrees = (float)(Math.atan2(bY - aY,bX - aX)*180/Math.PI); } } } return degrees; } public static float getDegrees(Point a, float bX,float bY){ Point b = new Point(bX,bY,null); return getDegrees(a,b); } }用到的图片资源
4.MainActivity中使用
public class MainActivity extends AppCompatActivity { private ScreenLockView screenLockView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); screenLockView = (ScreenLockView) findViewById(R.id.slv); screenLockView.setOnScreenLockListener(new ScreenLockView.OnScreenLockListener() { @Override public void getStringPassword(String password) { } @Override public void isPassword(boolean flag) { String content; if (flag) { content = "密码正确"; } else { content = "密码错误"; } Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show(); } }); } }5.布局文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.admin.ninegridunlock.MainActivity"> <com.example.admin.ninegridunlock.ScreenLockView android:id="@+id/slv" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>