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>

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

以上就是Android 高仿微信支付数字键盘功能的详细内容，更多内容请关注技术你好其它相关文章！