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

现在很多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>

键盘的布局，实质就是一个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);
}
@override
public 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;
}
@override
public int getcount() {
return valuelist.size();
}
@override
public object getitem(int position) {
return valuelist.get(position);
}
@override
public long getitemid(int position) {
return position;
}
@override
public 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">
<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>

可以看到，我们在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>

我们在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;
@override
protected 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() {
@override
public void onclick(view v) {
virtualkeyboardview.startanimation(exitanim);
virtualkeyboardview.setvisibility(view.gone);
}
});
gridview = virtualkeyboardview.getgridview();
gridview.setonitemclicklistener(onitemclicklistener);
textamount.setonclicklistener(new view.onclicklistener() {
@override
public void onclick(view v) {
virtualkeyboardview.setfocusable(true);
virtualkeyboardview.setfocusableintouchmode(true);
virtualkeyboardview.startanimation(enteranim);
virtualkeyboardview.setvisibility(view.visible);
}
});
}
private adapterview.onitemclicklistener onitemclicklistener = new adapterview.onitemclicklistener() {
@override
public 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 高仿微信支付数字键盘功能，希望对大家有所帮助