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

概述现在很多app的支付、输入密码功能，都已经开始使用自定义数字键盘，不仅更加方便、其效果着实精致。

现在很多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"><!-- 输入键盘 --><GrIDVIEwandroID: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" /><VIEwandroID:ID="@+ID/line"androID:layout_wIDth="match_parent"androID:layout_height="1px"androID:layout_above="@ID/gv_keybord"androID:background="#bdbdbd" /><relativeLayoutandroID:ID="@+ID/layoutBack"androID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:layout_above="@ID/line"androID:background="#f5f5f5"androID:padding="10dp"><ImageVIEwandroID:ID="@+ID/imgBack"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:layout_centerInParent="true"androID:src="@mipmap/keyboard_back_img" /></relativeLayout><VIEwandroID:layout_wIDth="match_parent"androID:layout_height="1px"androID:layout_above="@ID/layoutBack"androID:layout_margintop="1dp"androID:background="#bdbdbd" /></relativeLayout>

键盘的布局，实质就是一个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) {}}

看下适配器如何处理：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;}}

在看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"><TextVIEwandroID: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" /><relativeLayoutandroID:ID="@+ID/imgDelete"androID:layout_wIDth="wrap_content"androID:layout_height="60dp"androID:layout_centerInParent="true"><ImageVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:layout_centerInParent="true"androID:src="@mipmap/keyboard_delete_img" /></relativeLayout></relativeLayout>

可以看到，我们在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"><EditTextandroID: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.VirtualKeyboardVIEwandroID:ID="@+ID/virtualKeyboardVIEw"androID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:layout_gravity="bottom" /></relativeLayout>

我们在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());}}}}};}

源码地址：https://github.com/zuiwuyuan/WeChatPswKeyboard

上所述是小编给大家介绍的AndroID 高仿微信支付数字键盘功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android 高仿微信支付数字键盘功能全部内容，希望文章能够帮你解决Android 高仿微信支付数字键盘功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。