Kotlin--›Android 自定義實現支付密碼數字鍵盤

你能學到什麼

1. kotlin的使用, 擴展特性的寫法等
2. 自定義ViewGroup的一些基礎知識
3. xml屬性的編寫和讀取

---

因爲每個按鍵都考慮到需要支持背景設置等其他個性設置和Touch手勢的處理, 所以我決定採用 每個按鍵 對應一個View的思路實現. 否則可以使用Canvas.drawText實現
這樣可以提高擴展性和可自定義性

1.根據效果圖先定義按鍵

//首先定義需要的那些按鍵
//順序打亂,展示的時候也就是亂序的,可以更安全.
//特殊按鍵-> "":表示空白佔位按鍵;  "-1":表示回退鍵, 也就是刪除.
var keys = arrayOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "-1")

更新對應的按鍵, 創建對應的view

 keys.forEach {
      val keyView: View = when (it) {
          "-1" -> {
              //刪除
              imageView(R.drawable.keyboard_del, R.drawable.keyboard_del_press).apply {
                  background = null
                  setBackgroundColor(Color.parseColor("#E2E7ED"))
              }
          }
          "" -> {
              //佔位View
              View(context).apply {
                  setBackgroundColor(Color.parseColor("#E2E7ED"))
              }
          }
          else -> {
              createKeyView(it)
          }
      }

      keyView.tag = it  //通過tag, 保存按鍵對應的值
      addView(keyView)
  }

private fun createKeyView(key: String): View {
     return if (useImageKey) {
         val keyRes = when (key) {
             "1" -> R.drawable.keyboard_1
             "2" -> R.drawable.keyboard_2
             "3" -> R.drawable.keyboard_3
             "4" -> R.drawable.keyboard_4
             "5" -> R.drawable.keyboard_5
             "6" -> R.drawable.keyboard_6
             "7" -> R.drawable.keyboard_7
             "8" -> R.drawable.keyboard_8
             "9" -> R.drawable.keyboard_9
             else -> R.drawable.keyboard_0
         }
         imageView(keyRes)
     } else {
         textView(key)
     }
 }

 private fun imageView(res: Int, pressRes: Int = -1): ImageView {
     return ImageView(context).apply {

         if (pressRes == -1) {
             setImageResource(res)
         } else {
             setImageResource(res)
             //setImageDrawable(ResUtil.selector(getDrawable(res), getDrawable(pressRes)))
         }

         scaleType = ImageView.ScaleType.CENTER

         keyViewBGDrawable?.let {
             background = it.constantState.newDrawable()
         }

         setOnClickListener(this@KeyboardLayout)
     }
 }

 private fun textView(text: String): TextView {
     return TextView(context).apply {
         gravity = Gravity.CENTER
         this.text = text
         setTextSize(TypedValue.COMPLEX_UNIT_PX, keyTextSize)

         keyViewBGDrawable?.let {
             background = it.constantState.newDrawable()
         }
         setTextColor(Color.BLACK)

         setOnClickListener(this@KeyboardLayout)
     }
 }

2.按鍵元素創建好之後, 開始自定義ViewGroup的標準操作

onMeasure:測量每個按鍵的寬度和高度

 override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        var widthSize = MeasureSpec.getSize(widthMeasureSpec)
        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
        var heightSize = MeasureSpec.getSize(heightMeasureSpec)
        val heightMode = MeasureSpec.getMode(heightMeasureSpec)

        if (widthMode != MeasureSpec.EXACTLY) {
            widthSize = resources.displayMetrics.widthPixels
        }

        if (heightMode != MeasureSpec.EXACTLY) {
            heightSize = (4 * keyViewHeight + 3 * vSpace).toInt()
        }

        childWidth = ((widthSize - 2 * hSpace - paddingLeft - paddingRight) / 3).toInt()
        childHeight = ((heightSize - 3 * vSpace - paddingTop - paddingBottom) / 4).toInt()
        childs { _, view ->
            view.measure(exactlyMeasure(childWidth), exactlyMeasure(childHeight))
        }
        setMeasuredDimension(widthSize, heightSize)
    }

onLayout:決定按鍵在ViewGroup中的座標位置

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
    //一行一行佈局, 共4行
    for (line in 0..3) {

        var top: Int = (paddingTop + line * (childHeight + vSpace)).toInt()

        //3列
        for (i in 0..2) {
            var left: Int = (paddingLeft + i * (childWidth + hSpace)).toInt()

            getChildAt(line * 3 + i).layout(left, top, left + childWidth, top + childHeight)
        }
    }
}

3:事件監聽和回調

 override fun onClick(v: View?) {
      if (onKeyboardInputListener == null) {
          return
      }

      v?.let { view ->
          val tag = view.tag
          if (tag is String) {
              val isDel = "-1" == tag
              onKeyboardInputListener?.onKeyboardInput(tag, isDel)
          }
      }
  }

4:xml中的屬性聲明

需要在 values 文件夾中創建一個任意文件名的xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="KeyboardLayout">
        <attr name="r_key_height" format="dimension"/>
        <attr name="r_key_width" format="dimension"/>
        <attr name="r_key_text_size" format="dimension"/>
        <attr name="r_key_background" format="reference"/>
        <attr name="r_background" format="reference"/>
        <attr name="r_use_image_key" format="boolean"/>
    </declare-styleable>
</resources>

declare-styleable 都是標準寫法, name對應的就是自定義view的類型, 都是標準寫法, 不同的format對應不同的get方法. 熟悉了就很容易使用.

5:xml中的屬性讀取

    init {
        val typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.KeyboardLayout) //注意1:
        keyViewHeight = typedArray.getDimensionPixelOffset(R.styleable.KeyboardLayout_r_key_height, keyViewHeight)
        //typedArray.getDimensionPixelOffset(R.styleable.KeyboardLayout_r_key_width, keyViewHeight)
        keyTextSize = typedArray.getDimension(R.styleable.KeyboardLayout_r_key_text_size, keyTextSize)
        useImageKey = typedArray.getBoolean(R.styleable.KeyboardLayout_r_use_image_key, useImageKey)

        keyViewBGDrawable = typedArray.getDrawable(R.styleable.KeyboardLayout_r_key_background)

        if (keyViewBGDrawable == null) {
            keyViewBGDrawable = getDrawable(R.drawable.base_white_bg_selector)
        }
        mBackgroundDrawable = typedArray.getDrawable(R.styleable.KeyboardLayout_r_background)
        if (mBackgroundDrawable == null) {
            mBackgroundDrawable = ColorDrawable(getColor(R.color.base_chat_bg_color))
        }

        setWillNotDraw(false)
        typedArray.recycle()  //注意2
    }

注意1,2: 都是必備的寫法, 中間部分纔是對應的屬性讀取操作.

---

源碼地址 https://github.com/angcyo/KeyboardLayout

也許你還想學習更多, 來我的羣吧, 我寫代碼的能力, 遠大於寫文章的能力:

聯繫作者

點此快速加羣

請使用QQ掃碼加羣, 小夥伴們在等着你哦!

關注我的公衆號, 每天都能一起玩耍哦!