Nowadays, many apps use custom numeric keyboards for payment and password input functions, which is convenient and practical. The following article brings you Android high imitation WeChat payment numeric keyboard function, which is very good. Friends who are interested, let’s learn together

Let’s learn how to imitate WeChat’s numeric keyboard and use it directly in your own projects

Let’s take a look first. The following renderings:

1. Custom layout

<?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>

The layout of the keyboard is essentially a GridView with a 4X3 grid layout .

2. Implement the numeric keyboard content

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()?{
/*?初始化按鈕上應(yīng)該顯示的數(shù)字?*/
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)?{
}
}

Let’s see how the adapter handles it: 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;
}
}

Before looking at the Adapter, let’s look at it first How grid_item_virtual_keyboard is implemented:

<?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>

As you can see, we have specified two views in the item layout file, one is a TextView that displays numbers normally, and the other is a RelativeLayout that displays the last deleted key ##. #Then, in the getView method of KeyBoardAdapter, we process the layout differently according to the position. When position is 9, which is the third button from the bottom, its button color must be set separately. When position is 12, which is the last button. When there is a button, it is necessary to control the delete button to be displayed and the number button to be hidden. In other cases, the delete button is hidden and the number button is displayed. 3. Use and implement keyboard event logic

<?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>

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

The above is the detailed content of Android high imitation WeChat payment numeric keyboard function. For more information, please follow other related articles on the PHP Chinese website!