欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-07 15:02:21
现在很多app的支付、输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便、其效果着实精致。 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中...

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

下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中。

先看下效果图:

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

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 高仿微信支付数字键盘功能,希望对大家有所帮助