Android自定义一个车牌字母选择键盘

简介: 和省份简称键盘不同的是,数据源上和边距有所差别之外,其他的实现方式均是一样的,采用外部垂直LinearLayout,内部多个横向的LinearLayout的搭配方式。

在一般和车相关的应用,难免会和车牌打交道,组成车牌的要素,国内无非就是省份简称+地区代码+英文或者数字组成,比如京A12345,在需要输入车牌的功能上,就需要有省份简称键盘和英文数字键盘了,在上篇的文章《Android自定义一个省份简称键盘》,总结了省份简称键盘的实现,本篇我们继续完成英文和数字键盘的实现。


今天的内容大致如下:


1、最终实现效果及简单分析

2、设置属性,制定可扩展效果

3、部分源码剖析

4、开源地址及使用总结

一、最终实现效果及简单分析



以上就是本篇文章最终要实现的效果,和省份简称键盘不同的是,数据源上和边距有所差别之外,其他的实现方式均是一样的,采用外部垂直LinearLayout,内部多个横向的LinearLayout的搭配方式。


需要注意的是,英文和数字键盘,默认状态下,顶部的数字是禁止的,也就是输入完地区代码之后,数字的禁止状态才会释放;由于距离左右的边距不同,其在数据源的判断上也会有不同,这个也是需要注意的。


二、设置属性,制定可扩展效果


其相关属性和上篇的省份键盘基本上没有太大的出入,主要就是动态化设置,设置一些,文字的背景,大小,颜色以及格子之间的编辑等,大概罗列了以下属性:


属性

类型

概述

ek_background

color

整体的背景颜色

ek_rect_spacing

dimension

格子的边距

ek_rect_height

dimension

格子的高度

ek_rect_margin_top

dimension

格子的距离上边

ek_margin_left_right

dimension

左右距离

ek_margin_top

dimension

上边距离

ek_margin_bottom

dimension

下边距离

ek_rect_background

reference

格子的背景

ek_rect_select_background

reference

格子选择后的背景

ek_rect_text_size

dimension

格子的文字大小

ek_rect_text_color

color

格子的文字颜色

ek_rect_select_text_color

color

格子的文字选中颜色

ek_is_show_complete

boolean

是否显示完成按钮

ek_complete_text_size

dimension

完成按钮文字大小

ek_complete_text_color

color

完成按钮文字颜色

ek_complete_text

string

完成按钮文字内容

ek_complete_margin_top

dimension

完成按钮距离上边

ek_complete_margin_bottom

dimension

完成按钮距离下边

ek_complete_margin_right

dimension

完成按钮距离右边

ek_other_lines_margin

dimension

其他行边距

ek_is_num_prohibit

boolean

数字是否禁止

ek_text_prohibit_color

color

数字禁止颜色

ek_text_click_effect

boolean

是否触发点击效果,true点击后背景消失,false不消失


设置回调函数


方法

概述

keyboardContent

获取点击的省份简称简称信息

keyboardDelete

删除省份简称简称信息

keyboardComplete

键盘点击完成

openProhibit

打开禁止(使领学港澳),使其可以点击

三、部分源码剖析


这里只贴出部分的关键性代码,整体的代码,大家滑到底部查看源码地址即可。


定义字母和数字数组


privatevalmEnglishList=arrayListOf(
"1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
"Q", "W", "E", "R", "T", "Y", "U", "O", "P",
"A", "S", "D", "F", "G", "H", "J", "K", "L",
"Z", "X", "C", "V", "B", "N", "M"    )


定义遍历数字和字母


由于在数据源上使用的是同一个,那么需要做截取分别进行遍历,便于控制左右的边距和本身的格子大小。


//遍历数字eachData(mEnglishList.subList(0, 10), mLength, true)
//遍历字母eachData(mEnglishList.subList(10, mEnglishList.size), mLength-1, false)
//追加最后一个删除按钮View,动态计算宽度addEndView(mLineLayout)


遍历数据


遍历数据的逻辑和上篇保持一致,当和定义的长度取模为0时,就需要换行,换行就是重新创建一个水平的LinearLayout,添加至垂直的LinearLayout之中,需要做判断的是,左右的边距。


/*** AUTHOR:AbnerMing* INTRODUCE:遍历数据*/privatefuneachData(
list: List<String>,
len: Int,
isNumber: Boolean=false    ) {
list.forEachIndexed { index, s->if (index%len==0) {
//重新创建,并添加ViewmLineLayout=createLinearLayout()
mLineLayout?.weightSum=len.toFloat()
addView(mLineLayout)
valparams=mLineLayout?.layoutParamsasLayoutParamsparams.apply {
topMargin=mRectMarginTop.toInt()
height=mRectHeight.toInt()
if (isNumber) {
//是数字leftMargin=mMarginLeftRight.toInt()
rightMargin=mMarginLeftRight.toInt() -mSpacing.toInt()
                    } else {
//是字母leftMargin=mOtherLinesMargin.toInt()
rightMargin=mOtherLinesMargin.toInt() -mSpacing.toInt()
                    }
mLineLayout?.layoutParams=this                }
            }
//创建文字视图valtextView=TextView(context).apply {
text=s//设置文字的属性textSize=px2sp(mRectTextSize)
//禁止if (isNumber) {
//是数字if (mNumProhibit) {
setTextColor(mRectTextColor)
                    } else {
setTextColor(mNumProhibitColor)
                    }
                } else {
setTextColor(mRectTextColor)
                }
setBackgroundResource(mRectBackGround)
gravity=Gravity.CENTERsetOnClickListener {
//每个格子的点击事件if (isNumber&&!mNumProhibit) {
//如果是数字,根据规则暂时不触发点击return@setOnClickListener                    }
changeTextViewState(this)
                }
            }
//是数字if (isNumber) {
mTempTextViewList.add(textView)
            }
addRectView(textView, mLineLayout, 1f)
        }
    }


添加视图

设置每个格子的宽高和权重。


/*** AUTHOR:AbnerMing* INTRODUCE:追加视图*/privatefunaddRectView(view: View, layout: LinearLayout?, w: Float) {
layout?.addView(view)
valtextParams=view.layoutParamsasLayoutParamstextParams.apply {
weight=wwidth=0height=LayoutParams.MATCH_PARENT//每行的最后一个rightMargin=mSpacing.toInt()
view.layoutParams=this        }
    }

至于最后一个删除按钮,也需要动态的计算其本身的宽高,基本上和上篇一致,就不过多赘述了。


四、开源地址及使用总结

开源地址:https://github.com/AbnerMing888/EnglishKeyboardView

关于如何使用,有两种方式,一种是下载源码,直接把源码复制出来,二是可以使用以下的远程Maven依赖方式。


Maven具体调用

1、在你的根项目下的build.gradle文件下,引入maven。


allprojects {
repositories {
maven { url"https://gitee.com/AbnerAndroid/almighty/raw/master" }
    }
}


2、在你需要使用的Module中build.gradle文件下,引入依赖。


dependencies {
implementation'com.vip:board:1.0.0'}


代码使用


<com.vip.board.EnglishKeyboardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


总结


属性配置了有很多,可以实现多种自定义的相关效果,大家可以查找第二项中的属性介绍,进行自定义配置,还是那句话,本身的实现方式有很多种,本篇只是其中的一个简单的案例,仅供大家作为一个参考。


自定义英文和数字键盘,大家有没有发现了少了一个字母,为什么会没有这个字母呢?你知道原因吗?

相关文章
|
6月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
506 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
6月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
106 0
|
6月前
|
Android开发 开发者
Android自定义view之利用drawArc方法实现动态效果
本文介绍了如何通过Android自定义View实现动态效果,重点使用`drawArc`方法完成圆弧动画。首先通过`onSizeChanged`进行测量,初始化画笔属性,设置圆弧相关参数。核心思路是不断改变圆弧扫过角度`sweepAngle`,并调用`invalidate()`刷新View以实现动态旋转效果。最后附上完整代码与效果图,帮助开发者快速理解并实践这一动画实现方式。
168 0
|
6月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
115 0
|
6月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
304 65
Android自定义view之网易云推荐歌单界面
|
6月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
630 84
|
6月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
170 3
|
6月前
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
118 0
Android自定义view之围棋动画(化繁为简)
|
6月前
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景,到创建固定棋子及动态棋子,最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长,并优化视觉效果,如添加渐变色让白子更明显。最终效果既可作为围棋动画展示,也可用作加载等待动画。代码完整,适合进阶开发者学习参考。
140 0
|
6月前
|
传感器 Android开发 开发者
Android自定义view之3D正方体
本文介绍了如何通过手势滑动操作实现3D正方体的旋转效果,基于Android自定义View中的GLSurfaceView。相较于使用传感器控制,本文改用事件分发机制(onTouchEvent)处理用户手势输入,调整3D正方体的角度。代码中详细展示了TouchSurfaceView的实现,包括触控逻辑、OpenGL ES绘制3D正方体的核心过程,以及生命周期管理。适合对Android 3D图形开发感兴趣的开发者学习参考。

热门文章

最新文章