Android自定義實(shí)現(xiàn)一個省份簡稱鍵盤
hello啊各位老鐵，這篇文章我們重新回到Android當(dāng)中的自定義View，其實(shí)最近一直在搞Flutter，初步想法是，把Flutter當(dāng)中的基礎(chǔ)組件先封裝一遍，然后接著各個工具類，列表，網(wǎng)絡(luò)，統(tǒng)統(tǒng)由淺入深的搞一遍，弄完Flutter之后，再逐步的更新Android當(dāng)中的技術(shù)點(diǎn)，回頭一想，還是穿插著來吧，再系統(tǒng)的規(guī)劃，難免也有變化，想到啥就寫啥吧，能夠堅(jiān)持輸出就行。
今天的這個知識點(diǎn)，是一個自定義View，一個省份的簡稱鍵盤，主要用到的地方，比如車牌輸入等地方，相對來說還是比較的簡單，我們先看下最終的實(shí)現(xiàn)效果：
實(shí)現(xiàn)方式呢有很多種，我相信大家也有自己的一套實(shí)現(xiàn)機(jī)制，這里，我采用的是組合View，用的是LinearLayout的方式。
今天的內(nèi)容大致如下：
1、分析UI，如何布局
2、設(shè)置屬性和方法，制定可擴(kuò)展效果
3、部分源碼剖析
4、開源地址及實(shí)用總結(jié)
一、分析UI，如何布局
拿到UI效果圖后，其實(shí)也沒什么好分析的，無非就是兩塊，頂部的完成按鈕和底部的省份簡稱格子，一開始，打算用RecyclerView網(wǎng)格布局來實(shí)現(xiàn)，但是最后的刪除按鈕如何擺放就成了問題，直接懸浮在網(wǎng)格上邊，動態(tài)計(jì)算位置，顯然不太合適，也沒有這樣去搞的，索性直接拋棄這個方案，多布局的想法也實(shí)驗(yàn)過，但最終還是選擇了最簡單的LinearLayout組合View形式。
所謂簡單，就是在省份簡稱數(shù)組的遍歷中，不斷的給LinearLayout進(jìn)行追加子View，需要注意的是，本身的View，也就是我們自定義View，繼承LinearLayout后，默認(rèn)的是垂直方向的，往本身View追加的是橫向?qū)傩缘腖inearLayout，這也是換行的效果，也就是，一行一個橫向的LinearLayout，記住，橫向?qū)傩缘腖inearLayout，才是最終添加View的直接父類。
換行的條件就是基于UI效果，當(dāng)模于設(shè)置length等于0時，我們就重新創(chuàng)建一個水平的LinearLayout，這就可以了，是不是非常的簡單。
至于最后的刪除按鈕，使其靠右，占據(jù)兩個格子的權(quán)重設(shè)置即可。
二、設(shè)置屬性和方法，制定可擴(kuò)展效果
當(dāng)我們繪制完這個身份簡稱鍵盤后，肯定是要給他人用的，基于靈活多變的需求，那么相對應(yīng)的我們也需要動態(tài)的進(jìn)行配置，比如背景顏色，文字的顏色，大小，還有邊距，以及點(diǎn)擊效果等等，這些都是需要外露，讓使用者選擇性使用的，目前所有的屬性如下，大家在使用的時候，也可以對照設(shè)置。
設(shè)置屬性
| 屬性 | 類型 | 概述 |
|---|---|---|
| lp_background | color | 整體的背景顏色 |
| lp_rect_spacing | dimension | 格子的邊距 |
| lp_rect_height | dimension | 格子的高度 |
| lp_rect_margin_top | dimension | 格子的距離上邊 |
| lp_margin_left_right | dimension | 左右距離 |
| lp_margin_top | dimension | 上邊距離 |
| lp_margin_bottom | dimension | 下邊距離 |
| lp_rect_background | reference | 格子的背景 |
| lp_rect_select_background | reference | 格子選擇后的背景 |
| lp_rect_text_size | dimension | 格子的文字大小 |
| lp_rect_text_color | color | 格子的文字顏色 |
| lp_rect_select_text_color | color | 格子的文字選中顏色 |
| lp_is_show_complete | boolean | 是否顯示完成按鈕 |
| lp_complete_text_size | dimension | 完成按鈕文字大小 |
| lp_complete_text_color | color | 完成按鈕文字顏色 |
| lp_complete_text | string | 完成按鈕文字內(nèi)容 |
| lp_complete_margin_top | dimension | 完成按鈕距離上邊 |
| lp_complete_margin_bottom | dimension | 完成按鈕距離下邊 |
| lp_complete_margin_right | dimension | 完成按鈕距離右邊 |
| lp_text_click_effect | boolean | 是否觸發(fā)點(diǎn)擊效果，true點(diǎn)擊后背景消失，false不消失 |
定義方法
| 方法 | 參數(shù) | 概述 |
|---|---|---|
| keyboardContent | 回調(diào)函數(shù) | 獲取點(diǎn)擊的省份簡稱簡稱信息 |
| keyboardDelete | 函數(shù) | 刪除省份簡稱簡稱信息 |
| keyboardComplete | 回調(diào)函數(shù) | 鍵盤點(diǎn)擊完成 |
| openProhibit | 函數(shù) | 打開禁止（使領(lǐng)學(xué)港澳），使其可以點(diǎn)擊 |
三、關(guān)鍵源碼剖析
這里只貼出部分的關(guān)鍵性代碼，整體的代碼，大家滑到底部查看源碼地址即可。
定義身份簡稱數(shù)組
//省份簡稱數(shù)據(jù)
private val mLicensePlateList = arrayListOf(
"京", "津", "渝", "滬", "冀", "晉", "遼", "吉", "黑", "蘇",
"浙", "皖", "閩", "贛", "魯", "豫", "鄂", "湘", "粵", "瓊",
"川", "貴", "云", "陜", "甘", "青", "蒙", "桂", "寧", "新",
"藏", "使", "領(lǐng)", "學(xué)", "港", "澳",
)遍歷省份簡稱
mLength為一行展示多少個，當(dāng)取模為0時，就需要換行，也就是再次創(chuàng)建一個水平的LinearLayout，添加至外層的垂直LinearLayout中，每個水平的LinearLayout中，則是一個一個的TextView。
//每行對應(yīng)的省份簡稱
var layout: LinearLayout? = null
//遍歷車牌號
mLicensePlateList.forEachIndexed { index, s ->
if (index % mLength == 0) {
//重新創(chuàng)建，并添加View
layout = createLinearLayout()
layout?.weightSum = 1f
addView(layout)
val params = layout?.layoutParams as LayoutParams
params.apply {
topMargin = mRectMarginTop.toInt()
height = mRectHeight.toInt()
leftMargin = mMarginLeftRight.toInt()
rightMargin = mMarginLeftRight.toInt() - mSpacing.toInt()
layout?.layoutParams = this
}
}
//創(chuàng)建文字視圖
val textView = TextView(context).apply {
text = s
//設(shè)置文字的屬性
textSize = px2sp(mRectTextSize)
//最后五個是否禁止
if (mNumProhibit && index > (mLicensePlateList.size - 6)) {
setTextColor(mNumProhibitColor)
mTempTextViewList.add(this)
} else {
setTextColor(mRectTextColor)
}
setBackgroundResource(mRectBackGround)
gravity = Gravity.CENTER
setOnClickListener {
if (mNumProhibit && index > (mLicensePlateList.size - 6)) {
return@setOnClickListener
}
//每個格子的點(diǎn)擊事件
changeTextViewState(this)
}
}
addRectView(textView, layout, 0.1f)
}追加最后一個View
由于最后一個視圖是一個圖片，占據(jù)了兩個格子的大小，所以需要特殊處理，需要做的就是，單獨(dú)設(shè)置權(quán)重weight和單獨(dú)設(shè)置寬度width，如下所示：
/**
* AUTHOR:AbnerMing
* INTRODUCE:追加最后一個View
*/
private fun addEndView(layout: LinearLayout?) {
val endViewLayout = LinearLayout(context)
endViewLayout.gravity = Gravity.RIGHT
//刪除按鈕
val endView = RelativeLayout(context)
//添加刪除按鈕
val deleteImage = ImageView(context)
deleteImage.setImageResource(R.drawable.view_ic_key_delete)
endView.addView(deleteImage)
val imageParams = deleteImage.layoutParams as RelativeLayout.LayoutParams
imageParams.addRule(RelativeLayout.CENTER_IN_PARENT)
deleteImage.layoutParams = imageParams
endView.setOnClickListener {
//刪除
mKeyboardDelete?.invoke()
invalidate()
}
endView.setBackgroundResource(mRectBackGround)
endViewLayout.addView(endView)
val params = endView.layoutParams as LayoutParams
params.width = (getScreenWidth() / mLength) * 2 - mMarginLeftRight.toInt()
params.height = LayoutParams.MATCH_PARENT
endView.layoutParams = params
layout?.addView(endViewLayout)
val endParams = endViewLayout.layoutParams as LayoutParams
endParams.apply {
width = (mSpacing * 3).toInt()
height = LayoutParams.MATCH_PARENT
weight = 0.4f
rightMargin = mSpacing.toInt()
endViewLayout.layoutParams = this
}
}四、開源地址及使用總結(jié)
開源地址：github.com/AbnerMing888/LicensePlateView
關(guān)于使用，其實(shí)就是一個類，大家可以下載源碼，直接復(fù)制即可使用，還可以進(jìn)行修改里面的代碼，非常的方便，如果懶得下載源碼，沒關(guān)系，我也上傳到了遠(yuǎn)程Maven，大家可以按照下面的方式進(jìn)行使用。
Maven具體調(diào)用
1、在你的根項(xiàng)目下的build.gradle文件下，引入maven。
allprojects {
repositories {
maven { url "https://gitee.com/AbnerAndroid/almighty/raw/master" }
}
}2、在你需要使用的Module中build.gradle文件下，引入依賴。
dependencies {
implementation 'com.vip:plate:1.0.0'
}代碼使用
<com.vip.plate.LicensePlateView
android:id="@+id/lp_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:lp_complete_text_size="14sp"
app:lp_margin_left_right="10dp"
app:lp_rect_spacing="6dp"
app:lp_rect_text_size="19sp"
app:lp_text_click_effect="false" />總結(jié)
大家在使用的時候，一定對照屬性表進(jìn)行選擇性使用；關(guān)于這個省份簡稱自定義View，實(shí)現(xiàn)方式有很多種，我目前的這種也不是最優(yōu)的實(shí)現(xiàn)方式，只是自己的一個實(shí)現(xiàn)方案，給大家一個作為參考的依據(jù)。
以上就是Android自定義實(shí)現(xiàn)一個省份簡稱鍵盤的詳細(xì)內(nèi)容，更多關(guān)于Android自定義鍵盤的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android實(shí)現(xiàn)加載狀態(tài)視圖切換效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)加載狀態(tài)視圖切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Android編程繪圖操作之弧形繪制方法,結(jié)合實(shí)例形式分析了Android圖形繪制的相關(guān)組件調(diào)用、屬性設(shè)置與功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-08-08
Android App支付系列（一）：微信支付接入詳細(xì)指南(附官方支付demo)
這篇文章主要介紹了Android App支付系列（一）：微信支付接入詳細(xì)指南(附官方支付demo) ，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
Android開發(fā)實(shí)現(xiàn)的文本折疊點(diǎn)擊展開功能示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)的文本折疊點(diǎn)擊展開功能,涉及Android界面布局與屬性控制相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
詳解Android的OkHttp包編寫異步HTTP請求調(diào)用的方法
OkHttp支持Callback異步回調(diào)來實(shí)現(xiàn)線程的非阻塞,下面我們就來詳解Android的OkHttp包編寫異步HTTP請求調(diào)用的方法,需要的朋友可以參考下2016-07-07
本文將詳細(xì)介紹Android三種GSM技術(shù)比較差別,有感興趣的朋友可以參考下2012-12-12
Android自定義View實(shí)現(xiàn)餅狀圖帶動畫效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)餅狀圖帶動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Android編程實(shí)現(xiàn)項(xiàng)目中異常捕獲及對應(yīng)Log日志文件保存功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)項(xiàng)目中異常捕獲及對應(yīng)Log日志文件保存功能,涉及Android異常處理、日志讀寫及權(quán)限控制等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
Android SD卡上文件操作及記錄日志操作實(shí)例分析
這篇文章主要介紹了Android SD卡上文件操作及記錄日志操作的方法,涉及Android針對SD卡與文件操作的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了Android自定義View手勢密碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07