Android實現(xiàn)一個簡易的帶邊輸入框
話不多說,直接上圖:
要實現(xiàn)這個效果,不得不再回顧下自定義View的流程,感興趣的童鞋可以自行網(wǎng)上搜索,這里只提及該效果涉及到的內(nèi)容。總體實現(xiàn)大致流程:
- 繼承AppCompatEditText
- 配置可定義的資源屬性
- onDraw() 方法的重寫
首先還得分析:效果圖中最多只能輸入6個數(shù)字,需要計算出每個文字的寬高和間隙,再分別繪制文字背景和文字本身。從中我們需要提取背景顏色、高度、邊距等私有屬性,通過新建attrs.xml文件進行配置:
<declare-styleable name="RoundRectEditText"> <attr name="count" format="integer"/> <attr name="itemPading" format="dimension"/> <attr name="strokeHight" format="dimension"/> <attr name="strokeColor" format="color"/>/> </declare-styleable>
這樣在初始化的時候即可給你默認值:
val typedArray =context.obtainStyledAttributes(it, R.styleable.RoundRectEditText) count = typedArray.getInt(R.styleable.RoundRectEditText_count, count) itemPading = typedArray.getDimension(R.styleable.RoundRectEditText_itemPading,0f) strokeHight = typedArray.getDimension(R.styleable.RoundRectEditText_strokeHight,0f) strokeColor = typedArray.getColor(R.styleable.RoundRectEditText_strokeColor,strokeColor) typedArray.recycle()
接下來便是重頭戲,如何繪制文字和背景色。思路其實很簡單,通過for循環(huán)去遍歷繪制每一個數(shù)字。關(guān)鍵點還在于去計算每個文字的位置及寬高,只要得到了位置和寬高,繪制背景和繪制文字易如反掌。
獲取每個文字寬度:
strokeWith =(width.toFloat() - paddingLeft.toFloat() - paddingRight.toFloat() - (count - 1) * itemPading) / count
文字居中需要計算出對應(yīng)Y值:
val fontMetrics = paint.fontMetrics val textHeight = fontMetrics.bottom - fontMetrics.top val distance = textHeight / 2 - fontMetrics.bottom val baseline = height / 2f + distance
文字的X值則根據(jù)當(dāng)前index和文字寬度以及各邊距得出:
private fun getIndexOfX(index: Int): Float { return paddingLeft.toFloat() + index * (itemPading + strokeWith) + 0.5f * strokeWith }
得到了位置,寬高接下來的步驟再簡單不過了。使用drawText 繪制文字,使用drawRoundRect 繪制背景。這里有一個細節(jié)一定要注意,繪制背景一定要在繪制文字之前,否則背景會把文字給覆蓋。
另外,還需要注意一點。如果onDraw方法中不注釋掉超類方法,底部會多出一段輸入的數(shù)字。其實很好理解,這是AppCompatEditText 自身繪制的數(shù)字,所以我們把它注釋即可,包括光標(biāo)也是一樣。如果想要光標(biāo)則需要自己在onDraw方法中繪制即可。
//隱藏自帶光標(biāo) super.setCursorVisible(false) override fun onDraw(canvas: Canvas) { //不注釋掉會顯示在最底部 // super.onDraw(canvas) ...... }
以上便是實現(xiàn)帶邊框的輸入框的全部類型,希望對大家有所幫助!
到此這篇關(guān)于Android實現(xiàn)一個簡易的帶邊輸入框的文章就介紹到這了,更多相關(guān)Android實現(xiàn)輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android 中 onSaveInstanceState()使用方法詳解
這篇文章主要介紹了Android 中 onSaveInstanceState()使用方法詳解的相關(guān)資料,希望通過本文大家能夠掌握這部分知識,需要的朋友可以參考下2017-09-09利用源碼編譯Android系統(tǒng)的APK和可執(zhí)行命令的方法
這篇文章主要介紹了利用源碼編譯Android系統(tǒng)的APK和可執(zhí)行命令的方法,示例在Linux系統(tǒng)環(huán)境上進行構(gòu)建,需要的朋友可以參考下2016-02-02Android實現(xiàn)數(shù)據(jù)按照時間排序
這篇文章主要為大家詳細介紹了Android實現(xiàn)數(shù)據(jù)按照時間排序的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-09-09Android PopupMenu彈出菜單的實現(xiàn)
這篇文章主要介紹了 Android PopupMenu彈出菜單的實現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家,實現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10使用Android Studio創(chuàng)建OpenCV4.1.0 項目的步驟
這篇文章主要介紹了使用Android Studio創(chuàng)建OpenCV4.1.0 項目的步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10Android制作微信app頂部menu菜單(ActionBar)
這篇文章主要為大家詳細介紹了Android利用ActionBar制作微信app頂部menu菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02