Android 高仿微信支付键盘
转载自 http://blog.csdn.net/zuiwuyuan/article/details/52198240
1. 道友留步
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
现在很多app的支付、输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便、其效果着实精致。
下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中。
先看下效果图:
1. 自定义布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><!-- 输入键盘 --><GridView
android:id="@+id/gv_keybord"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:background="#bdbdbd"android:horizontalSpacing="1px"android:numColumns="3"android:verticalSpacing="1px" /><View
android:id="@+id/line"android:layout_width="match_parent"android:layout_height="1px"android:layout_above="@id/gv_keybord"android:background="#bdbdbd" /><RelativeLayout
android:id="@+id/layoutBack"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_above="@id/line"android:background="#f5f5f5"android:padding="10dp"><ImageView
android:id="@+id/imgBack"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@mipmap/keyboard_back_img" /></RelativeLayout><View
android:layout_width="match_parent"android:layout_height="1px"android:layout_above="@id/layoutBack"android:layout_marginTop="1dp"android:background="#bdbdbd" /></RelativeLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
键盘的布局,实质就是一个4X3网格布局的GridView。
2.实现数字键盘内容
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.GridView;
import android.widget.RelativeLayout;import com.lnyp.pswkeyboard.R;
import com.lnyp.pswkeyboard.adapter.KeyBoardAdapter;import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;/*** 虚拟键盘*/
public class VirtualKeyboardView extends RelativeLayout implements View.OnClickListener {Context context;private GridView gridView; private RelativeLayout layoutBack;private ArrayList<Map<String, String>> valueList; public VirtualKeyboardView(Context context) {this(context, null);}public VirtualKeyboardView(Context context, AttributeSet attrs) {super(context, attrs);this.context = context;View view = View.inflate(context, R.layout.layout_virtual_keyboard, null);valueList = new ArrayList<>();layoutBack = (RelativeLayout) view.findViewById(R.id.layoutBack);layoutBack.setOnClickListener(this);gridView = (GridView) view.findViewById(R.id.gv_keybord);setView();addView(view); }public RelativeLayout getLayoutBack() {return layoutBack;}public ArrayList<Map<String, String>> getValueList() {return valueList;}public GridView getGridView() {return gridView;}private void setView() {/* 初始化按钮上应该显示的数字 */for (int i = 1; i < 13; i++) {Map<String, String> map = new HashMap<String, String>();if (i < 10) {map.put("name", String.valueOf(i));} else if (i == 10) {map.put("name", ".");} else if (i == 11) {map.put("name", String.valueOf(0));} else if (i == 12) {map.put("name", "");}valueList.add(map);}KeyBoardAdapter keyBoardAdapter = new KeyBoardAdapter(context, valueList);gridView.setAdapter(keyBoardAdapter);}@Overridepublic void onClick(View v) {}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
看下适配器如何处理:KeyBoardAdapter .Java
import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.RelativeLayout;
import android.widget.TextView;import com.lnyp.pswkeyboard.R;import java.util.ArrayList;
import java.util.Map;/*** 九宫格键盘适配器*/
public class KeyBoardAdapter extends BaseAdapter {private Context mContext;private ArrayList<Map<String, String>> valueList;public KeyBoardAdapter(Context mContext, ArrayList<Map<String, String>> valueList) {this.mContext = mContext;this.valueList = valueList;}@Overridepublic int getCount() {return valueList.size();}@Overridepublic Object getItem(int position) {return valueList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder viewHolder;if (convertView == null) {convertView = View.inflate(mContext, R.layout.grid_item_virtual_keyboard, null);viewHolder = new ViewHolder();viewHolder.btnKey = (TextView) convertView.findViewById(R.id.btn_keys);viewHolder.imgDelete = (RelativeLayout) convertView.findViewById(R.id.imgDelete);convertView.setTag(viewHolder);} else {viewHolder = (ViewHolder) convertView.getTag();}if (position == 9) {viewHolder.imgDelete.setVisibility(View.INVISIBLE);viewHolder.btnKey.setVisibility(View.VISIBLE);viewHolder.btnKey.setText(valueList.get(position).get("name"));viewHolder.btnKey.setBackgroundColor(Color.parseColor("#e0e0e0"));} else if (position == 11) {viewHolder.btnKey.setBackgroundResource(R.mipmap.keyboard_delete_img);viewHolder.imgDelete.setVisibility(View.VISIBLE);viewHolder.btnKey.setVisibility(View.INVISIBLE);} else {viewHolder.imgDelete.setVisibility(View.INVISIBLE);viewHolder.btnKey.setVisibility(View.VISIBLE);viewHolder.btnKey.setText(valueList.get(position).get("name"));}return convertView;}/*** 存放控件*/public final class ViewHolder {public TextView btnKey;public RelativeLayout imgDelete;}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
在看Adapter之前,我们先看下grid_item_virtual_keyboard是如何实现的:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#e0e0e0"><TextView
android:id="@+id/btn_keys"android:layout_width="match_parent"android:layout_height="60dp"android:layout_centerInParent="true"android:background="@drawable/selector_gird_item"android:gravity="center"android:includeFontPadding="false"android:textColor="#333333"android:textSize="26sp" /><RelativeLayout
android:id="@+id/imgDelete"android:layout_width="wrap_content"android:layout_height="60dp"android:layout_centerInParent="true"><ImageView
android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@mipmap/keyboard_delete_img" /></RelativeLayout></RelativeLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
可以看到,我们在item布局文件中,指定了两个view,一个是普通显示数字的TextView, 一个是显示最后删除键的RelativeLayout。
然后,在KeyBoardAdapter 的getView方法中,我们根据position位置,对布局进行不同的处理。当position为9,也就是倒数第三个按键,它的按钮颜色要单独设置。 当position为12也就是最后一个按钮时,需要控制删除按钮显示,数字按钮隐藏。 其余情况则是删除按钮隐藏,数字按钮显示。
3.使用并实现键盘事件逻辑
布局中,可以直接使用自己定义的数字键盘:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#efefef"tools:context="com.lnyp.pswkeyboard.NormalKeyBoardActivity"><EditText
android:id="@+id/textAmount"android:layout_width="match_parent"android:layout_height="50dp"android:background="#FFFFFF"android:inputType="numberDecimal"android:padding="14dp"android:textColor="#333333"android:textSize="16sp" /><com.lnyp.pswkeyboard.widget.VirtualKeyboardView
android:id="@+id/virtualKeyboardView"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom" /></RelativeLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
我们在Activity中,操作数字键盘:
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.GridView;import com.lnyp.pswkeyboard.widget.VirtualKeyboardView;import java.util.ArrayList;
import java.util.Map;public class NormalKeyBoardActivity extends AppCompatActivity {private VirtualKeyboardView virtualKeyboardView;private GridView gridView;private ArrayList<Map<String, String>> valueList;private EditText textAmount;private Animation enterAnim;private Animation exitAnim;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_normal_key_board);valueList = virtualKeyboardView.getValueList();initAnim();initView();}private void initAnim() {enterAnim = AnimationUtils.loadAnimation(this, R.anim.push_bottom_in);exitAnim = AnimationUtils.loadAnimation(this, R.anim.push_bottom_out);}private void initView() {virtualKeyboardView = (VirtualKeyboardView) findViewById(R.id.virtualKeyboardView);textAmount = (EditText) findViewById(R.id.textAmount);virtualKeyboardView.getLayoutBack().setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {virtualKeyboardView.startAnimation(exitAnim);virtualKeyboardView.setVisibility(View.GONE);}});gridView = virtualKeyboardView.getGridView();gridView.setOnItemClickListener(onItemClickListener);textAmount.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {virtualKeyboardView.setFocusable(true);virtualKeyboardView.setFocusableInTouchMode(true);virtualKeyboardView.startAnimation(enterAnim);virtualKeyboardView.setVisibility(View.VISIBLE);}});}private AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {if (position < 11 && position != 9) { //点击0~9按钮String amount = textAmount.getText().toString().trim();amount = amount + valueList.get(position).get("name");textAmount.setText(amount);Editable ea = textAmount.getText();textAmount.setSelection(ea.length());} else {if (position == 9) { //点击退格键String amount = textAmount.getText().toString().trim();if (!amount.contains(".")) {amount = amount + valueList.get(position).get("name");textAmount.setText(amount);Editable ea = textAmount.getText();textAmount.setSelection(ea.length());}}if (position == 11) { //点击退格键String amount = textAmount.getText().toString().trim();if (amount.length() > 0) {amount = amount.substring(0, amount.length() - 1);textAmount.setText(amount);Editable ea = textAmount.getText();textAmount.setSelection(ea.length());}}}}};
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
好了,通过以上步骤,我们便可以实现微信支付键盘啦,是不是很easy呢?!
如有疑问或建议,欢迎进QQ群来讨论交流:487786925( Android研发村 )
源码地址:https://github.com/zuiwuyuan/WeChatPswKeyboard
Android 高仿微信支付键盘相关推荐
- android 微信支付键盘,Android 高仿微信支付键盘
转载自 http://blog.csdn.net/zuiwuyuan/article/details/52198240 1. 道友留步 这位大神的代码封装的很好,把类拿来直接就可以用的了,稍微要注意 ...
- android仿微信充值布局,Android 高仿微信支付数字键盘功能
现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定 ...
- php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下 像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
- h5仿微信支付键盘|仿支付宝数字键盘
h5+js 高仿微信支付键盘|微信数字密码键盘|支付宝商铺付款键盘 利用html5开发的仿微信支付数字键盘,密码软键盘插件wcKeyboard,可自定义背景.类型.皮肤,包含微信.支付宝两种皮肤样式, ...
- android+高仿视频录制,android高仿微信视频编辑页
android高仿微信视频编辑页-视频多张图片提取 上一篇中介绍了有关视频提取图片的知识点,如果对这个不太了解 建议看下android提取视频多张图片和视频信息之前这篇. 这里实现的是仿微信的视频编辑 ...
- android高仿微信视频编辑页-视频多张图片提取
android高仿微信视频编辑页-视频多张图片提取 上一篇中介绍了有关视频提取图片的知识点,如果对这个不太了解 建议看下android提取视频多张图片和视频信息之前这篇. 这里实现的是仿微信的视频编辑 ...
- android仿微信聊天功能,Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...
- android 微信高仿,Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...
- android com.mylhyl,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...
最新文章
- 5.3Role和Claims授权「深入浅出ASP.NET Core系列」
- 说说 ES6 的 let 指令
- JDK 8中几乎命名的方法参数
- 前台和后台是要写两个工程吗_如何判断一个Bug属于前台还是后台
- atom编辑器 apm指令配置代理
- SharePoint服务器端对象模型 之 使用CAML进行数据查询(Part 4)
- uboot distro_bootcmd 理解
- 扫描隧道显微镜STM功能介绍及用途
- JSDOM案例:猜字游戏
- 总结在mac电脑上安装brew
- PCL代码学习03-kdtree_search
- Java项目:(小程序)物业管理系统(spring+spring mvc+mybatis+layui+微信小程)
- initializationError报错
- 打车出行小程序APP定制开发代驾拼车专车
- 铁电存储器FRAM的优劣势
- 纽卡斯尔计算机学院地址,2020年纽卡斯尔大学科学与信息技术学院具体地址及在哪个校区?...
- unity-shader-水water实现
- js中trim的使用
- 【体验攻略】于曙光智算计算平台进行气象数值模式WRF的编译、运行和处理
- 软件工程之软件工程管理,软件项目管理(甘特图、时标网络图TSN,COMOMO模型)
热门文章
- Tobii:眼球追踪技术能够提升制造行业安全性
- fatal: You have not concluded your cherry-pick (CHERRY_PICK_HEAD exists). Please, commit your change
- 华米Amazfit GTS 2e用续航和高性价比征服外媒
- 高等数学-线性代数:特征向量与差分方程的连接
- python自动表单填充工具(内含rar)
- ArcGISPro制作辐射4风格地图
- 关于监听Android的静音键以及音量按键
- Python开发【项目】:生产环境下实时统计网站访问日志信息
- Python爬虫:让“蜘蛛”帮我们工作
- Robcup2D足球学习记录【2020.01.18】