現(xiàn)在很多app的支付、輸入密碼功能,都已經(jīng)開(kāi)始使用自定義數(shù)字鍵盤(pán),不僅更加方便、其效果著實(shí)精致。
下面帶著大家學(xué)習(xí)下,如何高仿微信的數(shù)字鍵盤(pán),可以拿來(lái)直接用在自身的項(xiàng)目中。
先看下效果圖:

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"><!-- 輸入鍵盤(pán) --><GridViewandroid: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" /><Viewandroid:id="@+id/line"android:layout_width="match_parent"android:layout_height="1px"android:layout_above="@id/gv_keybord"android:background="#bdbdbd" /><RelativeLayoutandroid:id="@+id/layoutBack"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_above="@id/line"android:background="#f5f5f5"android:padding="10dp"><ImageViewandroid:id="@+id/imgBack"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@mipmap/keyboard_back_img" /></RelativeLayout><Viewandroid:layout_width="match_parent"android:layout_height="1px"android:layout_above="@id/layoutBack"android:layout_marginTop="1dp"android:background="#bdbdbd" /></RelativeLayout>
鍵盤(pán)的布局,實(shí)質(zhì)就是一個(gè)4X3網(wǎng)格布局的GridView。
2.實(shí)現(xiàn)數(shù)字鍵盤(pán)內(nèi)容
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;/*** 虛擬鍵盤(pán)*/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);}@Overridepublic 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;/*** 九宮格鍵盤(pán)適配器*/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;}@Overridepublic int getCount() {return valueList.size();}@Overridepublic Object getItem(int position) {return valueList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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是如何實(shí)現(xiàn)的:
<?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"><TextViewandroid: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" /><RelativeLayoutandroid:id="@+id/imgDelete"android:layout_width="wrap_content"android:layout_height="60dp"android:layout_centerInParent="true"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@mipmap/keyboard_delete_img" /></RelativeLayout></RelativeLayout>
可以看到,我們?cè)趇tem布局文件中,指定了兩個(gè)view,一個(gè)是普通顯示數(shù)字的TextView, 一個(gè)是顯示最后刪除鍵的RelativeLayout。
然后,在KeyBoardAdapter 的getView方法中,我們根據(jù)position位置,對(duì)布局進(jìn)行不同的處理。當(dāng)position為9,也就是倒數(shù)第三個(gè)按鍵,它的按鈕顏色要單獨(dú)設(shè)置。 當(dāng)position為12也就是最后一個(gè)按鈕時(shí),需要控制刪除按鈕顯示,數(shù)字按鈕隱藏。 其余情況則是刪除按鈕隱藏,數(shù)字按鈕顯示。
3.使用并實(shí)現(xiàn)鍵盤(pán)事件邏輯
布局中,可以直接使用自己定義的數(shù)字鍵盤(pán):
<?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"><EditTextandroid: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.VirtualKeyboardViewandroid:id="@+id/virtualKeyboardView"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom" /></RelativeLayout>
我們?cè)贏(yíng)ctivity中,操作數(shù)字鍵盤(pán):
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;@Overrideprotected 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() {@Overridepublic void onClick(View v) {virtualKeyboardView.startAnimation(exitAnim);virtualKeyboardView.setVisibility(View.GONE);}});gridView = virtualKeyboardView.getGridView();gridView.setOnItemClickListener(onItemClickListener);textAmount.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {virtualKeyboardView.setFocusable(true);virtualKeyboardView.setFocusableInTouchMode(true);virtualKeyboardView.startAnimation(enterAnim);virtualKeyboardView.setVisibility(View.VISIBLE);}});}private AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {if (position < 11 && position != 9) { //點(diǎn)擊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) { //點(diǎn)擊退格鍵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) { //點(diǎn)擊退格鍵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 高仿微信支付數(shù)字鍵盤(pán)功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注