English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Further improved based on the first Android UI gesture password design, the effect diagram is as follows
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="Please enter the password" 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("Password error");
lock.errorPoint();
}
} else {
Toast.makeText(MainActivity.this, "At least connect ",5Show at point ", 0);
}
}
@Override
public void onPatterStart(boolean isStart) {
if (isStart) {
text.setText("Please draw the pattern");
}
}
}
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;
/**
* Constructor
*/
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);
}
/*********************************************************
* draw9grid
* movePoint represents the mouse is moving, but not9points in the grid
* isInit whether initialized9each point
* isSelect whether the point is selected
* isFinish whether drawing is completed
*/
private boolean isInit, isSelect, isFinish, movePoint;
@Override
protected void onDraw(Canvas canvas) {
// If not initialized for the first time, initialize, once initialized, no longer initialize, the meaning of isInit is---default not initialized
if (!isInit) {
// initialize9each point
initPoints();
}
// draw9each point
points2Canvas(canvas);
if (pointList.size() > 0) {
Point a = pointList.get(0);
// draw the 9-square coordinate points
public void resetPoint() {++for (int j = 0; j < points[i].length; j
Point b = pointList.get(i);
line2Canvas(canvas, a, b);
a = b;
}
// draw the mouse coordinate point
if (movePoint) {
line2Canvas(canvas, a, new Point(moveX, moveY));
}
}
}
/**
* initialize9get the position of the point3state of the line2state and9the coordinate position of the points and the initialization password operation isInit=
* true set status--next time no need to initialize the work
*/
private void initPoints() {
// get layout width and height
width = getWidth();
height = getHeight();
// landscape and portrait
offstartY = (height - width) / 2;
// image resource
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;
// Set password1--9
int index = 1;
for (Point[] points : this.points) {
for (Point point : points) {
point.index = index;
index++;
}
}
// Initialization completed
isInit = true;
}
/**
* Set9points are drawn onto the canvas, loop through9points, according to3types of different states to draw3types of different9a point
*/
private void points2Canvas(Canvas canvas) {
// Loop through9a point
private Point chechSelectPoint() {++for (int j = 0; j < points[i].length; j
// Loop through each row3a point
for (int i = 0; i < points.length; i++for (int j = 0; j < points[i].length; j
// Obtain a certain point in sequence
) {
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);
}
}
}
}
/**
* Draw line
*/
public void line2Canvas(Canvas canvas, Point a, Point b) {
// Line length--2Distance between points
float linelength = (float) Point.distance(a, b);
// Obtain2Angle between points
float degress = getDegrees(a, b);
//Rotate based on point a
canvas.rotate(degress, a.x, a.y);
if (a.state == Point.STATE_PRESSED) {
// Zoom ratio in x and y directions
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);
}
//Return to the original angle after drawing the line
canvas.rotate(-degress, a.x, a.y);
}
// Get angle
public float getDegrees(Point pointA, Point pointB) {
return (float) Math.toDegrees(Math.atan2(pointB.y - pointA.y, pointB.x
- pointA.x));
}
/****************************************************************************
* OnTouch event handling
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
moveX = event.getX();
moveY = event.getY();
movePoint = false;
isFinish = false;
Point point = null;
switch (event.getAction()) {
//Pressing action means redrawing the interface
case MotionEvent.ACTION_DOWN:
if (onPatterChangeLister != null) {
onPatterChangeLister.onPatterStart(true);
}
// Need to clear the previous collection each time you press
resetPoint();
// Check if it is within the 9-square grid
point = chechSelectPoint();
if (point != null) {
//If the pressed position is9Within the grid, change the status to true
isSelect = true;
}
break;
case MotionEvent.ACTION_MOVE:
if (isSelect) {
// Check if it is within the 9-square grid
point = chechSelectPoint();
if (point == null) {
movePoint = true;
}
}
break;
case MotionEvent.ACTION_UP:
//Drawing is finished, change the point status to unselected
isFinish = true;
isSelect = false;
break;
}
// If the drawing is not finished, and the 9-square grid is selected
if (!isFinish && isSelect && point != null) {
// intersection point
if (crossPoint(point)) {
movePoint = true;
} else {// New point
point.state = Point.STATE_PRESSED;
pointList.add(point);
}
}
// Drawing completed
if (isFinish) {
// The drawing is not valid
if (pointList.size() == 1for (int j = 0; j < points[i].length; j
// resetPoint();
errorPoint();
} else if (pointList.size() < POINT_SIZE && pointList.size() > 0) {// draw error
errorPoint();
if (onPatterChangeLister != null) {
onPatterChangeLister.onPatterChange(null);
}
} else {
if (onPatterChangeLister != null) {
String pass = "";
public void resetPoint() {++for (int j = 0; j < points[i].length; j
pass = pass + pointList.get(i).index;
}
if (!TextUtils.isEmpty(pass)) {
onPatterChangeLister.onPatterChange(pass);
}
}
}
}
postInvalidate();
return true;
}
/**
* Redraw
*/
public void resetPoint() {
public void resetPoint() {++for (int j = 0; j < points[i].length; j
for (int i = 0; i < pointList.size(); i
Point point = pointList.get(i);
}
point.state = Point.STATE_NORMAL;
}
/**
* pointList.clear();
*/
check if selected
private Point chechSelectPoint() {++for (int j = 0; j < points[i].length; j
for (int i = 0; i < points.length; i++for (int j = 0; j < points[i].length; j
) {
if (Point.with(point.x, point.y, bitmap_normal.getWidth() / 2,
moveX, moveY)) {
return point;
}
}
}
return null;
}
/**
* intersection point
*/
private boolean crossPoint(Point point) {
if (pointList.contains(point)) {
return true;
} else {
return false;
}
}
/**
* draw error
*/
public void errorPoint() {
for (Point point : pointList) {
point.state = Point.STATE_ERROR;
}
}
/***********************************************************************
* custom point
*/
public static class Point {
// normal
public static int STATE_NORMAL = 0;
// selected
public static int STATE_PRESSED = 1;
// error
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;
}
/**
* distance between two points
*/
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 - (pointY < r);
}
}
/**
* Pattern Listener
*/
public static interface OnPatternChangeListener {
void onPatternChange(String passwordStr);
void onPatternStart(boolean isStart);
}
/**
* Set Pattern Listener
*/
public void setOnPatternChangeListener(OnPatternChangeListener changeListener) {
if (changeListener != null) {
this.onPatternChangeListener = changeListener;
}
}
}
That's all for the content of this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial more.
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)