輕松實(shí)現(xiàn)Android自定義九宮格圖案解鎖
Android實(shí)現(xiàn)九宮格圖案解鎖,自帶將圖案轉(zhuǎn)化成數(shù)字密碼的功能,代碼如下:
LockPatternView.java
package com.jackie.lockpattern;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Jackie on 2015/12/24.
* 圖案解鎖
*/
public class LockPatternView extends View {
/**
* 圓的畫筆
*/
private Paint mCirclePaint;
/**
* 線的畫筆
*/
private Paint mLinePaint;
/**
* 圓心數(shù)組
*/
private PointView[][] mPointViewArray = new PointView[3][3];
/**
* 保存選中點(diǎn)的集合
*/
private List<PointView> mSelectedPointViewList;
/**
* 解鎖圖案的邊長
*/
private int mPatternWidth;
/**
* 圖案監(jiān)聽器
*/
private OnPatternChangeListener mOnPatternChangeListener;
/**
* 半徑
*/
private float mRadius;
/**
* 每個圓圈的下標(biāo)
*/
private int mIndex = 1;
/**
* 第一個點(diǎn)是否選中
*/
private boolean mIsSelected;
/**
* 是否繪制結(jié)束
*/
private boolean mIsFinished;
/**
* 正在滑動并且沒有任何點(diǎn)選中
*/
private boolean mIsMovingWithoutCircle = false;
private float mCurrentX, mCurrentY;
/**
* 正常狀態(tài)的顏色
*/
private static final int NORMAL_COLOR = 0xFF70DBDB;
/**
* 選中狀態(tài)的顏色
*/
private static final int SELECTED_COLOR = 0xFF979797;
public LockPatternView(Context context) {
this(context, null);
}
public LockPatternView(Context context, AttributeSet attrs) {
super(context, attrs);
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setDither(true);
mCirclePaint.setColor(NORMAL_COLOR);
mCirclePaint.setStyle(Paint.Style.FILL);
mLinePaint = new Paint();
mLinePaint.setAntiAlias(true);
mLinePaint.setDither(true);
mLinePaint.setStrokeWidth(20);
mLinePaint.setColor(SELECTED_COLOR);
mLinePaint.setStyle(Paint.Style.STROKE);
mRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
mSelectedPointViewList = new ArrayList<>();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//取屏幕長和寬中的較小值作為圖案的邊長
mPatternWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
setMeasuredDimension(mPatternWidth, mPatternWidth);
}
@Override
protected void onDraw(Canvas canvas) {
//畫圓
drawCircle(canvas);
//將選中的圓重新繪制一遍,將選中的點(diǎn)和未選中的點(diǎn)區(qū)別開來
for (PointView pointView : mSelectedPointViewList) {
mCirclePaint.setColor(SELECTED_COLOR);
canvas.drawCircle(pointView.x, pointView.y, mRadius, mCirclePaint);
mCirclePaint.setColor(NORMAL_COLOR); //每重新繪制一個,將畫筆的顏色重置,保證不會影響其他圓的繪制
}
//點(diǎn)與點(diǎn)畫線
if (mSelectedPointViewList.size() > 0) {
Point pointViewA = mSelectedPointViewList.get(0); //第一個選中的點(diǎn)為A點(diǎn)
for (int i = 0; i < mSelectedPointViewList.size(); i++) {
Point pointViewB = mSelectedPointViewList.get(i); //其他依次遍歷出來的點(diǎn)為B點(diǎn)
drawLine(canvas, pointViewA, pointViewB);
pointViewA = pointViewB;
}
//點(diǎn)與鼠標(biāo)當(dāng)前位置繪制軌跡
if (mIsMovingWithoutCircle & !mIsFinished) {
drawLine(canvas, pointViewA, new PointView((int)mCurrentX, (int)mCurrentY));
}
}
super.onDraw(canvas);
}
/**
* 畫圓
* @param canvas 畫布
*/
private void drawCircle(Canvas canvas) {
//初始化點(diǎn)的位置
for (int i = 0; i < mPointViewArray.length; i++) {
for (int j = 0; j < mPointViewArray.length; j++) {
//圓心的坐標(biāo)
int cx = mPatternWidth / 4 * (j + 1);
int cy = mPatternWidth / 4 * (i + 1);
//將圓心放在一個點(diǎn)數(shù)組中
PointView pointView = new PointView(cx, cy);
pointView.setIndex(mIndex);
mPointViewArray[i][j] = pointView;
canvas.drawCircle(cx, cy, mRadius, mCirclePaint);
mIndex++;
}
}
mIndex = 1;
}
/**
* 畫線
* @param canvas 畫布
* @param pointA 第一個點(diǎn)
* @param pointB 第二個點(diǎn)
*/
private void drawLine(Canvas canvas, Point pointA, Point pointB) {
canvas.drawLine(pointA.x, pointA.y, pointB.x, pointB.y, mLinePaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
mCurrentX = event.getX();
mCurrentY = event.getY();
PointView selectedPointView = null;
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
//重新繪制
if (mOnPatternChangeListener != null) {
mOnPatternChangeListener.onPatternStarted(true);
}
mSelectedPointViewList.clear();
mIsFinished = false;
selectedPointView = checkSelectPoint();
if (selectedPointView != null) {
//第一次按下的位置在圓內(nèi),被選中
mIsSelected = true;
}
break;
case MotionEvent.ACTION_MOVE:
if (mIsSelected) {
selectedPointView = checkSelectPoint();
}
if (selectedPointView == null) {
mIsMovingWithoutCircle = true;
}
break;
case MotionEvent.ACTION_UP:
mIsFinished = true;
mIsSelected = false;
break;
}
//將選中的點(diǎn)收集起來
if (!mIsFinished && mIsSelected && selectedPointView != null) {
if (!mSelectedPointViewList.contains(selectedPointView)) {
mSelectedPointViewList.add(selectedPointView);
}
}
if (mIsFinished) {
if (mSelectedPointViewList.size() == 1) {
mSelectedPointViewList.clear();
} else if (mSelectedPointViewList.size() < 5 && mSelectedPointViewList.size() > 0) {
//繪制錯誤
if (mOnPatternChangeListener != null) {
mOnPatternChangeListener.onPatternChange(null);
}
} else {
//繪制成功
String patternPassword = "";
if (mOnPatternChangeListener != null) {
for (PointView pointView : mSelectedPointViewList) {
patternPassword += pointView.getIndex();
}
if (!TextUtils.isEmpty(patternPassword)) {
mOnPatternChangeListener.onPatternChange(patternPassword);
}
}
}
}
invalidate();
return true;
}
/**
* 判斷當(dāng)前按下的位置是否在圓心數(shù)組中
* @return 返回選中的點(diǎn)
*/
private PointView checkSelectPoint() {
for (int i = 0; i < mPointViewArray.length; i++) {
for (int j = 0; j < mPointViewArray.length; j++) {
PointView pointView = mPointViewArray[i][j];
if (isWithinCircle(mCurrentX, mCurrentY, pointView.x, pointView.y, mRadius)) {
return pointView;
}
}
}
return null;
}
/**
* 判斷點(diǎn)是否在圓內(nèi)
* @param x 點(diǎn)X軸坐標(biāo)
* @param y 點(diǎn)Y軸坐標(biāo)
* @param cx 圓心X坐標(biāo)
* @param cy 圓心Y坐標(biāo)
* @param radius 半徑
* @return true表示在圓內(nèi),false表示在圓外
*/
private boolean isWithinCircle(float x, float y, float cx, float cy, float radius) {
//如果點(diǎn)和圓心的距離小于半徑,則證明點(diǎn)在圓內(nèi)
if (Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y- cy, 2)) <= radius) {
return true;
}
return false;
}
/**
* 設(shè)置圖案監(jiān)聽器
*/
public void setOnPatternChangeListener(OnPatternChangeListener onPatternChangeListener) {
if (onPatternChangeListener != null) {
this.mOnPatternChangeListener = onPatternChangeListener;
}
}
/**
* 圖案監(jiān)聽器
*/
public interface OnPatternChangeListener {
/**
* 圖案改變
* @param patternPassword 圖案密碼
*/
void onPatternChange(String patternPassword);
/**
* 圖案是否重新繪制
* @param isStarted 重新繪制
*/
void onPatternStarted(boolean isStarted);
}
}
PointView.java
package com.jackie.lockpattern;
import android.graphics.Point;
/**
* Created by Jackie on 2015/12/25.
* 自定義點(diǎn)對象
*/
public class PointView extends Point {
//用于轉(zhuǎn)化密碼的下標(biāo)
public int index;
public PointView(int x, int y) {
super(x, y);
}
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
}
MainActivity.java
package com.jackie.lockpattern;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends Activity implements LockPatternView.OnPatternChangeListener {
private TextView mLockPatternHint;
private LockPatternView mLockPatternView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLockPatternHint = (TextView) findViewById(R.id.lock_pattern_hint);
mLockPatternView = (LockPatternView) findViewById(R.id.lock_pattern_view);
mLockPatternView.setOnPatternChangeListener(this);
}
@Override
public void onPatternChange(String patternPassword) {
if (patternPassword == null) {
mLockPatternHint.setText("至少5個點(diǎn)");
} else {
mLockPatternHint.setText(patternPassword);
}
}
@Override
public void onPatternStarted(boolean isStarted) {
if (isStarted) {
mLockPatternHint.setText("請繪制圖案");
}
}
}
效果圖如下:


附上源碼地址:https://github.com/shineflower/LockPattern.git
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 九宮格的實(shí)現(xiàn)方法
- android 九宮格滑動解鎖開機(jī)實(shí)例源碼學(xué)習(xí)
- Android實(shí)現(xiàn)九宮格(GridView中各項(xiàng)平分空間)的方法
- Android打造流暢九宮格抽獎活動效果
- Android實(shí)現(xiàn)九宮格解鎖
- Android實(shí)現(xiàn)九宮格橫向左右滑動
- Android開發(fā)之實(shí)現(xiàn)GridView支付寶九宮格
- Android編程之九宮格實(shí)現(xiàn)方法實(shí)例分析
- 輕松實(shí)現(xiàn)安卓(Android)九宮格解鎖
- Android實(shí)現(xiàn)圖片九宮格
相關(guān)文章
Android系統(tǒng)狀態(tài)欄定制圖標(biāo)顯示邏輯控制
這篇文章主要為大家介紹了Android系統(tǒng)狀態(tài)欄定制圖標(biāo)顯示邏輯控制,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
Android之軟鍵盤自動彈出和關(guān)閉【代碼分享】
本文主要介紹了Android中軟鍵盤自動彈出和關(guān)閉的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
Android ApplicationContext接口深入分析
ApplicationContext是Spring應(yīng)用程序中的中央接口,由于繼承了多個組件,使得ApplicationContext擁有了許多Spring的核心功能,如獲取bean組件,注冊監(jiān)聽事件,加載資源文件等2022-11-11
Android統(tǒng)一處理登錄后攜帶數(shù)據(jù)跳轉(zhuǎn)到目標(biāo)頁面的方式
我們在開發(fā)的時候,一定會遇到頁面跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Android統(tǒng)一處理登錄后攜帶數(shù)據(jù)跳轉(zhuǎn)到目標(biāo)頁面的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Android實(shí)現(xiàn)網(wǎng)絡(luò)多線程文件下載
這篇文章主要介紹了Android實(shí)現(xiàn)網(wǎng)絡(luò)多線程文件下載的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android實(shí)現(xiàn)抽獎轉(zhuǎn)盤實(shí)例代碼
這篇文章主要介紹了Android實(shí)現(xiàn)抽獎轉(zhuǎn)盤實(shí)例代碼,可以應(yīng)用于Android游戲開發(fā)中的一個應(yīng)用,需要的朋友可以參考下2014-07-07
Android開發(fā)之ListView的簡單用法及定制ListView界面操作示例
這篇文章主要介紹了Android開發(fā)之ListView的簡單用法及定制ListView界面操作,結(jié)合實(shí)例形式分析了Android ListView界面布局相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
Android Camera2 實(shí)現(xiàn)預(yù)覽功能
最近在做一些關(guān)于人臉識別的項(xiàng)目,需要用到 Android 相機(jī)的預(yù)覽功能。今天小編通過本文給大家分享Android Camera2 實(shí)現(xiàn)預(yù)覽功能,感興趣的朋友跟隨小編一起看看吧2018-11-11

