Android 自定義鍵盤

過時了

言簡意賅直奔主題!
項目有需求用戶輸入身份證的時候數字英文來回切不方便搞個自定義鍵盤吧


確實不方便輸入完數字還要切回去輸入英文,有的身份證最后一位是X

說干就干直接自定義View集成KeyboardView 好家伙 過時了!好吧反正也是就輸入數字和X 用KeyboardView寫本來就不少 那就自己畫吧...


這是畫完的效果

貼下代碼吧 雖然你們可能也不會用畢竟太丑了
主要就是最外層設置focusableInTouchMode屬性讓頁面進入的時候先不要獲取焦點
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    tools:context=".ui.KeyBoardActivity">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/mSystemET"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="系統鍵盤輸入"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/mCustomET"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="自定義鍵盤輸入"
        android:maxLength="18"
        app:layout_constraintTop_toBottomOf="@id/mSystemET" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/mKeyBoardCL"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/one"
            style="@style/keyboardItem"
            android:text="1" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/two"
            style="@style/keyboardItem"
            android:text="2" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/three"
            style="@style/keyboardItem"

            android:text="3" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/four"
            style="@style/keyboardItem"
            android:text="4" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/five"
            style="@style/keyboardItem"
            android:text="5" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/six"
            style="@style/keyboardItem"
            android:text="6" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/seven"
            style="@style/keyboardItem"
            android:text="7" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/eight"
            style="@style/keyboardItem"
            android:text="8" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/nine"
            style="@style/keyboardItem"
            android:text="9" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/x"
            style="@style/keyboardItem"
            android:text="X" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/zero"
            style="@style/keyboardItem"
            android:text="0" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/delete"
            style="@style/keyboardItem"
            android:background="@android:color/holo_red_light"
            android:text="DEL" />

        <androidx.constraintlayout.helper.widget.Flow
            android:id="@+id/mKeyBoardFlow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="100dp"
            app:constraint_referenced_ids="one,two,three,four,five,six,seven,eight,nine,x,zero,delete"
            app:flow_maxElementsWrap="3"
            app:flow_wrapMode="chain"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/mCloseKB"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:text="關閉"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/mKeyBoardFlow"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

style里面配置了公用的屬性

 <style name="keyboardItem">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">60dp</item>
        <item name="android:gravity">center</item>
        <item name="android:background">@android:color/holo_blue_light</item>
        <item name="android:textColor">@android:color/white</item>
  </style>

接著就是在我們的Activity中設置一些鍵盤的展示和隱藏的邏輯

  // 設置我們的自定義鍵盤所搭配的EditText不會彈出系統鍵盤
  mBinding.mCustomET.showSoftInputOnFocus = false
  mBinding.mCustomET.setOnFocusChangeListener { _, hasFocus ->
   if (hasFocus) {
      //自定義鍵盤輸入框獲取焦點的時候隱藏系統軟鍵盤并展示我們自己的鍵盤
      hideSoftKeyboard(this)
      mBinding.mKeyBoardCL.visibility = View.VISIBLE
    } else {
      //失去焦點的時候把我們的鍵盤也隱藏掉
      mBinding.mKeyBoardCL.visibility = View.GONE
    }
  }
  mBinding.mCustomET.setOnClickListener { 
      //當輸入框被點擊的時候展示我們的軟鍵盤
      mBinding.mKeyBoardCL.visibility = View.VISIBLE 
  }

隱藏系統鍵盤的方法

private fun hideSoftKeyboard(activity: Activity) {
    val view: View? = activity.currentFocus
    if (view != null) {
      val inputMethodManager = activity.getSystemService(INPUT_METHOD_SERVICE) as InputMethodManager
      inputMethodManager.hideSoftInputFromWindow(
          view.windowToken, InputMethodManager.HIDE_NOT_ALWAYS)
    }
  }

接下來處理我們的點擊事件

//根據點擊的按鈕如果是數字和X就是增加X則為刪除
 mBinding.mKeyBoardCL.children.forEach {
      if (it is TextView) {
        it.setOnClickListener { _ ->
          when (it.text.toString()) {
            "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "X" -> {
              keyboardAdd(it.text.toString())
            }
            "DEL" -> {
              keyboardRemove()
            }
            "關閉" -> {
              mBinding.mKeyBoardCL.visibility = View.GONE
            }
          }
        }
      }
    }

插入的方法

 /** * 增加字符 */
  private fun keyboardAdd(str: String) {
    // 當前文字
    val currentText = StringBuilder(mBinding.mCustomET.text.toString())
    // 身份證輸入滿18位禁止輸入
    if (currentText.length >= 18) return
    // 當前游標位置
    val currentIndex = mBinding.mCustomET.selectionStart
    var inputFlag = true
    // X只允許出現在18位
    if (str == "X" && currentIndex != 17) {
      inputFlag = false
    }
    if (inputFlag) {
      currentText.insert(currentIndex, str)
      mBinding.mCustomET.text = Editable.Factory.getInstance().newEditable(currentText.toString())
      mBinding.mCustomET.setSelection(currentIndex + 1)
    }
  }

刪除字符的方法

  /*** 移除字符*/
  private fun keyboardRemove() {
    // 當前文字
    val currentText = StringBuilder(mBinding.mCustomET.text.toString())
    // 當前游標位置
    val currentIndex = mBinding.mCustomET.selectionStart
    // 文字判空 并且游標不在最前端
    if (currentText.isNotEmpty() && currentIndex != 0) {
      // 刪除游標前一個字符
      currentText.deleteCharAt(currentIndex - 1)
      // 為EditText賦值
      mBinding.mCustomET.text = Editable.Factory.getInstance().newEditable(currentText.toString())
      // 游標往前移動一格
      mBinding.mCustomET.setSelection(currentIndex - 1)
    }
  }

完結散花



下面按照慣例放出Activity完整代碼

class KeyBoardActivity : BaseActivityV2<ActivityKeyBoardBinding>() {
  override fun event() {
    mBinding.mKeyBoardCL.visibility = View.GONE
    // 設置我們的自定義鍵盤所搭配的EditText不會彈出系統鍵盤
    mBinding.mCustomET.showSoftInputOnFocus = false

    mBinding.mCustomET.setOnFocusChangeListener { _, hasFocus ->
      if (hasFocus) {
        // 自定義鍵盤輸入框獲取焦點的時候隱藏系統軟鍵盤并展示我們自己的鍵盤
        hideSoftKeyboard(this)
        mBinding.mKeyBoardCL.visibility = View.VISIBLE
      } else {
        // 失去焦點的時候把我們的鍵盤也隱藏掉
        mBinding.mKeyBoardCL.visibility = View.GONE
      }
    }
    mBinding.mCustomET.setOnClickListener {
      // 當輸入框被點擊的時候展示我們的軟鍵盤
      mBinding.mKeyBoardCL.visibility = View.VISIBLE
    }
  }

  override fun click() {
    mBinding.mKeyBoardCL.children.forEach {
      if (it is TextView) {
        it.setOnClickListener { _ ->
          when (it.text.toString()) {
            "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "X" -> {
              keyboardAdd(it.text.toString())
            }
            "DEL" -> {
              keyboardRemove()
            }
            "關閉" -> {
              mBinding.mKeyBoardCL.visibility = View.GONE
            }
          }
        }
      }
    }
  }
  /*** 移除字符*/
  private fun keyboardRemove() {
    // 當前文字
    val currentText = StringBuilder(mBinding.mCustomET.text.toString())
    // 當前游標位置
    val currentIndex = mBinding.mCustomET.selectionStart
    // 文字判空 并且游標不在最前端
    if (currentText.isNotEmpty() && currentIndex != 0) {
      // 刪除游標前一個字符
      currentText.deleteCharAt(currentIndex - 1)
      // 為EditText賦值
      mBinding.mCustomET.text = Editable.Factory.getInstance().newEditable(currentText.toString())
      // 游標往前移動一格
      mBinding.mCustomET.setSelection(currentIndex - 1)
    }
  }
  /** * 增加字符 */
  private fun keyboardAdd(str: String) {
    // 當前文字
    val currentText = StringBuilder(mBinding.mCustomET.text.toString())
    // 身份證輸入滿18位禁止輸入
    if (currentText.length >= 18) return
    // 當前游標位置
    val currentIndex = mBinding.mCustomET.selectionStart
    var inputFlag = true
    // X只允許出現在18位
    if (str == "X" && currentIndex != 17) {
      inputFlag = false
    }
    if (inputFlag) {
      currentText.insert(currentIndex, str)
      mBinding.mCustomET.text = Editable.Factory.getInstance().newEditable(currentText.toString())
      mBinding.mCustomET.setSelection(currentIndex + 1)
    }
  }

  private fun hideSoftKeyboard(activity: Activity) {
    val view: View? = activity.currentFocus
    if (view != null) {
      val inputMethodManager = activity.getSystemService(INPUT_METHOD_SERVICE) as InputMethodManager
      inputMethodManager.hideSoftInputFromWindow(
          view.windowToken, InputMethodManager.HIDE_NOT_ALWAYS)
    }
  }
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容