Android仿支付宝、京东的密码键盘和输入框
Android仿支付宝、京东的密码键盘和输入框
发布时间:2016-12-28 来源:查字典编辑
摘要:首先看下效果图一:布局代码键盘由0~9的数字,删除键和完成键组成,也可以根据需求通过GridView适配器的getItemViewType方...

首先看下效果图

Android仿支付宝、京东的密码键盘和输入框1

一:布局代码

键盘由0~9的数字,删除键和完成键组成,也可以根据需求通过GridView适配器的getItemViewType方法来定义。点击键的时候背景有变色的效果。

密码输入框由六个EditText组成,每个输入框最对能输入一个数字,监听最后一个输入框来完成密码输入结束的监听。

二:键盘

键盘中的主要逻辑处理,键盘样式,item的点击事件

@Override public int getViewTypeCount() { return 2; } @Override public int getItemViewType(int position) { return (getItemId(position) == KEY_NINE) ? 2 : 1; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder viewHolder = null; if (convertView == null) { if (getItemViewType(position) == 1) { //数字键 convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard, parent, false); viewHolder = new ViewHolder(convertView); } else { //删除键 convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard_delete, parent, false); } } if (getItemViewType(position) == 1) { viewHolder = (ViewHolder) convertView.getTag(); viewHolder.tvKey.setText(key[position]); } return convertView; }

三:密码输入框

密码输入框要处理的逻辑有删除、输入、输入完成回调等

/** * 输入密码,根据StringBuilder中数据的多少进行逻辑判断 * @param value */ public void add(String value) { if (mPassword != null && mPassword.length() < 6) { mPassword.append(value);//此处先添加到StringBuilder中,再在输入框中显示 if (mPassword.length() == 1) { tvFirst.setText(value); } else if (mPassword.length() == 2) { tvSecond.setText(value); }else if (mPassword.length() == 3) { tvThird.setText(value); }else if (mPassword.length() == 4) { tvForth.setText(value); }else if (mPassword.length() == 5) { tvFifth.setText(value); }else if (mPassword.length() == 6) { tvSixth.setText(value); } } } /** * 删除密码,根据StringBuilder中数据的多少进行逻辑判断 */ public void remove() { if (mPassword != null && mPassword.length() > 0) { if (mPassword.length() == 1) { tvFirst.setText(""); } else if (mPassword.length() == 2) { tvSecond.setText(""); }else if (mPassword.length() == 3) { tvThird.setText(""); }else if (mPassword.length() == 4) { tvForth.setText(""); }else if (mPassword.length() == 5) { tvFifth.setText(""); }else if (mPassword.length() == 6) { tvSixth.setText(""); } mPassword.deleteCharAt(mPassword.length() - 1); } }

获取完整密码

/** * 返回完整密码 * @return */ public String getText() { return (mPassword == null) ? null : mPassword.toString(); }

四:实际应用

布局,也可以把键盘拆分开来,当输入的时候从窗口下方滑入

<"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"> <com.github.phoenix.widget.PayEditText android:id="@+id/PayEditText_pay" android:layout_width="match_parent" android:layout_marginTop="20dp" android:paddingLeft="12dp" android:layout_alignParentTop="true" android:paddingRight="12dp" android:layout_height="48dp"/> <com.github.phoenix.widget.Keyboard android:id="@+id/KeyboardView_pay" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="300dp"/> </RelativeLayout>

代码中

//键 private static final String[] KEY = new String[] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "<<", "0", "完成" }; //设置键盘 keyboard.setKeyboardKeys(KEY); //键盘键的点击事件 keyboard.setOnClickKeyboardListener(new Keyboard.OnClickKeyboardListener() { @Override public void onKeyClick(int position, String value) { if (position < 11 && position != 9) { payEditText.add(value); } else if (position == 9) { payEditText.remove(); }else if (position == 11) { //当点击键盘上的完成按钮时,也可以通过payEditText.getText()获取密码,此时不应该注册OnInputFinishedListener接口 Toast.makeText(getApplication(), "您的密码是:" + payEditText.getText(), Toast.LENGTH_SHORT).show(); finish(); } } }); //当密码输入完成时的回调 payEditText.setOnInputFinishedListener(new PayEditText.OnInputFinishedListener() { @Override public void onInputFinished(String password) { Toast.makeText(getApplication(), "您的密码是:" + password, Toast.LENGTH_SHORT).show(); } });

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能有所帮助,如果有疑问大家可以留言交流。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新安卓软件开发学习
热门安卓软件开发学习
编程开发子分类