自定義安全數字鍵盤（仿微信）
摘要：
背景
大部分的金融App會對預設的數字鍵盤進行處理，以實現自定義的數字安全鍵盤。基於此，本文對對微信數字鍵盤樣式進行了仿寫，實現了一套自定義的數字安全鍵盤（支援隨機數字分佈）。
一.圖示效果
GIF.gif
二.需要考慮的問題
...
背景
大部分的金融App會對預設的數字鍵盤進行處理，以實現自定義的數字安全鍵盤。基於此，本文對對微信數字鍵盤樣式進行了仿寫，實現了一套自定義的數字安全鍵盤（支援隨機數字分佈）。
一.圖示效果
GIF.gif
二.需要考慮的問題
- 佈局的實現方式；
demo中使用了popupwindow，通過xml檔案進行Tablayout佈局。 - 禁掉EditText預設軟鍵盤的彈出，替換為自定義的數字鍵盤及與其它EditText切換焦點時的彈出效果；
- 刪除和增加字元時需要同步更新游標的位置；
- 隨機數字分佈的實現；
三.實現程式碼
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;
}
}
}
程式碼實現的邏輯相對簡單：
- 通過給popupwindow設定contentView、彈出位置、邊界外觸控引數等數值，實現大體樣式上的效果；
- 給contentView中的每個button設定點選事件，並處理傳遞的EditText數值及焦點變化情況；
- 設定隨機標誌位，進行數值鍵盤數值隨機的分佈；
- forbidDefaultSoftKeyboard中處理：禁止EditText預設的軟鍵盤彈出。因為要實現EditText焦點仍舊可見的效果，目前試過的其它集中方式仍有較大的缺陷，所以是通過反射的方法來達到目的。
四.小結
當然，除了以上方式，還可以使用系統的KeyboardView和Keyboard來實現相應的效果。
在仿寫的過程中會發現，實現這一效果會涉及到一些體驗性的細節點，而微信正是做到了這一點，所以在使用層面上會很方便。有些細節點會可能會比實現整個大致效果更為麻煩，但有時候恰巧這些很容易被忽視的小九九是與眾不同的地方。