android自定义金额输入键盘_Android 自定义控件 - 仿支付宝数字键盘
原标题:Android 自定义控件 - 仿支付宝数字键盘
简介
在一些带有支付功能的 App 中,输入的密码一般只能是纯数字,虽然我们可以指定 EditText 输入框只能输入数字,但是为了提供用户的使用体验,我们往往更倾向于使用自定义的纯数字键盘。
本文效果:
实现步骤:
集成系统的 KeyBoardView 类,在初始化时初始化键盘布局,设置 KeyBoard 对象。
实现 OnKeyboardActionListener 接口,处理按键交互事件。
根据需求绘制按键背景和按键图标。
设置监听器,将输入的内容回调给调用方。
键盘布局
在 res/xml/ 目录下创建 xml 文件:key_password_number.xml
android:horizontalGap="1dp"
android:keyHeight="9%p"
android:keyWidth="33.3333%p"
android:verticalGap="1dp">
android:codes="49"
android:keyLabel="1"/>
android:codes="50"
android:keyLabel="2"/>
android:codes="51"
android:keyLabel="3"/>
android:codes="52"
android:keyLabel="4"/>
android:codes="53"
android:keyLabel="5"/>
android:codes="54"
android:keyLabel="6"/>
android:codes="55"
android:keyLabel="7"/>
android:codes="56"
android:keyLabel="8"/>
android:codes="57"
android:keyLabel="9"/>
android:codes="-10"
android:keyLabel=""/>
android:codes="48"
android:keyLabel="0"/>
android:codes="-5"
android:keyLabel=""/>
继承 KeyBoardView
publicclassPwdKeyboardViewextendsKeyboardViewimplementsKeyboardView.OnKeyboardActionListener{
privatestaticfinalString TAG = "PwdKeyboardView";
privatestaticfinalintKEY_EMPTY = - 10;
privateintdelKeyBackgroundColor = 0xffcccccc;
privateRect keyIconRect;
publicPwdKeyboardView(Context context, AttributeSet attrs){
super(context, attrs);
Log.d(TAG, "PwdKeyboardView: two params");
init(context);
}
publicPwdKeyboardView(Context context, AttributeSet attrs, intdefStyleAttr){
super(context, attrs, defStyleAttr);
Log.d(TAG, "PwdKeyboardView: three params");
init(context);
}
privatevoidinit(Context context){
Keyboard keyboard = newKeyboard(context, R.xml.key_password_number); // 初始化 keyboard
setKeyboard(keyboard);
setEnabled( true);
setFocusable( true);
setPreviewEnabled( false); // 设置点击按键不显示预览气泡
setOnKeyboardActionListener( this);
}
/**
* 重新绘制删除按键和空白键
*
* @paramcanvas
*/
@Override
publicvoidonDraw(Canvas canvas){
super.onDraw(canvas);
List keys = getKeyboard().getKeys();
for(Keyboard.Key key : keys) {
if(key.codes[ 0] == KEY_EMPTY) {
// 绘制空白键背景
drawKeyBackground(key, canvas, delKeyBackgroundColor);
}
if(key.codes[ 0] == Keyboard.KEYCODE_DELETE) {
// 删除删除按键背景
drawKeyBackground(key, canvas, delKeyBackgroundColor);
// 绘制删除按键图标
drawKeyIcon(key, canvas, getResources().getDrawable(R.drawable.ic_delete));
}
}
}
/**
* 绘制按键的背景
*
* @paramkey
* @paramcanvas
* @paramcolor
*/
privatevoiddrawKeyBackground(Keyboard.Key key, Canvas canvas, intcolor){
ColorDrawable drawable = newColorDrawable(color);
drawable.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
drawable.draw(canvas);
}
/**
* 绘制按键的 icon
*
* @paramkey
* @paramcanvas
* @paramiconDrawable
*/
privatevoiddrawKeyIcon(Keyboard.Key key, Canvas canvas, Drawable iconDrawable){
if(iconDrawable == null) {
return;
}
// 计算按键icon 的rect 范围
if(keyIconRect == null|| keyIconRect.isEmpty()) {
// 得到 keyicon 的显示大小,因为图片放在不同的drawable-dpi目录下,显示大小也不一样
intintrinsicWidth = iconDrawable.getIntrinsicWidth();
intintrinsicHeight = iconDrawable.getIntrinsicHeight();
intdrawWidth = intrinsicWidth;
intdrawHeight = intrinsicHeight;
// 限制图片的大小,防止图片按键范围
if(drawWidth > key.width) {
drawWidth = key.width;
// 此时高就按照比例缩放
drawHeight = ( int) (drawWidth * 1.0f/ intrinsicWidth * intrinsicHeight);
} elseif(drawHeight > key.height) {
drawHeight = key.height;
drawWidth = ( int) (drawHeight * 1.0f/ intrinsicHeight * intrinsicWidth);
}
// 获取图片的 x,y 坐标,图片在按键的正中间
intleft = key.x + key.width / 2- drawWidth / 2;
inttop = key.y + key.height / 2- drawHeight / 2;
keyIconRect = newRect(left, top, left + drawWidth, top + drawHeight);
}
if(keyIconRect != null&& !keyIconRect.isEmpty()) {
iconDrawable.setBounds(keyIconRect);
iconDrawable.draw(canvas);
}
}
@Override
publicvoidonPress(intprimaryCode){
}
@Override
publicvoidonRelease(intprimaryCode){
}
/**
* 处理按键的点击事件
*/
@Override
publicvoidonKey(intprimaryCode, int[] keyCodes){
Log.d(TAG, "onKey: primaryCode = "+ primaryCode + ", keyCodes = "+ Arrays.toString(keyCodes));
if(primaryCode == KEY_EMPTY) {
return;
}
if(listener != null) {
if(primaryCode == Keyboard.KEYCODE_DELETE) {
listener.onDelete();
} else{
listener.onInput(String.valueOf(( char) primaryCode));
}
}
}
@Override
publicvoidonText(CharSequence charSequence){
}
@Override
publicvoidswipeLeft(){
}
@Override
publicvoidswipeRight(){
}
@Override
publicvoidswipeDown(){
}
@Override
publicvoidswipeUp(){
}
publicinterfaceOnKeyListener{
// 输入回调
voidonInput(String text);
// 删除回调
voidonDelete();
}
privateOnKeyListener listener;
publicvoidsetOnKeyListener(OnKeyListener listener){
this.listener = listener;
}
}
使用 PwdKeyboardView
android:id= "@+id/key_board"
android:layout_width= "match_parent"
android:layout_height= "wrap_content"
android:background= "#919191"
android:keepScreenOn= "true"
android:keyBackground= "@drawable/selector_key_board"
android:keyTextColor= "@android:color/black"
android:keyTextSize= "26sp"
android:shadowRadius= "0"/>
显示结果为:
完整代码:https://github.com/xing16/PwdKeyboardView返回搜狐,查看更多
责任编辑:
android自定义金额输入键盘_Android 自定义控件 - 仿支付宝数字键盘相关推荐
- android自定义金额输入键盘_Android 自定义输入支付密码的软键盘实例代码
Android 自定义输入支付密码的软键盘 有项目需求需要做一个密码锁功能,还有自己的软键盘,类似与支付宝那种,这里是整理的资料,大家可以看下,如有错误,欢迎留言指正 需求:要实现类似支付宝的输入支付 ...
- android自定义金额输入键盘_Android自定义软键盘的实现
先看界面布局文件 android:layout_width="fill_parent" android:layout_height="fill_parent" ...
- android自定义金额输入键盘_触摸键盘的设计解析
本文为PMCAFF作者 呆呆丶于社区发布 众所周知,移动设备的触摸键盘相比于电脑的实体键盘而言,易用性较差.原因有很多,比如使用习惯,人机工程原理,触摸实感差异等等.这些原因导致我们在使用移动设备的触 ...
- h5仿微信支付键盘|仿支付宝数字键盘
h5+js 高仿微信支付键盘|微信数字密码键盘|支付宝商铺付款键盘 利用html5开发的仿微信支付数字键盘,密码软键盘插件wcKeyboard,可自定义背景.类型.皮肤,包含微信.支付宝两种皮肤样式, ...
- android自定义进度条_Android中的自定义进度栏
android自定义进度条 Custom progress bar in android application gives it a personal touch. In this tutorial ...
- android自定义View之(六)------高仿华为荣耀3C的圆形刻度比例图(ShowPercentView)
为什么写这篇文章: 显示当前的容量所占的比例,表现当前计划的进度,一般都会采用百分比的方式,而图形显示,以其一目了然的直观性和赏心悦目的美观形成为了我们的当然的首选. 在图形表示百分比的方法中,我们有 ...
- Android_仿苹果数字键盘以及判断信用卡有效期的Editext
这次带来一个小小的信用卡有效期规则的Editext,额外赠送内置数字键盘的开发 首先来看下需求: 1) 月份数字: λ 数字输入0:后一位数字可输入1-9,输入1则展示01/(注意斜杠展示在界面),点 ...
- 【Android自定义View实战】之仿去哪儿网App图片按压显示指纹并缩放效果TouchFingerImageView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52986713 [DylanAndroid的csdn博客] 我们发现去哪儿网ap ...
- 【Android自定义View实战】之仿QQ运动步数圆弧及动画,Dylan计步中的控件StepArcView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52936609 [DylanAndroid的csdn博客] 在之前的Androi ...
最新文章
- jquery学习手记(6)CSS, Styling, Dimensions
- Object的finalize方法
- UDFs实现Memcached与Mysql的自动更新
- 微型计算机作为载体的部件是,大工11秋《计算机应用基础》辅导资料二
- linux:vi 替换命令
- Cacti设置流量阀值实现邮件报警
- (44)css面试题集锦一
- mysql 5.6.21 rpm_centos_mysql5.6.21_rpm安装
- php背景色如何填充满,php - 按一定百分比覆盖背景颜色
- 861. Score After Flipping Matrix
- c++ gdb 绑定源码_gdb调试g++ -g生成文件,list后不能看到源代码
- 1059: [ZJOI2007]矩阵游戏 - BZOJ
- 啦啦外卖41.4全开源版 修复版(小程序+后台)
- 无线路由器分流时用迅雷下载限速时不能每位用户支持良好的信息交换
- 怎样用计算机做ppt,电脑怎么制作ppt步骤
- 向量的点击、叉积、混合积(Matlab)
- JAVA集合,TreeMap排序
- opencv task3------答题卡识别
- 用python的requests第三方模块抓取王者荣耀所有英雄的皮肤
- css之如何清除浮动
热门文章
- codeforces 116A-C语言解题报告
- 风雨20年:我所积累的20条编程经验
- 解决 idea 中 jsp 修改后页面不生效
- 解决:Error response from daemon: Get https://index.docker.io/v1/search?q=openjdkn=25: dial tcp: looku
- GitKraken - 简单教程
- eclipse关闭讨厌的菜单
- 653. Two Sum IV - Input is a BST
- 【c#】RabbitMQ学习文档(一)Hello World
- CSS中position属性(abusolute | relative | static | fixed)区别
- qunit 前端脚本测试用例