Android自定義密碼輸入框的簡單實現過程
一、實現效果及方案
預期效果圖:
如上圖所示,要實現一個這種密碼輸入框的樣式,原生並未提供類似的效果,所以需要自定義控件的方式實現。
預期的基礎效果:
隻接受數字;
支持輸入加密顯示;
支持刪除;
密碼位數可配置;
文字大小、顏色、數字框背景可配置;
方案分析:
需要解決的問題:
配置性;
輸入、刪除如何實現?
整體UI如何實現?
1.對於輸入刪除可以通過setOnKeyListener監聽軟件盤的事件。
2.可配置性數據可以通過自定義的屬性文件配置;
3.對於UI效果:
A:可以基於原生控件做開發,每一個數字佈局對應一個TextView,選用數據結構對其管理,再選用一種容器佈局,比如LinearLayout進行添加。
B:通過自定義View的方式開發,需要自行繪制,繪制的內容包括背景、及密碼內容、密碼加密樣式內容。
二、實現
這裡選用方案B的方式進行實現,盡量使用較少的控件去實現,使用A的方案至少要用到5個原生控件的組合。
1.繼承ViewGrop還是View?
如果選用方案A的話其實算是繼承瞭ViewGrop,而內部的單個數字則作為一個獨立的子控件,這樣的話是可以繼承ViewGrop的
,但顯然不需要這麼麻煩(需要處理layout等),這個密碼輸入就是一個獨立的控件不需要再加入子控件,所以直接繼承View。
class PasswordEditText @JvmOverloads constructor( context: Context, attributeSet: AttributeSet? = null, ) : View(context, attributeSet, 0) { }
2.繼承View的話就要處理 wrap_content,所以要重寫onMeasure,即在未設置具體的寬度時也要能夠正常的顯示測量。先定義一些寬高顏色的變量:
//密碼位數 private var passwordLength = 4 private var textColor = 0 //間隔 -> dp2px private var itemPadding = 5 //單個數字包括背景寬度 dp2px private var itemWidth = 30 private var bgItemColor = 0 private val mPaintBg = Paint() //用於存儲輸入後的密碼 private val password = arrayOfNulls<String>(passwordLength)
寬度的話相對來說還是很好計算的:
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) var width = 0 when (MeasureSpec.getMode(widthMeasureSpec)) { MeasureSpec.UNSPECIFIED,MeasureSpec.AT_MOST ->{ width = itemWidth * passwordLength + itemPadding * (passwordLength-1) } MeasureSpec.EXACTLY ->{ width = MeasureSpec.getSize(widthMeasureSpec) itemWidth = (width - itemPadding *(passwordLength -1)) / passwordLength } } setMeasuredDimension(width,itemWidth) }
看著UI圖基本可以算出來瞭,不涉及太復雜的計算,這裡並未對高度進行處理,理論上高度的值應該用指定的就好瞭;
需要做的測量基本就是這些瞭,下面開始繪制背景瞭:
也很簡單根據 passwordLength 循環繪制圓角矩形就OK瞭,而參數的話也很好計算出來:
private fun drawBgItems(canvas: Canvas) { for (i in password.indices) { 未處理padding值 加上即可 val rect = RectF( (i * itemWidth + (i) * itemPadding).toFloat(), 0f, ((i+1) * itemWidth + i * itemPadding).toFloat(), itemWidth.toFloat() ) canvas.drawRoundRect(rect, 5f, 5f, mPaintBg) } }
為瞭讓效果更明顯,先畫瞭一個顏色鮮艷的:
背景的話就繪制OK瞭,下面要做的就是監聽事件再繪制密碼內容瞭;
要實現一個OnKeyListener
//鍵盤監聽 private val keyListener = OnKeyListener { v, keyCode, event -> val action = event.action if (action == KeyEvent.ACTION_DOWN) { if (keyCode == KeyEvent.KEYCODE_DEL) { //刪除 return@OnKeyListener true } if (keyCode >= KeyEvent.KEYCODE_0 && keyCode <= KeyEvent.KEYCODE_9) { //數字鍵 } if (keyCode == KeyEvent.KEYCODE_ENTER) { //確認鍵 return@OnKeyListener true } } return@OnKeyListener false }
這裡隻是添加好瞭回調條件,還要做相應的處理。但鍵盤還沒彈出,所以要先處理點擊事件調用系統的方法主動彈出軟鍵盤才行
override fun onTouchEvent(event: MotionEvent?): Boolean { if (event!!.action == MotionEvent.ACTION_DOWN) { //獲取焦點 requestFocus() //getContext().getSystemService(Context.INPUT_METHOD_SERVICE) inputManager.showSoftInput(this, InputMethodManager.SHOW_FORCED) return true } return super.onTouchEvent(event) }
重寫onTouchEvent之後就可以攔截點擊事件彈出鍵盤拉。而View和軟鍵盤的聯系需要通過onCreateInputConnection 來實現,具體可以看下源碼的介紹。
下面接著處理監聽事件,首先是在接受到數字輸入時的處理,要把輸入的數字存儲到容器並繪制出來
這裡需要註意keyCode 的值,看下源碼並不是KEYCODE_0 就是0瞭
再存儲一下輸入的數字:
if (keyCode >= KeyEvent.KEYCODE_0 && keyCode <= KeyEvent.KEYCODE_9) { //數字鍵 password[currentInputPosition] = (keyCode - 7).toString() currentInputPosition++ postInvalidate() return@OnKeyListener true }
currentInputPosition為瞭標記當前操作的位置,方便添加和刪除,因為都是從兩頭開始的用這個值就可以瞭。
下面開始繪制文字瞭,如果加密的話隻需要在每個背景的中心畫一個小黑點就OK瞭,或者直接畫一個數字,根據基線用drawText畫就好瞭,而Y軸的基線很好確定就是高度的一半像素減去高度文字一半,通過設置textAlign = Paint.Align.CENTER即可實現橫向上的居中(會根據X基線),X軸的基線則需要計算一下,比如第一個框的X基線則應該是,框寬的一半再減去繪制文字寬度的一半,這樣才能在中間,第二個框內X的基線應該是:paddingLeft+1框寬+1padding+框寬/2
所以繪制文字的代碼就出來瞭:
//繪制文字 private fun drawPasswordNumber(canvas: Canvas) { for (i in password.indices) { if (password[i] != null) { //沒有開啟明文顯示,繪制密碼密文 val txt = if (isCipherEnable) cipherString else password[i] mPaintTv.getTextBounds(txt, 0, txt!!.length, rectTv) val offset = (rectTv.top + rectTv.bottom) / 2 canvas.drawText( password[i]!!, (paddingLeft + itemWidth * i + itemPadding * i + itemWidth / 2).toFloat(), (paddingTop + itemWidth / 2).toFloat() - offset, mPaintTv ) } } }
這裡加瞭是否開啟密文顯示的開關,最終運行的效果如下:
這個黑點也可以通過畫圓的方式進行繪制,但無法通過字符串進行動態配置。
再輸入完四位以後在點的話就會數組越界閃退瞭,所以在完成相應位數的添加後要禁止再繪制。
if (keyCode >= KeyEvent.KEYCODE_0 && keyCode <= KeyEvent.KEYCODE_9) { //加入判斷 currentInputPosition if (currentInputPosition == passwordLength) { return@OnKeyListener true } password[currentInputPosition] = (keyCode - 7).toString() currentInputPosition++ postInvalidate() return@OnKeyListener true }
下面要處理刪除操作瞭,刪除要做的就是去除數組中保存的已輸入密碼,更新操作標記位,再刷新繪制就OK瞭
if (keyCode == KeyEvent.KEYCODE_DEL) { //刪除 if(currentInputPosition == 0){ return@OnKeyListener true } password[currentInputPosition-1] = null currentInputPosition-- postInvalidate() return@OnKeyListener true }
看下最後的UI效果:
下面可以提供一些對外的方法、接口,比如獲取內容,輸入刪除確認的回調監聽。
//獲取輸入內容 fun getTextContent():String { val sb = StringBuilder() for (p in password) { p?.let { sb.append(p) } } return sb.toString() } //操作回調 加些需要的參數 interface OperationListener{ fun inputOperationCallBack() fun completeOperationCallBack() fun deleteOperationCallBack() }
這裡還可以繼續開發其他一些主流的樣式,比如下劃線、網格的樣式,但繪制思路基本相同,還可以加上一個任務類執行繪制光標的操作。
總結
一個簡單的自定義View Demo,自定義View的難點在於參數的計算和很多API一不用就會忘記,但是繼承ViewGroup還是View,測量繪制佈局的過程以及基本的繪制方法配置還是要清楚些,或者說能想起來,對於太復雜難以開發的控件感覺如果有現成的還是可以直接用的,畢竟沒那麼多時間去調試一些復雜的參數,如果能寫出來也很牛皮吧。
推薦閱讀:
- Android自定義View繪制貝塞爾曲線的方法
- Android自定義view實現滑動解鎖效果
- Android自定義View實現隨機數驗證碼
- Android View實現圓形進度條
- Android APP檢測實體按鍵事件詳解