2. 程式人生 > >Android 自定義 View——手勢密碼

Android 自定義 View——手勢密碼

阿新 • • 發佈：2019-01-31

    Android 自定義 View 當然是十分重要的，筆者這兩天寫了一個自定義 View 的手勢密碼，和大家分享分享：


    首先，我們來建立一個表示點的類，Point.java：

public class Point {

    // 點的三種狀態
    public static final int POINT_STATUS_NORMAL = 0;
    public static final int POINT_STATUS_CLICK = 1;
    public static final int POINT_STATUS_ERROR = 2;

    // 預設狀態
    public int state = POINT_STATUS_NORMAL;

    // 點的座標
    public float mX;
    public float mY;

    public Point(float x,float y){
        this.mX = x;
        this.mY = y;
    }

    // 獲取兩個點的距離
    public float getInstance(Point a){
        return (float) Math.sqrt((mX-a.mX)*(mX-a.mX)+(mY-a.mY)*(mY-a.mY));
    }

}

    然後我們建立一個 HandleLock.java 繼承自 View，並重寫其三種構造方法（不重寫帶兩個引數的構造方法會導致程式出錯）：

    首先，我們先把後面需要用的變數寫出來，方便大家明白這些變數是幹嘛的：

// 三種畫筆
    private Paint mNormalPaint;
    private Paint mClickPaint;
    private Paint mErrorPaint;

    // 點的半徑
    private float mRadius;

    // 九個點，使用二維陣列
    private Point[][] mPoints = new Point[3][3];

    // 儲存手勢劃過的點
    private ArrayList<Point> mClickPointsList = new ArrayList<Point>();
    // 手勢的 x 座標，y 座標
    private float mHandleX;
    private float mHandleY;

    private OnDrawFinishListener mListener;

    // 儲存滑動路徑
    private StringBuilder mRoute = new StringBuilder();
    // 是否在畫錯誤狀態
    private boolean isDrawError = false;

    接下來我們來初始化資料：

// 初始化資料
    private void initData() {

        // 初始化三種畫筆，正常狀態為灰色，點下狀態為藍色，錯誤為紅色
        mNormalPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mNormalPaint.setColor(Color.parseColor("#ABABAB"));
        mClickPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mClickPaint.setColor(Color.parseColor("#1296db"));
        mErrorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mErrorPaint.setColor(Color.parseColor("#FB0C13"));

        // 獲取點間隔
        float offset = 0;
        if (getWidth() > getHeight()) {
            // 橫屏
            offset = getHeight() / 7;
            mRadius = offset / 2;
            mPoints[0][0] = new Point(getWidth() / 2 - offset * 2, offset + mRadius);
            mPoints[0][1] = new Point(getWidth() / 2, offset + mRadius);
            mPoints[0][2] = new Point(getWidth() / 2 + offset * 2, offset + mRadius);
            mPoints[1][0] = new Point(getWidth() / 2 - offset * 2, offset * 3 + mRadius);
            mPoints[1][1] = new Point(getWidth() / 2, offset * 3 + mRadius);
            mPoints[1][2] = new Point(getWidth() / 2 + offset * 2, offset * 3 + mRadius);
            mPoints[2][0] = new Point(getWidth() / 2 - offset * 2, offset * 5 + mRadius);
            mPoints[2][1] = new Point(getWidth() / 2, offset * 5 + mRadius);
            mPoints[2][2] = new Point(getWidth() / 2 + offset * 2, offset * 5 + mRadius);
        } else {
            // 豎屏
            offset = getWidth() / 7;
            mRadius = offset / 2;
            mPoints[0][0] = new Point(offset + mRadius, getHeight() / 2 - 2 * offset);
            mPoints[0][1] = new Point(offset * 3 + mRadius, getHeight() / 2 - 2 * offset);
            mPoints[0][2] = new Point(offset * 5 + mRadius, getHeight() / 2 - 2 * offset);
            mPoints[1][0] = new Point(offset + mRadius, getHeight() / 2);
            mPoints[1][1] = new Point(offset * 3 + mRadius, getHeight() / 2);
            mPoints[1][2] = new Point(offset * 5 + mRadius, getHeight() / 2);
            mPoints[2][0] = new Point(offset + mRadius, getHeight() / 2 + 2 * offset);
            mPoints[2][1] = new Point(offset * 3 + mRadius, getHeight() / 2 + 2 * offset);
            mPoints[2][2] = new Point(offset * 5 + mRadius, getHeight() / 2 + 2 * offset);
        }


    }

    大家可以看到，我來給點定座標是，是按照比較窄的邊的 1/7 作為點的直徑，這樣保證了，不管你怎麼定義 handleLock 的寬高，都可以使裡面的九個點看起來位置很舒服。

   接下來我們就需要寫一些函式，將點、線繪製到控制元件上，我自己把繪製分成了三部分，一部分是點，一部分是點與點之間的線，一部分是手勢的小點和手勢到最新點的線。

// 畫點，按照我們選擇的半徑畫九個圓
    private void drawPoints(Canvas canvas) {
        // 便利所有的點，並且判斷這些點的狀態
        for (int i = 0; i < 3; i++) {
            for (int j = 0; j < 3; j++) {
                Point point = mPoints[i][j];
                switch (point.state) {
                    case Point.POINT_STATUS_NORMAL:
                        canvas.drawCircle(point.mX, point.mY, mRadius, mNormalPaint);
                        break;
                    case Point.POINT_STATUS_CLICK:
                        canvas.drawCircle(point.mX, point.mY, mRadius, mClickPaint);
                        break;
                    case Point.POINT_STATUS_ERROR:
                        canvas.drawCircle(point.mX, point.mY, mRadius, mErrorPaint);
                        break;
                    default:
                        break;

                }
            }
        }
    }
    // 畫點與點之間的線
    private void drawLines(Canvas canvas) {
        // 判斷手勢是否已經劃過點了
        if (mClickPointsList.size() > 0) {
            Point prePoint = mClickPointsList.get(0);
            // 將所有已選擇點的按順序連線
            for (int i = 1; i < mClickPointsList.size(); i++) {
                // 判斷已選擇點的狀態
                if (prePoint.state == Point.POINT_STATUS_CLICK) {
                    mClickPaint.setStrokeWidth(7);
                    canvas.drawLine(prePoint.mX, prePoint.mY, mClickPointsList.get(i).mX, mClickPointsList.get(i).mY, mClickPaint);
                }
                if (prePoint.state == Point.POINT_STATUS_ERROR) {
                    mErrorPaint.setStrokeWidth(7);
                    canvas.drawLine(prePoint.mX, prePoint.mY, mClickPointsList.get(i).mX, mClickPointsList.get(i).mY, mErrorPaint);
                }
                prePoint = mClickPointsList.get(i);
            }

        }

    }
    // 畫手勢點
    private void drawFinger(Canvas canvas) {
        // 有選擇點後再出現手勢點
        if (mClickPointsList.size() > 0) {
            canvas.drawCircle(mHandleX, mHandleY, mRadius / 2, mClickPaint);
        }
        // 最新點到手指的連線，判斷是否有已選擇的點，有才能畫
        if (mClickPointsList.size() > 0) {
            canvas.drawLine(mClickPointsList.get(mClickPointsList.size() - 1).mX, mClickPointsList.get(mClickPointsList.size() - 1).mY,
                    mHandleX, mHandleY, mClickPaint);
        }
    }

    上面的程式碼我們看到需要使用到手勢劃過的點，我們是怎麼選擇的呢？

// 獲取手指移動中選取的點
private int[] getPositions() {
    Point point = new Point(mHandleX, mHandleY);
    int[] position = new int[2];
    // 遍歷九個點，看手勢的座標是否在九個圓內，有則返回這個點的兩個下標
    for (int i = 0; i < 3; i++) {
        for (int j = 0; j < 3; j++) {
            if (mPoints[i][j].getInstance(point) <= mRadius) {
                position[0] = i;
                position[1] = j;
                return position;
            }
        }

    }
    return null;
}

    我們需要重寫其 onTouchEvent 來通過手勢動作來提交選擇的點，並更新檢視：

// 重寫點選事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 獲取手勢的座標
        mHandleX = event.getX();
        mHandleY = event.getY();
        int[] position;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                position = getPositions();
                // 判斷點下時是否選擇到點
                if (position != null) {
                    // 新增到已選擇點中，並改變其狀態
                    mClickPointsList.add(mPoints[position[0]][position[1]]);
                    mPoints[position[0]][position[1]].state = Point.POINT_STATUS_CLICK;
                    // 儲存路徑，依次儲存其橫縱下標
                    mRoute.append(position[0]);
                    mRoute.append(position[1]);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                position = getPositions();
                // 判斷手勢移動時是否選擇到點
                if (position != null) {
                    // 判斷當前選擇的點是否已經被選擇過
                    if (!mClickPointsList.contains(mPoints[position[0]][position[1]])) {
                        // 新增到已選擇點中，並改變其狀態
                        mClickPointsList.add(mPoints[position[0]][position[1]]);
                        mPoints[position[0]][position[1]].state = Point.POINT_STATUS_CLICK;
                        // 儲存路徑，依次儲存其橫縱下標
                        mRoute.append(position[0]);
                        mRoute.append(position[1]);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                // 重置資料
                resetData();
                break;
            default:
                break;
        }
        // 更新檢視
        invalidate();

        return true;
    }
// 重置資料
    private void resetData() {
        // 將所有選擇過的點的狀態改為正常
        for (Point point :
                mClickPointsList) {
            point.state = Point.POINT_STATUS_NORMAL;
        }
        // 清空已選擇點
        mClickPointsList.clear();
        // 清空儲存的路徑
        mRoute = new StringBuilder();
        // 不再畫錯誤狀態
        isDrawError = false;
    }

    那我們怎麼繪製檢視呢？我們通過重寫其 onDraw() 方法：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 判斷是否畫錯誤狀態，畫錯誤狀態不需要畫手勢點已經於最新選擇點的連線
        if (isDrawError) {
            drawPoints(canvas);
            drawLines(canvas);
        } else {
            drawPoints(canvas);
            drawLines(canvas);
            drawFinger(canvas);
        }
    }

    那麼這個手勢密碼繪製過程就結束了，但是整個控制元件還沒有結束，我們還需要給它一個監聽器，監聽其繪製完成，選擇後續事件：

private OnDrawFinishListener mListener;

    // 定義繪製完成的介面
    public interface OnDrawFinishListener {
        public boolean drawFinish(String route);
    }

    // 定義繪製完成的方法，傳入介面
    public void setOnDrawFinishListener(OnDrawFinishListener listener) {
        this.mListener = listener;
    }

    然後我們就需要在手勢離開的時候 ，來進行繪製完成時的事件：

case MotionEvent.ACTION_UP:
                // 完成時回撥繪製完成的方法，返回比對結果，判斷手勢密碼是否正確
                mListener.drawFinish(mRoute.toString());
                // 返回錯誤，則將所有已選擇點狀態改為錯誤
                if (!mListener.drawFinish(mRoute.toString())) {
                    for (Point point :
                            mClickPointsList) {
                        point.state = Point.POINT_STATUS_ERROR;
                    }
                    // 將是否繪製錯誤設為 true
                    isDrawError = true;
                    // 重新整理檢視
                    invalidate();
                    // 這裡我們使用 handler 非同步操作，使其錯誤狀態保持 0.5s
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            if (!mListener.drawFinish(mRoute.toString())) {
                                Message message = new Message();
                                message.arg1 = 0;
                                handler.sendMessage(message);
                            }
                        }
                    }).run();
                } else {
                    resetData();
                }
                invalidate();

                break;
private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.arg1) {
                case 0:
                    try {
                        // 沉睡 0.5s
                        Thread.sleep(500);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    // 重置資料,並重新整理檢視
                    resetData();
                    invalidate();
                    break;
                default:
                    break;
            }

        }
    };

    好了，handleLock，整個過程就結束了，筆者這裡定義了一個監聽器只是給大家提供一種思路，筆者將儲存的大路徑傳給了使用者，是為了保證使用者可以自己儲存密碼，並作相關操作，大家也可以使用 HandleLock 來  儲存密碼，不傳給使用者，根據自己的需求寫出更多更豐富的監聽器，而且這裡筆者在 MotionEvent.ACTION_UP 中直接回調了 drawFinish() 方法，就意味著要使用該 HandleLock 就必須給它設定監聽器。

    接下來我們說說 HandleLock 的使用，首先是在佈局檔案中使用：

<com.example.a01378359.testapp.lock.HandleLock
        android:id="@+id/handlelock_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    接下來是程式碼中使用：

handleLock = findViewById(R.id.handlelock_test);
        handleLock.setOnDrawFinishListener(new HandleLock.OnDrawFinishListener() {
            @Override
            public boolean drawFinish(String route) {
                // 第一次滑動，則儲存密碼
                if (count == 0){
                    password = route;
                    count++;
                    Toast.makeText(LockTestActivity.this,"已儲存密碼",Toast.LENGTH_SHORT).show();
                    return true;
                }else {
                    // 與儲存密碼比較，返回結果，並且做出相應事件
                    if (password.equals(route)){
                        Toast.makeText(LockTestActivity.this,"密碼正確",Toast.LENGTH_SHORT).show();
                        return true;
                    }else {
                        Toast.makeText(LockTestActivity.this,"密碼錯誤",Toast.LENGTH_SHORT).show();
                        return false;
                    }
                }
            }
        });
    專案地址：原始碼


相關推薦

Android 自定義 View——手勢密碼

    Android 自定義 View 當然是十分重要的，筆者這兩天寫了一個自定義 View 的手勢密碼，和大家分享分享：    首先，我們來建立一個表示點的類，Point.java：public class Point { // 點的三種狀態 publi

Android自定義View之六位密碼框

今天是我第一次寫技術部落格，本人也是小菜鳥一枚，工作不滿一年，部落格內容也比較簡單，對專業知識瞭解不夠深入，寫部落格的原因一來是為了分享，而來也是激勵自己，如果內容有什麼錯誤問題，請大家指教糾正。 今天要講的是六位密碼輸入框。先上程式碼。首先是layout.xml檔案 &

Android自定義View之使用Path繪製手勢軌跡和水波效果

先看下效果圖： 繪製軌跡 繪製手指的軌跡主要是攔截View的onTouchEvent()方法，並根據手指的軌跡繪製path。path中有兩種可以實現的方法 1、Path.lineTo(x,y)方法 public class MoveP

Android 自定義View

wid declare created odi lex getwidth 實現 tdi led 　　最近在看鴻洋大神的博客，在看到自定義部分View部分時，想到之前案子中經常會要用到"圖片 + 文字"這類控件，如下圖所示： 之前的做法是在布局文件中，將一個Imag

Android自定義view詳解

this boolean mar 處理 都是 並且 jdk text 命名 從繼承開始 懂點面向對象語言知識的都知道：封裝，繼承和多態，這是面向對象的三個基本特征，所以在自定義View的時候，最簡單的方法就是繼承現有的View 通過上面這段代碼，我定義了一個Ske

Android -- 自定義view實現keep歡迎頁倒計時效果

super onfinish -m use new getc awt ttr alt 1，最近打開keep的app的時候，發現它的歡迎頁面的倒計時效果還不錯，所以打算自己來寫寫，然後就有了這篇文章。 2，還是老規矩，先看一下我們今天實現的效果 　　相較於我們常見的倒計時

Android自定義View效果目錄

class 重寫 自定義 textview 居中 url 冒泡 and 雷達圖 1、絢麗的loading動效的實現 2、Android自定義View：進度條+冒泡文本 3、Android雷達圖（蜘蛛網圖） 4、Android文本閃爍 5、Android繪制圓形進度條 6、重

Android自定義View——實現水波紋效果類似剩余流量球

string 三個點 pre ber block span 初始化 move 理解 最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧： 效果圖鎮樓 一：先一步一步來分解一下實現的過程 需要繪制一個正弦曲線(sin

Android 自定義 View 知識點

移動 encode swe em1 red 鋸齒 枚舉類 map() tex 根據 Hencoder 提供的知識點，進行學習和總結。 三個要點： 布局 繪制 觸摸反饋 繪制 自定義繪制：由自己實現繪制過程 常用繪制方法 onDraw(Canvas canvas) 繪制

Android自定義view與activity的傳值

重復 轉動 自定義 activit 廣播 內部 代碼 view 等待 昨晚在寫團隊項目的時候，遇到一個問題，直到今天早上才解決。。。即在自定義view“轉盤”結束轉動後獲取結果的處理中，我是想吧值傳到activity中的一個textview中的，但我的自定義view類不是a

Android 自定義View - 助記詞

UI今天給了個需求，把亂序的單詞拼成一句話，如下圖： 本來計劃是用ViewGroup+TextView寫的，突然腦子抽了想用paint來畫(寫完就後悔了-.-) 先看一下完成後的效果 前期的思路是這樣的： 1.測量每個單詞的高度和寬度，計算出所有單詞排列後的高*2，就是view

Android自定義View--翻書控制元件（一）

0.前言 最近重看了一遍封神演義，感覺QQ閱讀那個翻書的效果挺好的，準備做一個。上週五下午用了兩個小時只寫了一部分功能，以後有時間再完善 1.分析 先看效果圖 這個空間，說簡單也簡單，說難也難，簡單就在於這個效果主要就是依賴canvas的clippath才見到部分canvas，難就難在裁

Android 自定義view深入剖析

前言 自定義View原理是Android開發者必須瞭解的基礎； 在瞭解自定義View之前，你需要有一定的知識儲備； 本文將全面解析關於自定義View中的所有知識基礎。 目錄 1. View的分類 檢視View主要分為兩類：

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android 自定義view（1) --- Attr、Style和Theme詳解

轉載：https://www.jianshu.com/p/dd79220b47dd 概念說明:       Attr：屬性，風格樣式的最小單元；      Style：風格，它是一系列Attr的集合用以定義一個View

Android自定義View——自定義搜尋框（SearchView） 非常實用的控制元件

好多東西寫起來太麻煩了,而且我在最開始用的也不是自己寫的,所以找了一個非常棒的測試了一下.  轉載的 在 Android開發中，當系統資料項比較多時，常常會在app新增搜尋功能，方便使用者能快速獲得需要的資料。搜尋欄對於我們並不陌生，在許多app都能見到它，比如豌

Android 自定義View 系列文章目錄 Canvas篇

一、基礎 Android 畫筆 Paint  基本操作API：https://blog.csdn.net/huangliniqng/article/details/82588824 Android 畫布 Canvas 基本操作API：https://blog.csdn.net/

Android 自定義view淺析

public class SquareImageView extends View { private Paint mPaint; private Bitmap bitmap; int left; int top; //這個構造方法，是new物件，例項化物件的

Android自定義View——canvas 繪製一個會動的時鐘

文章目錄 ####1、功能例項 用canvas 繪製一個 會動的 指標式 時鐘 ####2、程式碼架構 ####3、主要功能程式碼 activity_main.xml 檔案 <?xml version="1.0" encodin

Android 自定義View(繼承原生元件)實現拖動移位效果

自定義View實現拖拽移位效果 通過繼承GridLayout實現的拖拽移位效果 首先建立Class類繼承GridLayout並重寫前三個構造方法 public class MyGridlayout extends GridLayout implement