溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
你能學到什么
因為每個按鍵都考慮到需要支持背景設置等其他個性設置和Touch手勢的處理, 所以我決定采用 每個按鍵 對應一個View的思路實現. 否則可以使用Canvas.drawText實現
這樣可以提高擴展性和可自定義性
1.根據效果圖先定義按鍵
//首先定義需要的那些按鍵
//順序打亂,展示的時候也就是亂序的,可以更安全.
//特殊按鍵-> "":表示空白占位按鍵; "-1":表示回退鍵, 也就是刪除.
var keys = arrayOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "-1")
更新對應的按鍵, 創建對應的view
keys.forEach {
val keyView: View = when (it) {
"-1" -> {
//刪除
imageView(R.drawable.keyboard_del, R.drawable.keyboard_del_press).apply {
background = null
setBackgroundColor(Color.parseColor("#E2E7ED"))
}
}
"" -> {
//占位View
View(context).apply {
setBackgroundColor(Color.parseColor("#E2E7ED"))
}
}
else -> {
createKeyView(it)
}
}
keyView.tag = it //通過tag, 保存按鍵對應的值
addView(keyView)
}
private fun createKeyView(key: String): View {
return if (useImageKey) {
val keyRes = when (key) {
"1" -> R.drawable.keyboard_1
"2" -> R.drawable.keyboard_2
"3" -> R.drawable.keyboard_3
"4" -> R.drawable.keyboard_4
"5" -> R.drawable.keyboard_5
"6" -> R.drawable.keyboard_6
"7" -> R.drawable.keyboard_7
"8" -> R.drawable.keyboard_8
"9" -> R.drawable.keyboard_9
else -> R.drawable.keyboard_0
}
imageView(keyRes)
} else {
textView(key)
}
}
private fun imageView(res: Int, pressRes: Int = -1): ImageView {
return ImageView(context).apply {
if (pressRes == -1) {
setImageResource(res)
} else {
setImageResource(res)
//setImageDrawable(ResUtil.selector(getDrawable(res), getDrawable(pressRes)))
}
scaleType = ImageView.ScaleType.CENTER
keyViewBGDrawable?.let {
background = it.constantState.newDrawable()
}
setOnClickListener(this@KeyboardLayout)
}
}
private fun textView(text: String): TextView {
return TextView(context).apply {
gravity = Gravity.CENTER
this.text = text
setTextSize(TypedValue.COMPLEX_UNIT_PX, keyTextSize)
keyViewBGDrawable?.let {
background = it.constantState.newDrawable()
}
setTextColor(Color.BLACK)
setOnClickListener(this@KeyboardLayout)
}
}
2.按鍵元素創建好之后, 開始自定義ViewGroup的標準操作
onMeasure:測量每個按鍵的寬度和高度
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
//super.onMeasure(widthMeasureSpec, heightMeasureSpec)
var widthSize = MeasureSpec.getSize(widthMeasureSpec)
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
var heightSize = MeasureSpec.getSize(heightMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
if (widthMode != MeasureSpec.EXACTLY) {
widthSize = resources.displayMetrics.widthPixels
}
if (heightMode != MeasureSpec.EXACTLY) {
heightSize = (4 * keyViewHeight + 3 * vSpace).toInt()
}
childWidth = ((widthSize - 2 * hSpace - paddingLeft - paddingRight) / 3).toInt()
childHeight = ((heightSize - 3 * vSpace - paddingTop - paddingBottom) / 4).toInt()
childs { _, view ->
view.measure(exactlyMeasure(childWidth), exactlyMeasure(childHeight))
}
setMeasuredDimension(widthSize, heightSize)
}
onLayout:決定按鍵在ViewGroup中的坐標位置
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
//一行一行布局, 共4行
for (line in 0..3) {
var top: Int = (paddingTop + line * (childHeight + vSpace)).toInt()
//3列
for (i in 0..2) {
var left: Int = (paddingLeft + i * (childWidth + hSpace)).toInt()
getChildAt(line * 3 + i).layout(left, top, left + childWidth, top + childHeight)
}
}
}
3:事件監聽和回調
override fun onClick(v: View?) {
if (onKeyboardInputListener == null) {
return
}
v?.let { view ->
val tag = view.tag
if (tag is String) {
val isDel = "-1" == tag
onKeyboardInputListener?.onKeyboardInput(tag, isDel)
}
}
}
4:xml中的屬性聲明
需要在 values 文件夾中創建一個任意文件名的xml文件
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="KeyboardLayout"> <attr name="r_key_height" format="dimension"/> <attr name="r_key_width" format="dimension"/> <attr name="r_key_text_size" format="dimension"/> <attr name="r_key_background" format="reference"/> <attr name="r_background" format="reference"/> <attr name="r_use_image_key" format="boolean"/> </declare-styleable> </resources>
declare-styleable 都是標準寫法, name對應的就是自定義view的類型, 都是標準寫法, 不同的format對應不同的get方法. 熟悉了就很容易使用.
5:xml中的屬性讀取
init {
val typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.KeyboardLayout) //注意1:
keyViewHeight = typedArray.getDimensionPixelOffset(R.styleable.KeyboardLayout_r_key_height, keyViewHeight)
//typedArray.getDimensionPixelOffset(R.styleable.KeyboardLayout_r_key_width, keyViewHeight)
keyTextSize = typedArray.getDimension(R.styleable.KeyboardLayout_r_key_text_size, keyTextSize)
useImageKey = typedArray.getBoolean(R.styleable.KeyboardLayout_r_use_image_key, useImageKey)
keyViewBGDrawable = typedArray.getDrawable(R.styleable.KeyboardLayout_r_key_background)
if (keyViewBGDrawable == null) {
keyViewBGDrawable = getDrawable(R.drawable.base_white_bg_selector)
}
mBackgroundDrawable = typedArray.getDrawable(R.styleable.KeyboardLayout_r_background)
if (mBackgroundDrawable == null) {
mBackgroundDrawable = ColorDrawable(getColor(R.color.base_chat_bg_color))
}
setWillNotDraw(false)
typedArray.recycle() //注意2
}
注意1,2: 都是必備的寫法, 中間部分才是對應的屬性讀取操作.
源碼地址 https://github.com/angcyo/KeyboardLayout （本地下載）
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
