Android 高仿微信支付數(shù)字鍵盤功能
現(xiàn)在很多app的支付、輸入密碼功能,都已經(jīng)開始使用自定義數(shù)字鍵盤,不僅更加方便、其效果著實(shí)精致。
下面帶著大家學(xué)習(xí)下,如何高仿微信的數(shù)字鍵盤,可以拿來直接用在自身的項(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"> <!-- 輸入鍵盤 --> <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>
鍵盤的布局,實(shí)質(zhì)就是一個(gè)4X3網(wǎng)格布局的GridView。
2.實(shí)現(xiàn)數(shù)字鍵盤內(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;
/**
* 虛擬鍵盤
*/
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) {
}
}
看下適配器如何處理: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是如何實(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"> <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>
可以看到,我們?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)鍵盤事件邏輯
布局中,可以直接使用自己定義的數(shù)字鍵盤:
<?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>
我們?cè)贏ctivity中,操作數(shù)字鍵盤:
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) { //點(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ù)字鍵盤功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Android如何通過手機(jī)自動(dòng)獲取短信驗(yàn)證碼
注冊(cè)帳號(hào)時(shí),經(jīng)常需要手機(jī)獲取驗(yàn)證碼,Android如何通過手機(jī)自動(dòng)獲取短信驗(yàn)證碼,下面看看小編給大家分享的一段代碼,感興趣的小伙伴們可以參考一下2016-03-03
android實(shí)現(xiàn)漢字轉(zhuǎn)拼音功能 帶多音字識(shí)別
這篇文章主要介紹了android實(shí)現(xiàn)漢字轉(zhuǎn)拼音功能,帶多音字識(shí)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
Android如何實(shí)現(xiàn)URL轉(zhuǎn)換成二維碼
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)URL轉(zhuǎn)換成二維碼的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
android開發(fā)socket編程之udp發(fā)送實(shí)例分析
這篇文章主要介紹了android開發(fā)socket編程之udp發(fā)送,實(shí)例分析了Android開發(fā)socket網(wǎng)絡(luò)編程中udp發(fā)送的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
Android實(shí)現(xiàn)計(jì)步進(jìn)度的環(huán)形Progress
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)計(jì)步進(jìn)度的環(huán)形Progress,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
Android實(shí)現(xiàn)直播聊天區(qū)域中頂部的漸變效果
最近在研究直播的彈幕,東西有點(diǎn)多,準(zhǔn)備記錄一下免得自己忘了又要重新研究,下面這篇文章主要給大家介紹了關(guān)于Android如何實(shí)現(xiàn)直播聊天區(qū)域中頂部漸變效果的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2018-04-04
RecyclerView實(shí)現(xiàn)抖音縱向滾動(dòng)ViewPager效果
這篇文章主要為大家詳細(xì)介紹了RecyclerView實(shí)現(xiàn)抖音縱向滾動(dòng)ViewPager效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
Android中判斷網(wǎng)絡(luò)是否連接實(shí)例詳解
這篇文章主要介紹了Android中判斷網(wǎng)絡(luò)是否連接實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
Android程序開發(fā)之手機(jī)APP創(chuàng)建桌面快捷方式
這篇文章主要介紹了Android程序開發(fā)之手機(jī)APP創(chuàng)建桌面快捷方式 的相關(guān)資料,需要的朋友可以參考下2016-04-04

