前言

最近項(xiàng)目中有支付功能，用戶輸入密碼時(shí)要類(lèi)似微信支付密碼輸入框的樣式，本想直接copy網(wǎng)上的，但設(shè)計(jì)姐姐總是對(duì)樣式挑三揀四，抽空自己自定義了一個(gè)，無(wú)奈之下抽空自定義了個(gè)，并把它貼到GitHub上供網(wǎng)友們參考。

示例

廢話不多說(shuō)，先看效果圖。

number-input-video.gif

實(shí)現(xiàn)

BorderTextView

• 首先，實(shí)現(xiàn)這種效果我用多個(gè)TextView控件組合，為什么是TextView呢，因?yàn)槲也粌H需要文字大小顏色等可以定制，還要文字的背景色，背景框等可以變化。但系統(tǒng)的TextView設(shè)置背景過(guò)于單一，假如我要帶圓角的背景，甚至是圓角可以變化的背景，這就麻煩了。因此我繼承TextView自定義了BorderTextView。

• BorderTextView控件主要是文字的背景色可變化，有邊框和填充兩種背景。

1. 邊框的粗細(xì)、顏色、圓角均可定制。
2. 填充背景時(shí)，填充顏色，背景圓角可定制。
3. 除此之外，BorderTextView有明文顯示和密文顯示兩種模式。考慮過(guò)設(shè)置transformationMethod屬性來(lái)將TextView顯示成"●"，但有時(shí)候設(shè)置的"●"太小了，而且顏色又單一，因此我重寫(xiě)了TextView的setBackgroundColor方法，在文字的中心化了個(gè)實(shí)心圈覆蓋文字，同時(shí)"●"的顏色大小均可變化。
4. 核心代碼如下

 override fun onDraw(canvas: Canvas) {
        mStrokePaint.isAntiAlias = true
        mStrokePaint.strokeWidth = strokeWidth.toFloat()
        mStrokePaint.color = strokeColor
        mStrokePaint.style = if (isFill) Paint.Style.FILL else Paint.Style.STROKE
        mStrokePaint.strokeCap = Paint.Cap.ROUND
        //解決canvas.drawRoundRect時(shí)，四個(gè)圓角線較粗問(wèn)題
        if (rectF == null) {
            val d = strokeWidth / 2
            rectF = RectF(d.toFloat(), d.toFloat(), (measuredWidth - d).toFloat(), (measuredHeight - d).toFloat())
        }
        if (mBgPaint != null) {
            canvas.drawRoundRect(rectF!!, cornerRadius.toFloat(), cornerRadius.toFloat(), mBgPaint!!)
        }
        canvas.drawRoundRect(rectF!!, cornerRadius.toFloat(), cornerRadius.toFloat(), mStrokePaint)
        if (mIsPassWordMode && text.isNotEmpty()) {
            mDotPaint.style = Paint.Style.FILL
            mDotPaint.color = textColors.defaultColor
            val xy = measuredWidth / 2.toFloat()
            canvas.drawCircle(xy, xy, textSize / 2, mDotPaint)
        }
        super.onDraw(canvas)
    } 

• EditText
  EditText用于監(jiān)聽(tīng)用戶輸入的數(shù)字，將其的背景設(shè)置成透明，再設(shè)置 isCursorVisible = false、inputType = InputType.TYPE_CLASS_NUMBER 屬性。同時(shí)，用戶輸入的時(shí)候需要攔截輸入內(nèi)容，再將內(nèi)容顯示到BorderTextView上。監(jiān)聽(tīng)用戶鍵盤(pán)的KeyEvent.KEYCODE_DEL事件用戶處理輸入內(nèi)容的刪除
• 搞定BorderTextView和EditText后就簡(jiǎn)單了，用List集合存儲(chǔ)TextViews，創(chuàng)建LineaLayout將N個(gè)TextView添加過(guò)去，調(diào)整其位置就ok了。

   /**
    * 初始化EditText
    */
    private fun initEditText() {
        mEditText = EditText(context)
        mEditText.let {
            it.setBackgroundColor(Color.TRANSPARENT)
            it.isFocusable = true
            it.isCursorVisible = false
            it.inputType = InputType.TYPE_CLASS_NUMBER
        }
    }
  /**
  * 監(jiān)聽(tīng)刪除鍵
  **/
  mEditText.setOnKeyListener { v, keyCode, event ->
            if (keyCode == KeyEvent.KEYCODE_DEL && event.action == KeyEvent.ACTION_DOWN) {
                if (mInputSb.isNotEmpty()) {
                    mInputSb.delete(mInputSb.length - 1, mInputSb.length)
                    mTextViews[mInputSb.length].text = ""
                    return@setOnKeyListener true
                }
            }
            return@setOnKeyListener false
        }

自定義屬性

可用方法

使用示例

• 上示例圖中xml代碼如下

  <LinearLayout
      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:gravity="center"
      android:orientation="vertical"
      android:paddingBottom="20dp"
      android:paddingTop="20dp"
      tools:context="com.neworin.sample.MainActivity">
  
      <com.neworin.numberinputview.widget.NumberInputView
          android:id="@+id/sample_niv1"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          app:niv_count="4"
          app:niv_is_fill="false"
          app:niv_text_size_sp="18"/>
  
      <com.neworin.numberinputview.widget.NumberInputView
          android:id="@+id/sample_niv2"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          app:niv_border_color="@color/colorPrimaryDark"
          app:niv_border_radius="0dp"
          app:niv_count="5"
          app:niv_text_color="@color/color_red"/>
  
      <com.neworin.numberinputview.widget.NumberInputView
          android:id="@+id/sample_niv3"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          app:niv_border_color="@color/input_layout_bg"
          app:niv_border_radius="0dp"
          app:niv_count="6"
          app:niv_is_fill="true"
          app:niv_text_size_sp="20"/>
  
      <com.neworin.numberinputview.widget.NumberInputView
          android:id="@+id/sample_niv4"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          app:niv_count="6"
          app:niv_is_pw_mode="true"
          app:niv_text_color="@color/colorPrimary"
          app:niv_text_size_sp="18"/>
  
  </LinearLayout>
  

效果圖

最后附上多種效果圖以及GitHub地址：https://github.com/NewOrin/number-input

效果圖