2. 程式人生 > >Android手勢密碼view筆記（一）

Android手勢密碼view筆記（一）

阿新 • • 發佈：2019-02-20

前言：不知不覺已經在這座陌生又熟悉的城市呆了一年多了，說不出什麼感覺，可是即使是自己感覺自己沒什麼變化，但是周圍的事物卻不斷的在變，不知道自己選擇的路未來如何，但是當下我還是會努力、努力、再努力的，加油，騷年！～說了一堆廢話，哈哈～！ 好了，下面進入今天的主題。

剛接觸android的時候看到別人寫的手勢密碼view，然後當時就在想，我什麼時候才能寫出如此高階的東西？？ 沒關係，不要怕哈，說出這樣話的人不是你技術不咋地而是你不願意花時間去研究它，其實也沒有那麼難哦（世上無難事，只怕有心人！），下面我們就一步一步實現一個手勢密碼view。

想必都看過手勢密碼view，但我們還是看看我們今天要實現的效果吧：

這裡寫圖片描述

上面是一個手勢view的提示view，下面是一個手勢view。

用法：

 <com.leo.library.view.GestureContentView
            android:id="@+id/id_gesture_pwd"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
 

            app:column="3"
            app:row="3"
            app:padding="50dp"
            app:normalDrawable="@drawable/gesture_node_normal"
            app:selectedDrawable="@drawable/gesture_node_pressed"
            app:erroDrawable="@drawable/gesture_node_wrong"
            app:normalStrokeColor="#000"
 

            app:erroStrokeColor="#ff0000"
            app:strokeWidth="4dp"
            />

app打頭的是自定義的一些屬性，

attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="IndicatorView">
        <!--預設狀態的drawable-->
        <attr name="normalDrawable" format="reference" />
        <!--被選中狀態的drawable-->
        <attr name="selectedDrawable" format="reference" />
        <!--錯誤狀態的drawabe-->
        <attr name="erroDrawable" format="reference" />
        <!--列數-->
        <attr name="column" format="integer" />
        <!--行數-->
        <attr name="row" format="integer" />
        <!--padding值，padding值越大點越小-->
        <attr name="padding" format="dimension" />
        <!--預設連線線顏色-->
        <attr name="normalStrokeColor" format="color" />
        <!--錯誤連線線顏色-->
        <attr name="erroStrokeColor" format="color" />
        <!--連線線size-->
        <attr name="strokeWidth" format="dimension" />
    </declare-styleable>
</resources>

MainActivity.java:

public class MainActivity extends AppCompatActivity implements IGesturePwdCallBack {
    private GestureContentView mGestureView;
    private IndicatorView indicatorView;
    private TextView tvIndicator;

    private int count=0;
    private String pwd;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mGestureView= (GestureContentView) findViewById(R.id.id_gesture_pwd);
        indicatorView= (IndicatorView) findViewById(R.id.id_indicator_view);
        tvIndicator= (TextView) findViewById(R.id.id_indicator);
        mGestureView.setGesturePwdCallBack(this);
    }

    @Override
    public void callBack(List<Integer> pwds) {
        StringBuffer sbPwd=new StringBuffer();
        for (Integer pwd:pwds) {
            sbPwd.append(pwd);
        }
        tvIndicator.setText(sbPwd.toString());
        if(pwds!=null&&pwds.size()>0){
            indicatorView.setPwds(pwds);
        }
      if(count++==0){
            pwd=sbPwd.toString();
            Toast.makeText(this,"請再次繪製手勢密碼",Toast.LENGTH_SHORT).show();
            mGestureView.changePwdState(PointState.POINT_STATE_NORMAL,0);
        } else{
            count=0;
            if(pwd.equals(sbPwd.toString())){
                Toast.makeText(this,"密碼設定成功",Toast.LENGTH_SHORT).show();
            }else{
                Toast.makeText(this,"兩次密碼不一致，請重新繪製",Toast.LENGTH_SHORT).show();
                indicatorView.startAnimation(AnimationUtils.loadAnimation(this,R.anim.anim_shake));
                count=0;
                mGestureView.changePwdState(PointState.POINT_STATE_ERRO,0);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mGestureView.changePwdState(PointState.POINT_STATE_NORMAL,0);
                    }
                },1000);
            }
        }
    }
}

看不懂也沒關係啊，我們先明確下我們要完成的目標，然後一步一步實現：

先實現下我們的指示器view，因為實現了指示器view也就相當於實現了一半的手勢密碼view了：
這裡寫圖片描述

實現思路：
1、我們需要知道指示器有多少行、多少列、預設顯示什麼、選中後顯示什麼？
2、然後根據傳入的密碼把對應的點顯示成選中狀態，沒有選中的點為預設狀態。

好了，知道我們的思路，首先自定義一個view叫IndicatorView繼承view，然後重寫三個構造方法：

public class IndicatorView extends View {
    public IndicatorView(Context context) {
        this(context, null);
    }

    public IndicatorView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
       }
}

定義自定義屬性（在res／values下建立attrs.xml檔案）：

1、我們需要傳入的預設顯示圖片：

 <!--預設狀態的drawable-->
        <attr name="normalDrawable" format="reference" />

2、我們需要拿到傳入的選中時圖片：

<!--被選中狀態的drawable-->
        <attr name="selectedDrawable" format="reference" />

其它的一些屬性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="IndicatorView">
        <!--預設狀態的drawable-->
        <attr name="normalDrawable" format="reference" />
        <!--被選中狀態的drawable-->
        <attr name="selectedDrawable" format="reference" />
        <!--列數-->
        <attr name="column" format="integer" />
        <!--行數-->
        <attr name="row" format="integer" />
            </declare-styleable>
</resources>

定義完屬性後，此時我們xml中就可以引用自定義view了：

 <com.leo.library.view.IndicatorView
        android:id="@+id/id_indicator_view"
        android:layout_marginTop="20dp"
        android:layout_width="85dp"
        android:layout_height="85dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        app:column="3"
        app:normalDrawable="@drawable/shape_white_indicator"
        app:padding="8dp"
        app:row="3"
        app:selectedDrawable="@drawable/shape_orange_indicator" />

注意：
中間的drawable檔案可以在github專案中找到，連結我會在文章最後給出。

有了自定義屬性，然後我們在帶三個引數的構造方法中獲取我們在佈局檔案傳入的自定義屬性：

private static final int NUMBER_ROW = 3;
    private static final int NUMBER_COLUMN = 3;
    private int DEFAULT_PADDING = dp2px(10);
    private final int DEFAULT_SIZE = dp2px(40);

    private Bitmap mNormalBitmap;
    private Bitmap mSelectedBitmap;
    private int mRow = NUMBER_ROW;
    private int mColumn = NUMBER_COLUMN;
 public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        final TypedArray a = context.obtainStyledAttributes(
                attrs, R.styleable.IndicatorView, defStyleAttr, 0);
        mNormalBitmap = drawableToBitmap(a.getDrawable(R.styleable.IndicatorView_normalDrawable));
        mSelectedBitmap = drawableToBitmap(a.getDrawable(R.styleable.IndicatorView_selectedDrawable));
        if (a.hasValue(R.styleable.IndicatorView_row)) {
            mRow = a.getInt(R.styleable.IndicatorView_row, NUMBER_ROW);
        }
        if (a.hasValue(R.styleable.IndicatorView_column)) {
            mColumn = a.getInt(R.styleable.IndicatorView_row, NUMBER_COLUMN);
        }
        if (a.hasValue(R.styleable.IndicatorView_padding)) {
            DEFAULT_PADDING = a.getDimensionPixelSize(R.styleable.IndicatorView_padding, DEFAULT_PADDING);
        }
    }

好了，現在我們已經拿到了我們想要的東西了，接下來我們需要知道我的view要多大，相比小夥伴都知道接下來要幹什麼了吧？對～！ 我們需要重寫下onMeasure方法，然後指定我們view的大小：

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    }

那麼我們該以一個什麼樣的規則指定我們的view的大小呢？

1、當用戶自己指定了view的大小的話，我們就用使用者傳入的size，然後根據傳入的寬、高計算出我們的點的大小。

<com.leo.library.view.IndicatorView
        android:id="@+id/id_indicator_view"
        android:layout_marginTop="20dp"
        android:layout_width="85dp"
        android:layout_height="85dp"

2、如果使用者沒有指定view的大小，寬高都設定為wrap_content的話，我們需要根據使用者傳入的選中圖片跟沒選中圖片的大小計算view的大小：

 android:layout_width="wrap_content"
        android:layout_height="wrap_content"

好了，既然知道咋測量我們的view後，我們接下來就實現出來：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        float width = MeasureSpec.getSize(widthMeasureSpec);
        float height = MeasureSpec.getSize(heightMeasureSpec);
        float result=Math.min(width,height);
        height = getHeightValue(result, heightMode);
        width = getWidthValue(result, widthMode);
       ｝
 private float getHeightValue(float height, int heightMode) {
        //當size為確定的大小的話
        //每個點的高度等於（控制元件的高度－（行數＋1）＊padding值）／行數
        if (heightMode == MeasureSpec.EXACTLY) {
            mCellHeight = (height - (mRow + 1) * DEFAULT_PADDING) / mRow;
        } else {
            //高度不確定的話，我們就取選中的圖片跟未選中圖片中的高度的最小值
            mCellHeight = Math.min(mNormalBitmap.getHeight(), mSelectedBitmap.getHeight());
            //此時控制元件的高度＝點的高度＊行數＋（行數＋1）＊預設padding值
            height = mCellHeight * mRow + (mRow + 1) * DEFAULT_PADDING;
        }
        return height;
    }

寬度計算方式也是一樣的話，只是行數換成了列數：

 private float getWidthValue(float width, int widthMode) {
        if (widthMode == MeasureSpec.EXACTLY) {
            mCellWidth = (width - (mColumn + 1) * DEFAULT_PADDING) / mColumn;
        } else {
            mCellWidth = Math.min(mNormalBitmap.getWidth(), mSelectedBitmap.getWidth());
            width = mCellWidth * mColumn + (mColumn + 1) * DEFAULT_PADDING;
        }
        return width;
    }

好了，現在是知道了點的高度跟寬度，然後控制元件的寬高自然也就知道了，但是如果我們傳入的選中的圖片跟未選擇的圖片大小不一樣咋辦呢？沒關係，接下來我們重新修改下圖片的size：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       .....
        height = getHeightValue(result, heightMode);
        width = getWidthValue(result, widthMode);
        setMeasuredDimension((int) width, (int) height);
        //重新修改圖片的size
        resizeBitmap(mCellWidth, mCellHeight);
    }

    private void resizeBitmap(float width, float height) {
        if (width > 0 && height > 0) {
            if (mNormalBitmap.getWidth() != width || mNormalBitmap.getHeight() !=height) {
                if (mNormalBitmap.getWidth() > 0 && mNormalBitmap.getHeight() > 0) {
                    mNormalBitmap = Bitmap.createScaledBitmap(mNormalBitmap, (int) width, (int) height, false);
                }
            }
            if (mSelectedBitmap.getWidth()!=width || mSelectedBitmap.getHeight() !=height) {
                if (mSelectedBitmap.getWidth() > 0 && mSelectedBitmap.getHeight() > 0) {
                    mSelectedBitmap = Bitmap.createScaledBitmap(mSelectedBitmap, (int) width, (int) height, false);
                }
            }
        }
    }

好了，圖片也拿到了，控制元件的寬高跟點的寬高都知道，所以接下來我們該進入我們的核心程式碼了（重寫onDraw方法，畫出我們的點）：

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //遍歷行數
        for (int i = 0; i < mRow; i++) {
            //遍歷列數
            for (int j = 0; j < mColumn; j++) {
                float left = (j + 1) * DEFAULT_PADDING + j * mCellWidth;
                float top = (i + 1) * DEFAULT_PADDING + i * mCellHeight;
                //每個點代表的密碼值＝點對應的行數值*列數＋對應的列數
                //比如3*3的表格，然後第二排的第一個＝1*3+0=3
                int num=i * mColumn + j;
                //此點是不是在傳入的密碼集合中？
                if (pwds!=null&&pwds.contains(num)) {
                    //這個點在傳入的密碼集合中的話就畫一個選中的bitmap
                    canvas.drawBitmap(mSelectedBitmap, left, top, null);
                } else {
                    canvas.drawBitmap(mNormalBitmap, left, top, null);
                }
            }
        }
    }

嗯嗯！！然後我們暴露一個方法，讓外界傳入需要現實的密碼集合：

 public void setPwds(List<Integer> pwds) {
        if(pwds!=null)this.pwds=pwds;
        if (Looper.myLooper() == Looper.getMainLooper()) {
            invalidate();
        } else {
            postInvalidate();
        }
    }

好啦～～ 我們的指示器view就做完啦～～～ 是不是很簡單呢？ 指示器view做完後，再想想手勢密碼view，是不是就只是差根據手勢改變，然後畫出我們的line呢？

相關推薦

Android手勢密碼view筆記（一）

前言：不知不覺已經在這座陌生又熟悉的城市呆了一年多了，說不出什麼感覺，可是即使是自己感覺自己沒什麼變化，但是周圍的事物卻不斷的在變，不知道自己選擇的路未來如何，但是當下我還是會努力、努力、再努力的，加油，騷年！～說了一堆廢話，哈哈～！ 好了，下面進入今天的主題

【編碼】量子密碼學習筆記（一）

一個量子實驗：         我們購買三個濾光器A,B,C，分別代表水平濾光，右斜45度濾光，以及四分之一波片（解釋在下面，最後可得到一個有兩個垂直分量的波）。         在光源和牆壁之間

格密碼學習筆記（一）

格密碼學習筆記（一） \qquad 隨著當下量子計算機的研製的迅速進展，量子演算法亦是相應得以巨大突破。在量子計算模型下，經典數論假設的密

Android開發藝術探索筆記（一） Activity的生命週期和啟動模式(1)

Activity作為Android開發中最常用的一個元件，是Android開發人員必須熟悉且掌握的重要內容。同時Activity也是在面試中經常被問到的一個方向。因此，掌握Activity的重要性也不言而喻。這或許也是為什麼任大神會在《Android開發藝術探索

密碼學筆記（一）古典密碼

密碼學的階段劃分 　　密碼學的發展按照其對演算法和祕鑰的保密程度大致可以分為如下三個階段。 古典密碼階段（1949年前） 在這個階段演算法和祕鑰都是保密的，祕鑰空間較小，資訊的安全性主要依賴於對於加密和解密演算法的保密。 對稱密碼階段（1949-1975

Android自定義View總結（一）基礎知識與例項

自定義View是最能體現一個Android開發者水平的技能之一了。 接下來的一些列部落格將總結一下Android的自定義相關View知識，包括View的結構，事件體系，工作原理，自定義View的繪製等。 參考資料部分來自於書上以及各種部落格。 新建了一個qq群 482

weex+android原生開發學習筆記（一）

移動端開發（使用Weex+android原生開發筆記）：         npm install weex-toolkit -g              2》、用 weex create 命令來建立一個空的模板專案：         weex create awes

android自定義View學習（一）----建立一個檢視類

建立一個檢視類 精心設計的自定義檢視與其他精心設計的類非常相似。它使用易於使用的介面封裝了一組特定的功能，它可以高效地使用CPU和記憶體，等等。不過，作為一個設計良好的班級，自定義檢視應該: 符合Android標準 提供適用於Android XML佈局的自

android自定義view學習（一）之時尚錶盤

最近在學習自定義view，順便謝謝自己的路程，後面回首看看以前的自己有多菜。。。。下方的是實現圖，首先需要說明的是，這個效果是看了一遍部落格，然後自己想著去實現，並給出此部落格：點選開啟連結正文：首先學習自定義view需要稍稍入門一下，然後是各種函式的使用，以及大量的練習，至

Android View動畫（一） --- scale

for -- 縮放 記錄 1.0 使用 tco 關於 mod 在我們做apk開發的過程中，如果要吸引用戶，就需要要做出來一個非常炫的界面，當然動畫是必不可少的，接下來就記錄和學習動畫相關…… 接下來就把平時的一些東西，慢慢的上傳上來，做一下記錄和保存 今天要講解的第一個

android binder筆記（一）

ati ima ger 取數 manager nat 機構 聲明 tar 最近在看韋老師的android binder視頻 ，記錄下個人對視頻學習的理解。 學習需要記錄與分享，如果有誤，希望得到大家的指正！ IPC：兩個進程間數據通信的一種方式 RPC：一個進

Android入門筆記（一）

一、UI fragment 1.1 為什麼要使用 fragment 和對託管的相關理解        為了對元件進行更加靈活的控制，同時適應平板的大屏幕布局方式，所以引入 UI fragment 來對 UI 進行管理。fragment 類的作用與普通專案中的 avtivi

Android基礎筆記（一）

一.android四大元件 （一）android四大元件詳解 Android四大元件分別為activity、service、content provider、broadcast receiver。 1、activity （1）一個Activity通常就是一個單獨

android必備記錄筆記（一）記憶體洩露和各種效能優化

該篇筆記來自於平時學習時，對各種學習資源的整合，如有冒犯敬請諒解，整理的不好，還望海涵指出錯誤 一、記憶體洩露 針對記憶體洩露我認為要知道下面三點： 第一：要弄清楚記憶體洩露與記憶體溢位的區別 第二：要弄清楚常規的記憶體分析方法，重點掌握Leakcanary的使用和原

安卓開發學習筆記（一）：如何用Android Stuidio匯出apk檔案？

一，首先，我們在選單欄上找到這一欄： 然後點選build，再點選generate apk，然後出現以下介面： 由於之前我們並沒有進行apk檔案的生成，因此需要這個apk key做一個驗證，以防您的app上線之後被別人盜用，同時證明自己對這個app的擁有權。key store path就是您app key所

《Android 開發藝術探索》讀書筆記（一）——Activity 的生命週期和啟動模式

Activity 作為 Android 四大元件之首，它作為和使用者互動的介面，在開發中使用得可謂極其頻繁，所以弄清楚 Activity 的生命週期和啟動方式是非常重要的，要牢記。 1 Activity 的生命週期全面分析 1.1 典型情況下的生命週期分析 onCrea

詳解Android View的事件體系 之View基礎（一）

前言 掌握View的事件體系是Android 向高階邁向的必經之路，本片部落格講解Android View的相關基礎知識第一部分，後面我們會為大家講解基礎知識第二部分、VIew事件體系、View事件分佈等知識內容。 1.View基礎 1.1 什麼是View 簡單的說V

Android View體系（一）檢視座標系

前言 Android View體系是介面程式設計的核心，他的重要性不亞於Android四大元件，在這個系列中我會陸續講到View座標系、View的滑動、View的事件分發等文章來逐步介紹Android View體系。 1.View簡介 View是And

android記錄筆記（一）記憶體洩露和各種效能優化

該篇筆記來自於平時學習時，對各種學習資源的整合，如有冒犯敬請諒解，整理的不好，還望指出錯誤，主要用於查詢與記錄 一、記憶體洩露 針對記憶體洩露我認為要知道下面三點： 第一：要弄清楚記憶體洩露與記憶體溢位的區別 第二：要弄清楚常規的記憶體分析方法，重點掌握Leakcanary的使用

Android效能優化筆記（一）——啟動優化

參考文章：  https://time.geekbang.org/column/article/73651 https://mp.weixin.qq.com/s/eaArt5Udc4WZ3NoH5RlEkQ https://juejin.im/post/5874bff0128fe1006b4