使用Android自定義控件實(shí)現(xiàn)滑動(dòng)解鎖九宮格
更新時(shí)間：2015年10月16日 11:43:40 投稿：mrr
最近由于Android項(xiàng)目需要，要求做一個(gè)類似于支付寶的九宮格解鎖組件，下面小編給大家分享了具體實(shí)現(xiàn)代碼，需要的朋友可以參考下
本文概述：
滑動(dòng)解鎖九宮格的分析：
1、需要自定義控件；
2、需要重寫事件onTouchEvent();
3、需要給九個(gè)點(diǎn)設(shè)置序號(hào)和坐標(biāo)，這里用Map類就行；
4、需要判斷是否到滑到過(guò)九點(diǎn)之一，并存儲(chǔ)滑到過(guò)的點(diǎn)的序號(hào)，而且需要一個(gè)方法可以返回它們，這里用List類就行；
滑動(dòng)解鎖當(dāng)前還是比較流行的，今天寫了個(gè)簡(jiǎn)單的滑動(dòng)解鎖九宮格的例程，分享出來(lái)讓初學(xué)者看看。
我的是這樣的：
Demo
首先，自定義一個(gè)View
/**
* 九宮格
*/
public class NineGridView extends View {
private int width;//該控件的寬
private int height;//該控件的高
private Paint mPaintBigCircle;//用于畫外圓
private Paint mPaintSmallCircle;//用于畫內(nèi)圓
private Paint mPaintLine;//用于畫線
private Paint mPaintText;//用于畫文本
private Path path;//手勢(shì)劃線時(shí)需要用到它
private Map<Integer, Float[]> pointContainer;//存儲(chǔ)九個(gè)點(diǎn)的坐標(biāo)
private List<Integer> pointerSlipped;//存儲(chǔ)得到的九宮格密碼
public List<Integer> getPointerSlipped() {
return pointerSlipped;
}
public void setPointerSlipped(List<Integer> pointerSlipped) {
this.pointerSlipped = pointerSlipped;
}
public NineGridView(Context context) {
super(context);
}
public NineGridView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaintBigCircle = new Paint();
mPaintBigCircle.setColor(Color.BLUE);
mPaintBigCircle.setStyle(Paint.Style.STROKE);//不充滿
mPaintBigCircle.setAntiAlias(true);//抗鋸齒打開(kāi)
mPaintSmallCircle = new Paint();
mPaintSmallCircle.setColor(Color.GREEN);
mPaintSmallCircle.setStyle(Paint.Style.FILL);//充滿，即畫的幾何體為實(shí)心
mPaintSmallCircle.setAntiAlias(true);
mPaintLine = new Paint();
mPaintLine.setColor(Color.GREEN);
mPaintLine.setStyle(Paint.Style.STROKE);
mPaintLine.setStrokeWidth(20);
mPaintLine.setAntiAlias(true);
mPaintText = new Paint();
mPaintText.setColor(Color.WHITE);
mPaintText.setTextAlign(Paint.Align.CENTER);//向中央對(duì)齊
mPaintText.setTextSize(50);
mPaintText.setAntiAlias(true);
path = new Path();
pointContainer = new HashMap<>();
pointerSlipped = new ArrayList<>();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
}
private float pivotX;//觸屏得到的x坐標(biāo)
private float pivotY;//觸屏得到的y坐標(biāo)
private float selectedX;//當(dāng)前選中的圓點(diǎn)的x坐標(biāo)
private float selectedY;//當(dāng)前選中的圓點(diǎn)的y坐標(biāo)
private float selectedXOld;//從前選中的圓點(diǎn)的x坐標(biāo)
private float selectedYOld;//從前選中的圓點(diǎn)的y坐標(biāo)
private boolean isHasMoved = false;//用于判斷path是否調(diào)用過(guò)moveTo()方法
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
pivotX = event.getX();
pivotY = event.getY();
//每次觸屏?xí)r需要清空一下pointerSlipped，即重置密碼
pointerSlipped.clear();
Log.d("pointTouched", pivotX + "," + pivotY);
getSelectedPointIndex(pivotX, pivotY);
invalidate();//重繪
break;
case MotionEvent.ACTION_MOVE:
pivotX = event.getX();
pivotY = event.getY();
getSelectedPointIndex(pivotX, pivotY);
invalidate();
break;
case MotionEvent.ACTION_UP:
/**
* 當(dāng)手指離開(kāi)屏幕時(shí)，重置path
*/
path.reset();
isHasMoved = false;
String indexSequence = "";
//打印出上一次手勢(shì)密碼的值
for(int index:pointerSlipped){
indexSequence += "/"+index;
}
Log.d("index",indexSequence);
break;
}
invalidate();
return true;
}
/**
* 得到并存儲(chǔ)經(jīng)過(guò)的圓點(diǎn)的序號(hào)
* @param pivotX
* @param pivotY
*/
private void getSelectedPointIndex(float pivotX, float pivotY) {
int index = 0;
if (pivotX > patternMargin && pivotX < patternMargin + bigCircleRadius * 2) {
if (pivotY > height / 2 && pivotY < height / 2 + bigCircleRadius * 2) {
selectedX = pointContainer.get(1)[0];
selectedY = pointContainer.get(1)[1];
index = 1;
Log.d("selectedPoint", selectedX + "," + selectedY);
} else if (pivotY > height / 2 + added && pivotY < height / 2 + added + bigCircleRadius * 2) {
selectedX = pointContainer.get(4)[0];
selectedY = pointContainer.get(4)[1];
index = 4;
} else if (pivotY > height / 2 + added * 2 && pivotY < height / 2 + added * 2 + bigCircleRadius * 2) {
selectedX = pointContainer.get(7)[0];
selectedY = pointContainer.get(7)[1];
index = 7;
}
} else if (pivotX > patternMargin + added && pivotX < patternMargin + added + bigCircleRadius * 2) {
if (pivotY > height / 2 && pivotY < height / 2 + bigCircleRadius * 2) {
selectedX = pointContainer.get(2)[0];
selectedY = pointContainer.get(2)[1];
index = 2;
} else if (pivotY > height / 2 + added && pivotY < height / 2 + added + bigCircleRadius * 2) {
selectedX = pointContainer.get(5)[0];
selectedY = pointContainer.get(5)[1];
index = 5;
} else if (pivotY > height / 2 + added * 2 && pivotY <height / 2 + added * 2 + bigCircleRadius * 2) {
selectedX = pointContainer.get(8)[0];
selectedY = pointContainer.get(8)[1];
index = 8;
}
} else if (pivotX > patternMargin + added * 2 && pivotX < patternMargin + added * 2 + bigCircleRadius * 2) {
if (pivotY > height / 2 && pivotY < height / 2 + bigCircleRadius * 2) {
selectedX = pointContainer.get(3)[0];
selectedY = pointContainer.get(3)[1];
index = 3;
} else if (pivotY > height / 2 + added && pivotY < height / 2 + added + bigCircleRadius * 2) {
selectedX = pointContainer.get(6)[0];
selectedY = pointContainer.get(6)[1];
index = 6;
} else if (pivotY > height / 2 + added * 2 && pivotY < height / 2 + added * 2 + bigCircleRadius * 2) {
selectedX = pointContainer.get(9)[0];
selectedY = pointContainer.get(9)[1];
index = 9;
}
}
if (selectedX!=selectedXOld||selectedY!=selectedYOld){
//當(dāng)這次的坐標(biāo)與上次的坐標(biāo)不同時(shí)存儲(chǔ)這次點(diǎn)序號(hào)
pointerSlipped.add(index);
selectedXOld = selectedX;
selectedYOld = selectedY;
if (!isHasMoved){
//當(dāng)?shù)谝淮斡|碰到九個(gè)點(diǎn)之一時(shí)，path調(diào)用moveTo;
path.moveTo(selectedX,selectedY);
isHasMoved = true;
}else{
//path移動(dòng)至當(dāng)前圓點(diǎn)坐標(biāo)
path.lineTo(selectedX,selectedY);
}
}
}
private String text = "請(qǐng)繪制解鎖圖案";
private float x;//繪制的圓形的x坐標(biāo)
private float y;//繪制圓形的縱坐標(biāo)
private float added;//水平豎直方向每個(gè)圓點(diǎn)中心間距
private float patternMargin = 100;//九宮格距離邊界距離
private float bigCircleRadius = 90;//外圓半徑
private float smallCircleRadius = 25;//內(nèi)圓半徑
private int index;//圓點(diǎn)的序號(hào)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
added = (width - patternMargin * 2) / 3;
x = patternMargin + added / 2;
y = added / 2 + height / 2;
index = 1;
canvas.drawColor(Color.BLACK);
canvas.drawText(text, width / 2, height / 4, mPaintText);
/**
* 繪制九個(gè)圓點(diǎn)圖案
*/
for (int column = 0; column < 3; column++) {
for (int row = 0; row < 3; row++) {
canvas.drawCircle(x, y, bigCircleRadius, mPaintBigCircle);
canvas.drawCircle(x, y, smallCircleRadius, mPaintSmallCircle);
pointContainer.put(index, new Float[]{x, y});
index++;
x += added;
}
y += added;
x = patternMargin + added / 2;
}
x = patternMargin + added / 2;
y = added / 2 + height / 2;
canvas.drawPath(path, mPaintLine);
}
}
為什么要規(guī)避重復(fù)？
因?yàn)樵谟|屏?xí)r，會(huì)調(diào)用很多次onTouchEvent()方法，這樣存儲(chǔ)的手勢(shì)密碼肯定會(huì)不準(zhǔn)確，我在以上代碼中作出了處理，已經(jīng)避免了重復(fù)，看打印信息：
這里寫圖片描述
顯然，密碼沒(méi)有相鄰數(shù)重復(fù)，當(dāng)然還有一種情況就是手指在兩個(gè)點(diǎn)之間來(lái)回等問(wèn)題，這種狀況也需要避免，這里沒(méi)有作處理。當(dāng)然，我做得還不夠。。。
自定義view中用到的dp和px互相轉(zhuǎn)換的工具類：
public class SizeConvert {
/**
* 將dp轉(zhuǎn)換為sp
*/
public static int dip2px(Context context, float dipValue){
final float scale = context.getResources().getDisplayMetrics().density;
return (int)(dipValue * scale + 0.5f);
}
/**
* sp轉(zhuǎn)dp
*/
public static int px2dip(Context context, float pxValue){
final float scale = context.getResources().getDisplayMetrics().density;
return (int)(pxValue / scale + 0.5f);
}
}
主活動(dòng)：
public class NineGridActivity extends BaseActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_nine_grid);
}
}
layout中的布局文件view_nine_grid：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.test.shiweiwei.myproject.selfish_view.NineGridView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
總結(jié)
我寫的只是最基本的九宮格滑動(dòng)解密項(xiàng)目，實(shí)際用的九宮格解密比這個(gè)要復(fù)雜，有許多特效和其他更嚴(yán)謹(jǐn)?shù)奶幚恚录奶幚硪膊皇沁@樣草草了事，如果想寫得漂亮，還得多花工夫。
相關(guān)文章
Android開(kāi)發(fā)學(xué)習(xí)筆記 淺談WebView
WebView(網(wǎng)絡(luò)視圖)能加載顯示網(wǎng)頁(yè)，可以將其視為一個(gè)瀏覽器。它使用了WebKit渲染引擎加載顯示網(wǎng)頁(yè)，實(shí)現(xiàn)WebView有以下兩種不同的方法2014-11-11
Android UI控件之ProgressBar進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android UI控件之ProgressBar進(jìn)度條的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
基于SceneForm實(shí)現(xiàn)子彈射擊（繪制子彈運(yùn)行軌跡）
這篇文章主要為大家詳細(xì)介紹了基于SceneForm實(shí)現(xiàn)子彈射擊，繪制子彈運(yùn)行軌跡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
簡(jiǎn)略分析Android的Retrofit應(yīng)用開(kāi)發(fā)框架源碼
這篇文章主要介紹了Android的Retrofit應(yīng)用開(kāi)發(fā)框架的源碼分析,作者對(duì)Volley和Retrofit兩個(gè)框架進(jìn)行了一些對(duì)比,比較精彩,需要的朋友可以參考下2016-02-02
Android編程自定義Notification實(shí)例分析
這篇文章主要介紹了Android編程自定義Notification的用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了自定義Notification的具體功能與實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
100行Android代碼輕松實(shí)現(xiàn)帶動(dòng)畫柱狀圖
這篇文章主要教大家通過(guò)100行Android代碼輕松實(shí)現(xiàn)帶動(dòng)畫柱狀圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Android開(kāi)發(fā)之拖動(dòng)條和評(píng)分組件用法分析
這篇文章主要介紹了Android開(kāi)發(fā)之拖動(dòng)條和評(píng)分組件用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android拖動(dòng)條及評(píng)分組件的布局與功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07
Android 字符串中某個(gè)字段可點(diǎn)擊和設(shè)置顏色的方法
在android開(kāi)發(fā)中，我們時(shí)常會(huì)遇到對(duì)字符串中某些固定的字段實(shí)現(xiàn)可點(diǎn)擊和顏色的設(shè)置，現(xiàn)粘貼處我在開(kāi)發(fā)中如何設(shè)置這些屬性的2017-07-07
Android生存指南之:解Bug策略與思路問(wèn)題的詳解
本篇文章是對(duì)Android 解Bug策略與思路的問(wèn)題進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
Android BroadcastReceiver傳輸機(jī)制詳解
Android開(kāi)發(fā)的四大組件分別是：活動(dòng)（activity），用于表現(xiàn)功能；服務(wù)（service），后臺(tái)運(yùn)行服務(wù)，不提供界面呈現(xiàn)；廣播接受者（Broadcast Receive），勇于接收廣播；內(nèi)容提供者（Content Provider），支持多個(gè)應(yīng)用中存儲(chǔ)和讀取數(shù)據(jù)，相當(dāng)于數(shù)據(jù)庫(kù)，本篇著重介紹廣播組件2023-01-01