Android 仿微信自定义数字键盘的实现代码

本文介绍了Android 仿微信自定义数字键盘的实现代码,分享给大家,希望对大家有帮助

最终效果:

实现这个自定义键盘的思路很简单:

要写出一个数字键盘的布局; 与 Edittext 结合使用,对每个按键的点击事件进行处理; 禁用系统软键盘。

有了思路,实现起来就不难了。

1. 实现键盘的 xml 布局

网格样式的布局用 GridView 或者 RecyclerView 都可以实现,其实用 GridView 更方便一些,不过我为了多熟悉 RecyclerView 的用法,这里选择用了 RecyclerView。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="2px" android:background="@color/btn_gray"/> <RelativeLayout android:id="@+id/rl_back" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/iv_back_bg" android:padding="10dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@mipmap/keyboard_back"/> </RelativeLayout> <View android:layout_width="match_parent" android:layout_height="1px" android:background="@color/btn_gray"/> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/keyboard_bg" android:overScrollMode="never"></android.support.v7.widget.RecyclerView> </LinearLayout>

RecyclerView 用来实现键盘布局,上面的 RelativeLayout 则是为了实现收起键盘的点击事件。

2. 在代码中实现键盘布局,填充数据、增加点击事件

我们新建类 KeyboardView 继承自 RelativeLayout,关联上面的布局文件,然后做一些初始化操作:对 RecyclerView 填充数据、设置适配器,设置出现和消失的动画效果,写一些会用到的方法等。

public class KeyboardView extends RelativeLayout { private RelativeLayout rlBack; private RecyclerView recyclerView; private List<String> datas; private KeyboardAdapter adapter; private Animation animationIn; private Animation animationOut; public KeyboardView(Context context) { this(context, null); } public KeyboardView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public KeyboardView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs, defStyleAttr); } private void init(Context context, AttributeSet attrs, int defStyleAttr) { LayoutInflater.from(context).inflate(R.layout.layout_key_board, this); rlBack = findViewById(R.id.rl_back); rlBack.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { // 点击关闭键盘 dismiss(); } }); recyclerView = findViewById(R.id.recycler_view); initData(); initView(); initAnimation(); } // 填充数据 private void initData() { datas = new ArrayList<>(); for (int i = 0; i < 12; i++) { if (i < 9) { datas.add(String.valueOf(i + 1)); } else if (i == 9) { datas.add("."); } else if (i == 10) { datas.add("0"); } else { datas.add(""); } } } // 设置适配器 private void initView() { recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3)); adapter = new KeyboardAdapter(getContext(), datas); recyclerView.setAdapter(adapter); } // 初始化动画效果 private void initAnimation() { animationIn = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_in); animationOut = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_out); } // 弹出软键盘 public void show() { startAnimation(animationIn); setVisibility(VISIBLE); } // 关闭软键盘 public void dismiss() { if (isVisible()) { startAnimation(animationOut); setVisibility(GONE); } } // 判断软键盘的状态 public boolean isVisible() { if (getVisibility() == VISIBLE) { return true; } return false; } public void setOnKeyBoardClickListener(KeyboardAdapter.OnKeyboardClickListener listener) { adapter.setOnKeyboardClickListener(listener); } public List<String> getDatas() { return datas; } public RelativeLayout getRlBack() { return rlBack; } }

Adapter 里面都是很简单的代码,这里就不贴出了,文章末尾我会给出源码下载地址。

到这里为止,自定义数字键盘基本就算写好了,不过最重要的还是要和 Edittext 结合使用。

3. 与 Edittext 结合使用

1. 禁用系统软键盘

if (Build.VERSION.SDK_INT <= 10) { etInput.setInputType(InputType.TYPE_NULL); } else { getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN); try { Class<EditText> cls = EditText.class; Method setShowSoftInputOnFocus = cls.getMethod("setShowSoftInputOnFocus", boolean.class); setShowSoftInputOnFocus.setAccessible(true); setShowSoftInputOnFocus.invoke(etInput, false); } catch (Exception e) { e.printStackTrace(); } }

在网上找了一些方法,但是点击 Edittext 的时候系统软键盘依然会弹出。最后找到了这个方法,利用反射强制不弹出软键盘,效果不错。

2. 处理各个按键的点击事件

@Override public void onKeyClick(View view, RecyclerView.ViewHolder holder, int position) { switch (position) { case 9: // 按下小数点 String num = etInput.getText().toString().trim(); if (!num.contains(datas.get(position))) { num += datas.get(position); etInput.setText(num); etInput.setSelection(etInput.getText().length()); } break; default: // 按下数字键 if ("0".equals(etInput.getText().toString().trim())) { // 第一个数字按下0的话,第二个数字只能按小数点 break; } etInput.setText(etInput.getText().toString().trim() + datas.get(position)); etInput.setSelection(etInput.getText().length()); break; } } @Override public void onDeleteClick(View view, RecyclerView.ViewHolder holder, int position) { // 点击删除按钮 String num = etInput.getText().toString().trim(); if (num.length() > 0) { etInput.setText(num.substring(0, num.length() - 1)); etInput.setSelection(etInput.getText().length()); } }

逻辑也非常简单,看代码就明白了。最终的效果就是第一张图的样子。

这个键盘很简单,打算之后写一个模仿微信或者支付宝的支付密码输入布局。

->->->点击下载源码<-<-<-

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-10-23 02:42:42

Android 仿微信自定义数字键盘的实现代码的相关文章

Android 高仿微信支付数字键盘功能_Android

现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android 高仿微信支付数字键盘功能

现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android仿微信朋友圈图片查看器_Android

再看文章之前,希望大家先打开自己的微信点到朋友圈中去,仔细观察是不是发现朋友圈里的有个"九宫格"的图片区域,点击图片又会跳到图片的详细查看页面,并且支持图片的滑动和缩放?这个功能是不是很常用呢?!那么我今天正好做了这个Demo,下面为大家讲解一下.首先按照惯例先看一下效果图吧,尤其不会录制gif动画(哎~没办法,模拟器不支持多点触控,刚好我的手机又没有Root,不能录屏,悲催啊,大家见谅,想要看真实效果的话,烦请移到文章最下方转载文章中进行源码下载,点击下载源码,运行后再看效果哈~~)

Android仿微信雷达辐射搜索好友(逻辑清晰实现简单)_Android

不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今天讲的是一个大家都见过的动画,雷达搜索好友嘛,原理也十分的简单,你看完我的分析,也会觉得很简单了,国际惯例,无图无真相,我们先看看效果图,对了,真 测试机送人了,所讲这段时间应该一直用模拟器显示吧! 仿微信雷达扫描,仿安卓微信.云播雷达扫描动画效果点击中间的黑色圆圈开始扫描动画,再次点击复位,需要这种效果的朋友可以自己下载看一下. 效果图如下所示: 这个界面相信大家都认识

Android 仿微信朋友圈点赞和评论弹出框功能_Android

贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示:   微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重

Android仿微信主界面设计_Android

先来一张效果图 一.ActionBar的设计 首先是main.xml,先定义这些菜单,界面稍后在调整 <menu xmlns:android="http://schemas.android.com/apk/res/android" tools:context=".MainActivity"> <item android:id="@+id/action_search" android:actionViewClass="a

Android仿微信QQ设置图形头像裁剪功能_Android

最近在做毕业设计,想有一个功能和QQ一样可以裁剪头像并设置圆形头像,额,这是设计狮的一种潮流. 而纵观现在主流的APP,只要有用户系统这个功能,这个需求一般都是在(bu)劫(de)难(bu)逃(xue)! 图片裁剪实现方式有两种,一种是利用系统自带的裁剪工具,一种是使用开源工具Cropper.本节就为大家带来如何使用系统自带的裁剪工具进行图片裁剪~ 还是先来个简单的运行图. 额,简单说下,我待会会把代码写成小demo分享给大家,在文章末尾会附上github链接,需要的可以自行下载~ 下面来简单分

Android仿微信群聊头像_Android

工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的APP好像微信的群聊头像是组合的,QQ的头像不是,别的好像也没有了. 给大家分享一下怎么实现的吧.首先我们先看一下效果图: 好了,下面说一下具体怎么实现的: 实现思路 1.首先获取Bitmap图片(本地.网络) 2.创建一个指定大小的缩略图 3.组合Bitmap图片 很简单,本地图片需要我们从本地读取,如果是网络图片我们也可以根据URL来获取bitmap进行组合 具体实现过程 1.布局文件: <LinearLayo

Android仿微信发朋友圈浏览图片效果_Android

先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/