前言

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

示例

廢話不多說，先看效果圖。

number-input-video.gif

實現

BorderTextView

首先，實現這種效果我用多個TextView控件組合，為什么是TextView呢，因為我不僅需要文字大小顏色等可以定制，還要文字的背景色，背景框等可以變化。但系統的TextView設置背景過于單一，假如我要帶圓角的背景，甚至是圓角可以變化的背景，這就麻煩了。因此我繼承TextView自定義了BorderTextView。

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

邊框的粗細、顏色、圓角均可定制。

填充背景時，填充顏色，背景圓角可定制。

除此之外，BorderTextView有明文顯示和密文顯示兩種模式。考慮過設置transformationMethod屬性來將TextView顯示成"●"，但有時候設置的"●"太小了，而且顏色又單一，因此我重寫了TextView的setBackgroundColor方法，在文字的中心化了個實心圈覆蓋文字，同時"●"的顏色大小均可變化。

核心代碼如下

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時，四個圓角線較粗問題

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用于監聽用戶輸入的數字，將其的背景設置成透明，再設置 isCursorVisible = false、inputType = InputType.TYPE_CLASS_NUMBER 屬性。同時，用戶輸入的時候需要攔截輸入內容，再將內容顯示到BorderTextView上。監聽用戶鍵盤的KeyEvent.KEYCODE_DEL事件用戶處理輸入內容的刪除

搞定BorderTextView和EditText后就簡單了，用List集合存儲TextViews，創建LineaLayout將N個TextView添加過去，調整其位置就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

}

}

/**

* 監聽刪除鍵

**/

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

}

自定義屬性

name

說明

format

默認值

niv_text_size_sp

輸入框字體大小

integer

16

niv_text_color

輸入框字體顏色

color

#333333

niv_text_divider

輸入框間隔

dimension

5

niv_text_width

輸入框寬度(width=height)

dimension

40

niv_border_width

輸入框邊框寬度

dimension

2

niv_border_color

輸入邊框顏色

color

#333333

niv_border_radius

輸入框圓角角度

dimension

4

niv_is_fill

是否填充輸入框

boolean

false

niv_count

輸入框個數(最大為10)

integer

6

niv_is_pw_mode

輸入數字是否用點代替

boolean

false

可用方法

method_name

description

return type

setInputCompleteListener(inputCompleteListener: InputCompleteListener)

輸入完成時監聽

Unit

使用示例

上示例圖中xml代碼如下

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">

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"/>

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"/>

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"/>

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"/>

效果圖

效果圖

總結

以上是生活随笔為你收集整理的android确认密码代码,Android自定义View实现验证码or密码输入框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。