快捷導(dǎo)航

Android實(shí)現(xiàn)一個(gè)簡易的帶邊輸入框

更新時(shí)間：2023年08月27日 15:42:06 作者：似曾相識2022

如今市面上APP的輸入框可以說是千奇百怪,不搞點(diǎn)花樣出來貌似代表格局沒打開,還在使用系統(tǒng)自帶的輸入框的兄弟可以停下腳步,哥帶你實(shí)現(xiàn)一個(gè)簡易的帶邊框輸入框,感興趣的同學(xué)可以自己動(dòng)手試一下

話不多說，直接上圖：

要實(shí)現(xiàn)這個(gè)效果，不得不再回顧下自定義View的流程，感興趣的童鞋可以自行網(wǎng)上搜索，這里只提及該效果涉及到的內(nèi)容。總體實(shí)現(xiàn)大致流程：

繼承AppCompatEditText
配置可定義的資源屬性
onDraw() 方法的重寫

首先還得分析：效果圖中最多只能輸入6個(gè)數(shù)字，需要計(jì)算出每個(gè)文字的寬高和間隙，再分別繪制文字背景和文字本身。從中我們需要提取背景顏色、高度、邊距等私有屬性，通過新建attrs.xml文件進(jìn)行配置：

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

這樣在初始化的時(shí)候即可給你默認(rèn)值：

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()

接下來便是重頭戲，如何繪制文字和背景色。思路其實(shí)很簡單，通過for循環(huán)去遍歷繪制每一個(gè)數(shù)字。關(guān)鍵點(diǎn)還在于去計(jì)算每個(gè)文字的位置及寬高，只要得到了位置和寬高，繪制背景和繪制文字易如反掌。

獲取每個(gè)文字寬度：

strokeWith =(width.toFloat() - paddingLeft.toFloat() - paddingRight.toFloat() - (count - 1) * itemPading) / count

文字居中需要計(jì)算出對應(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 繪制背景。這里有一個(gè)細(xì)節(jié)一定要注意，繪制背景一定要在繪制文字之前，否則背景會把文字給覆蓋。

另外，還需要注意一點(diǎn)。如果onDraw方法中不注釋掉超類方法，底部會多出一段輸入的數(shù)字。其實(shí)很好理解，這是AppCompatEditText 自身繪制的數(shù)字，所以我們把它注釋即可，包括光標(biāo)也是一樣。如果想要光標(biāo)則需要自己在onDraw方法中繪制即可。

//隱藏自帶光標(biāo)
super.setCursorVisible(false)
override fun onDraw(canvas: Canvas) {
        //不注釋掉會顯示在最底部
//        super.onDraw(canvas)
          ......
}

以上便是實(shí)現(xiàn)帶邊框的輸入框的全部類型，希望對大家有所幫助！

到此這篇關(guān)于Android實(shí)現(xiàn)一個(gè)簡易的帶邊輸入框的文章就介紹到這了,更多相關(guān)Android實(shí)現(xiàn)輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: