先來看UI給的效果圖

實現思路

• 繪製多個TextView控制元件用來顯示數字
• 繪製隱藏EditText用來接收輸入法內容(防止部分手機或輸入法監聽不到內容)
• 將EditText的內容顯示到TextView中

程式碼實現

• 自定義控制元件繼承至LinearLayout

public class CodeEditView extends LinearLayout

• 繪製多個TextView並繪製方塊邊框背景用來顯示數字

        for (int i = 0; i < EditViewNum; i++) {
            TextView textView = new TextView(mContext);
 

            textView.setBackgroundResource(R.drawable.shape_border_normal);
            textView.setGravity(Gravity.CENTER);
            textView.setTextSize(DensityUtil.sp2px(mContext,textSize));
            textView.getPaint().setFakeBoldText(true);
            textView.setLayoutParams(params);
            textView.setInputType
 
(inputTyte);
            textView.setTextColor(textColor);
            textView.setOnClickListener(this);
            mTextViewsList.add(textView);
            addView(textView);
        }

• 繪製EditText並將背景設為透明(不讓使用者看到,僅用來監聽輸入法內容,防止部分手機或輸入法不相容)

        mEditText = new EditText(context);
        mEditText.setBackgroundColor
 
(Color.parseColor("#00000000"));
        mEditText.setMaxLines(1);
        mEditText.setInputType(EditorInfo.TYPE_CLASS_NUMBER);
        mEditText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(EditViewNum)});
        mEditText.addTextChangedListener(this);
        mEditText.setTextSize(0);
        addView(mEditText);

• 監聽輸入法內容進行邏輯處理

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {}
    @Override
    public void afterTextChanged(Editable s) {
        if (callBack!=null) {
            callBack.afterTextChanged(s.toString());
        }
        if (s.length() <= 1) {
            mTextViewsList.get(0).setText(s);
        } else {
            mTextViewsList.get(mEditText.getText().length() - 1).setText(s.subSequence(s.length() - 1, s.length()));
        }
        if (s.length()==EditViewNum) {
            if (callBack!=null) {
                callBack.input(mEditText.getText().toString());
            }
        }
    }

• 當點選TextView時,將EditText獲取到焦點並彈出輸入法

    @Override
    public void onClick(View v) { //TextView點選時獲取焦點彈出輸入法
        mEditText.setFocusable(true);
        mEditText.setFocusableInTouchMode(true);
        mEditText.requestFocus();
        InputMethodManager imm = (InputMethodManager) mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
    }

完成後效果圖

使用方法

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.lvkaixuan:CodeEditView:v1.0.1'
}

佈局中使用控制元件

<com.lkx.library.CodeEditView
  android:id="@+id/codeEditView"
  android:gravity="center_horizontal"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"/>

程式碼中的回撥監聽

  codeEditView.setOnInputEndCallBack(new CodeEditView.inputEndListener() {
      @Override
      public void input(String text) { //輸入完畢後的回撥
           Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
      }

      @Override
      public void afterTextChanged(String text) { //輸入內容改變後的回撥
          textView.setText(text);
      }
 });

Demo地址