2. 程式人生 > >Android 實現自定義安全數字鍵盤（仿微信）

Android 實現自定義安全數字鍵盤（仿微信）

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

背景

大部分的金融App會對預設的數字鍵盤進行處理，以實現自定義的數字安全鍵盤。基於此，本文對對微信數字鍵盤樣式進行了仿寫，實現了一套自定義的數字安全鍵盤（支援隨機數字分佈）。

一.圖示效果

在這裡插入圖片描述

二.需要考慮的問題

  1. 佈局的實現方式；
    demo中使用了popupwindow，通過xml檔案進行Tablayout佈局。
  2. 禁掉EditText預設軟鍵盤的彈出，替換為自定義的數字鍵盤及與其它EditText切換焦點時的彈出效果；
  3. 刪除和增加字元時需要同步更新游標的位置；
  4. 隨機數字分佈的實現；

三.實現程式碼

1.MainActivity呼叫處程式碼：

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private EditText numberEt;
    private KeyboardPopupWindow keyboardPopupWindow;
    private boolean isUiCreated = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        numberEt = findViewById(R.id.numberEt);
        keyboardPopupWindow = new KeyboardPopupWindow(MainActivity.this, getWindow().getDecorView(), numberEt,true);
//        numberEt.setInputType(InputType.TYPE_NULL);//該設定會導致游標不可見
        numberEt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (keyboardPopupWindow != null) {
                    keyboardPopupWindow.show();
                }
            }
        });
        numberEt.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (keyboardPopupWindow != null && isUiCreated) {//isUiCreated 很重要，Unable to add window -- token null is not valid; is your activity running?
                    keyboardPopupWindow.refreshKeyboardOutSideTouchable(!hasFocus);// 需要等待頁面建立完成後焦點變化才去顯示自定義鍵盤
                }

                if (hasFocus) {//隱藏系統軟鍵盤
                    InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                    imm.hideSoftInputFromWindow(numberEt.getWindowToken(), 0);
                }

            }
        });
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        isUiCreated = true;
    }


    @Override
    protected void onDestroy() {
        if (keyboardPopupWindow != null) {
            keyboardPopupWindow.releaseResources();
        }
        super.onDestroy();
    }
}

可以看到，這塊的程式碼實現很簡單，主要是通過KeyboardPopupWindow 這個自定義的View來實現鍵盤彈出及按鍵點選效果。需要注意的是isUiCreated 這個標誌位，需要通過onWindowFocusChanged等方法來確定當前頁面載入完畢後去重新整理自定義鍵盤的狀態，否則會報錯。

2.自定義數字鍵盤的程式碼：


public class KeyboardPopupWindow extends PopupWindow {
    private static final String TAG = "KeyboardPopupWindow";
    private Context context;
    private View anchorView;
    private View parentView;
    private EditText editText;
    private boolean isRandomSort = false;//數字是否隨機排序
    private List<Integer> list = new ArrayList<>();
    private int[] commonButtonIds = new int[]{R.id.button00, R.id.button01, R.id.button02, R.id.button03,
            R.id.button04, R.id.button05, R.id.button06, R.id.button07, R.id.button08, R.id.button09};

    /**
     * @param context
     * @param anchorView
     * @param editText
     * @param isRandomSort 數字是否隨機排序
     */
    public KeyboardPopupWindow(Context context, View anchorView, EditText editText, boolean isRandomSort) {
        this.context = context;
        this.anchorView = anchorView;
        this.editText = editText;
        this.isRandomSort = isRandomSort;
        if (context == null || anchorView == null) {
            return;
        }
        initConfig();
        initView();
    }


    private void initConfig() {
        setOutsideTouchable(false);
        setFocusable(false);
        setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        forbidDefaultSoftKeyboard();
    }

    /**
     * 禁止系統預設的軟鍵盤彈出
     */
    private void forbidDefaultSoftKeyboard() {
        if (editText == null) {
            return;
        }
        if (android.os.Build.VERSION.SDK_INT > 10) {//4.0以上，使用反射的方式禁止系統自帶的軟鍵盤彈出
            try {
                Class<EditText> cls = EditText.class;
                Method setShowSoftInputOnFocus;
                setShowSoftInputOnFocus = cls.getMethod("setShowSoftInputOnFocus", boolean.class);
                setShowSoftInputOnFocus.setAccessible(true);
                setShowSoftInputOnFocus.invoke(editText, false);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 重新整理自定義的popupwindow是否outside可觸控反應：如果是不可觸控的，則顯示該軟鍵盤view
     *
     * @param isTouchable
     */
    public void refreshKeyboardOutSideTouchable(boolean isTouchable) {
        setOutsideTouchable(isTouchable);
        if (!isTouchable) {
            show();
        } else {
            dismiss();
        }
    }

    private void initView() {
        parentView = LayoutInflater.from(context).inflate(R.layout.keyboadview, null);
        initKeyboardView(parentView);
        setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        setContentView(parentView);
    }

    private void initKeyboardView(View view) {
        LinearLayout dropdownLl = view.findViewById(R.id.dropdownLl);
        dropdownLl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });

        //①給數字鍵設定點選監聽
        for (int i = 0; i < commonButtonIds.length; i++) {
            final Button button = view.findViewById(commonButtonIds[i]);
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int curSelection = editText.getSelectionStart();
                    int length = editText.getText().toString().length();
                    if (curSelection < length) {
                        String content = editText.getText().toString();
                        editText.setText(content.substring(0, curSelection) + button.getText() + content.subSequence(curSelection, length));
                        editText.setSelection(curSelection + 1);
                    } else {
                        editText.setText(editText.getText().toString() + button.getText());
                        editText.setSelection(editText.getText().toString().length());
                    }
                }
            });
        }

        //②給小數點按鍵設定點選監聽
        view.findViewById(R.id.buttonDot).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int curSelection = editText.getSelectionStart();
                int length = editText.getText().toString().length();
                if (curSelection < length) {
                    String content = editText.getText().toString();
                    editText.setText(content.substring(0, curSelection) + "." + content.subSequence(curSelection, length));
                    editText.setSelection(curSelection + 1);
                } else {
                    editText.setText(editText.getText().toString() + ".");
                    editText.setSelection(editText.getText().toString().length());
                }
            }
        });

        //③給叉按鍵設定點選監聽
        view.findViewById(R.id.buttonCross).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int length = editText.getText().toString().length();
                int curSelection = editText.getSelectionStart();
                if (length > 0 && curSelection > 0 && curSelection <= length) {
                    String content = editText.getText().toString();
                    editText.setText(content.substring(0, curSelection - 1) + content.subSequence(curSelection, length));
                    editText.setSelection(curSelection - 1);
                }
            }
        });
    }


    public void show() {
        if (!isShowing() && anchorView != null) {
            doRandomSortOp();
            this.showAtLocation(anchorView, Gravity.BOTTOM, 0, 0);
        }
    }

    /**
     * 隨機分佈數字
     */
    private void doRandomSortOp() {
        if (parentView == null) {
            return;
        }
        if (!isRandomSort) {
            for (int i = 0; i < commonButtonIds.length; i++) {
                final Button button = parentView.findViewById(commonButtonIds[i]);
                button.setText("" + i);
            }
        } else {
            list.clear();
            Random ran = new Random();
            while (list.size() < commonButtonIds.length) {
                int n = ran.nextInt(commonButtonIds.length);
                if (!list.contains(n))
                    list.add(n);
            }
            for (int i = 0; i < commonButtonIds.length; i++) {
                final Button button = parentView.findViewById(commonButtonIds[i]);
                button.setText("" + list.get(i));
            }
        }
    }

    public void releaseResources() {
        this.dismiss();
        context = null;
        anchorView = null;
        if (list != null) {
            list.clear();
            list = null;
        }
    }
    
}

程式碼實現的邏輯相對簡單：

  1. 通過給popupwindow設定contentView、彈出位置、邊界外觸控引數等數值，實現大體樣式上的效果；
  2. 給contentView中的每個button設定點選事件，並處理傳遞的EditText數值及焦點變化情況；
  3. 設定隨機標誌位，進行數值鍵盤數值隨機的分佈；
  4. forbidDefaultSoftKeyboard中處理：禁止EditText預設的軟鍵盤彈出。因為要實現EditText焦點仍舊可見的效果，目前試過的其它集中方式仍有較大的缺陷，所以是通過反射的方法來達到目的。

四.小結

當然，除了以上方式，還可以使用系統的KeyboardView和Keyboard來實現相應的效果。
在仿寫的過程中會發現，實現這一效果會涉及到一些體驗性的細節點，而微信正是做到了這一點，所以在使用層面上會很方便。有些細節點會可能會比實現整個大致效果更為麻煩，但有時候恰巧這些很容易被忽視的小九九是與眾不同的地方。
最後附上GitHub的原始碼地址：

點選此處連結>>

相關推薦

Android 實現自定義安全數字鍵盤（仿微信）

背景 大部分的金融App會對預設的數字鍵盤進行處理，以實現自定義的數字安全鍵盤。基於此，本文對對微信數字鍵盤樣式進行了仿寫，實現了一套自定義的數字安全鍵盤（支援隨機數字分佈）。 一.圖示效果 二.需要考慮的問題 佈局的實現方式； demo中使用了popupw

jquery+css實現自定義對話方塊功能（不使用外掛）

當今網路上各種jquery對話方塊外掛層出不窮，可是我為什麼要放棄這些外掛選擇自己使用jquery和css來自定義對話方塊的呢？有兩方面的原因，一個是有利於自己更加深入的瞭解css和jquery的特性，另一方面也可以更加的相容自己的專案。這裡面有幾個關鍵性的技術點，但是我們

Android 使用RecyclerView實現（仿微信）的聯絡人A-Z字母排序和過濾搜尋功能

之前做專案的時候遇到一個需求是實現品牌的字母排序功能，網上的資料很多，但是有一部分有bug，這篇文章是我學習和解決部分bug之後的總結。今天帶來的是RecyclerView的A-Z字母排序和過濾搜尋功能。 首先上效果圖： 重點：1、實現資料排序分類 2、

iOS開發-自定義相機（仿微信）拍照、視訊錄製

網上有很多自定義相機的例子，這裡只是我臨時寫的一個小demo，僅供參考： 用到了下面幾個庫： #import <AVFoundation/AVFoundation.h> #import <AssetsLibrary/AssetsLibra

開發（仿微信）Android日程總結（四）

最後一次記錄了，通訊基本實現，朋友圈粗略實現，新增好友實現。 其中一部分發朋友圈新增好友在我的GitHub上，另一部分是組員用eclipse寫的。gong共用一個數據庫，可是開發出兩個軟體，無法整合（

WKWebView載入進度條（仿微信）

WKWebView添加了estimatedProgress屬性（double型別），我們可以利用該屬性來設定UIProgressView 為頁面新增UIProgressView屬性 @pro

Android RecyclerView中實現自定義GridView的方式（實現不同item）

中文網站上，有關RecyclerView的文章實在是太少了，初次接觸到RecyclerView，我便發現了它的強大之處，並且深深的愛上了它，下面我寫一點在我工作中遇到的問題，並用RecyclerView得到了解決。 控制元件理解：RecyclerView，顧名思義，僅是提供

android實現自定義相機效果

樓主在進行android開發時用到了自定義攝像頭拍照並將所拍攝的照片轉化成二進位制流輸出這一功能(當然程式裡也附帶將圖片儲存在sd卡里的功能)，花了好多天的時間查了很多資料最後終於把它給搞出來了。。。 來~~~直接上圖~~~ 首先先搞出界面佈局來 <?xml version=

Android Studio建立自定義jks簽名檔案（Mac os系統）

1，開啟你的專案，選擇Build-->Generate singed APK-->到達所需要的介面，如圖所示： 2，到達所需介面如圖所示： 注意：2，顯示的介面的呈現結果是因為我已經建立過jks檔案了，如果你沒有建立過的話就在圖2中箭頭所指的“Create new

Android實現自定義dialog

Android自定Dialog 先上效果圖： 1.先在drawable下新建一個drawble resource file，這個檔案用於dialog的圓角背景 <?xml version="1.0" encoding="utf-8"?>

Android：自定義控制元件 --- 自定義屬性 列舉值（固定屬性值）

今天寫一個自定義控制元件，為了提高使用者使用效率，需要對一個屬性的所有可能屬性值進行列舉（即，只能選擇使用給出的屬性值） 查了很多資料，自己總結一下。 如何寫自定義控制元件就不在贅述了，網上很多大神寫的都很好，此處只說明這一種情況。 attrs.xml <?xml

一步一步帶你實現自定義圓形進度條（詳解）

        每次看到別人做出炫酷的都會想，這個應該很難吧？這是心理上先入為主的就這麼認為了，其實實現很簡單，下面一步一步的詳細剖析自定義圓形進度條的步驟。 首先看效果圖： 篇幅有點長，耐心看完肯定get新技能。 看每一個檢視都包含了些什麼。 最

Android實現自定義相機系列(1)—自定義view裁剪控制元件

目標 本系列文章主要記錄自定義相機拍照系列，專案原始碼還在編寫中，後續會傳到github，內容包括： 1、使用Android的Camera API自定義拍照模式，例如人臉拍照，OCR拍照等； 2、對拍完的照片進行裁剪； 3、自定義圖片伸縮view，使用手勢對圖

Android實現自定義引導頁，玩轉ViewPager

ViewPager簡介：ViewPager（android.support.v4.view.ViewPager）是android擴充套件包v4包中的類，這個類可以讓使用者左右切換當前的view，實現滑動切換的效果。注意：ViewPager類直接繼承了ViewGroup類，也就是說它和我們經常打交道的Linea

Android自定義ActionBar背景顏色（從原始碼分析）

Android自定義ActionBar背景顏色 修改前後效果圖：   在style.xml里加一行程式碼搞定 <!-- Base application theme. --> <style name="AppTheme" parent="

android editText自動彈出軟鍵盤（輸入鍵盤）

有一個介面有如下的需求：有一個textview上面顯示的是400，我點選之後，彈出對話方塊，對話方塊中有一個輸入框，將400傳遞過來也是顯示400，當點選了textview，預設全選400，此時也同時有輸入法彈出來，這樣就是全選，讓使用者可以使用輸入法中的刪除鍵，一下子刪除

Android 實現自定義寬高比的ImageView

前言 我們為什麼要用到寬高比固定的ImageView呢？因為Android螢幕大小不一樣，同樣一張圖片可能會在不同的裝置上顯示效果不同，會發生拉伸等情況。今天就來說一種解決方案，讓圖片的寬高比固定，保證不變形。為了實現這個效果，我們需要自定義一個ImageView。 思路 根據這個ImageView

Android實現自定義鎖屏控制

   當在Android手機上需要實現自定義的鎖屏,  往往在進入自定義的鎖屏介面介面之前需要先解開螢幕鎖, 以順利的進入自定義鎖屏介面 ，並能方便使用者即時的做其他操作,下面用程式碼來實現這一功能：  1、點亮螢幕與解系統鎖 //light the screen Pow

Android實現自定義帶文字和圖片的Button

專案中的需求往往十分怪異，例如在按鈕文字的左邊加一個圖示，這樣按鈕內部既有文字又有圖片，乍看之下Button和ImageView都沒法直接使用，若用LinearLayout對ImageView和Button組合佈局，這樣固然可行，但是佈局檔案會冗長許多 其實有一個既簡單又靈

android 自定義倒計時控制元件（圓形倒計時顯示）

先上效果圖 - 倒計時結束 程式碼塊 attr.xml 控制元件需要用到的屬性： <?xml version="1.0" encoding="utf-8"?> <resources> <de