Home > Article > WeChat Applet > Android high imitation WeChat payment numeric keyboard function
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() { /* 初始化按钮上应该显示的数字 */ 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>We operate the numeric keyboard in 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()); } } } } };}
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!