仿支付宝密码输入界面+随机键盘
**
仿支付宝密码输入界面+随机键盘
**
最近搞了dome,随机数字键盘+仿支付宝交易密码支付UI编写,很好的封装,随处调用
先上图,看看dome效果,觉得可以,可以继续往下走,ok…
随机键盘的实现,主要输对的绘制,以及的应用,实例化 = new (, R.xml.);
其中是存放数字的xml文件。随机参数数字键盘关键代码如下:
private void randomdigkey(){List keyList = keyDig.getKeys();// 查找出0-9的数字键List newkeyList = new ArrayList();for (int i = 0; i < keyList.size(); i++) {if (keyList.get(i).label != null&& isNumber(keyList.get(i).label.toString())) {newkeyList.add(keyList.get(i));}}// 数组长度int count = newkeyList.size();// 结果集List resultList = new ArrayList();// 用一个LinkedList作为中介LinkedList temp = new LinkedList();// 初始化tempfor (int i = 0; i < count; i++) {temp.add(new KeyModel(48 + i, i + ""));}// 取数Random rand = new Random();for (int i = 0; i < count; i++) {int num = rand.nextInt(count - i);resultList.add(new KeyModel(temp.get(num).getCode(),temp.get(num).getLable()));temp.remove(num);}for (int i = 0; i < newkeyList.size(); i++) {newkeyList.get(i).label = resultList.get(i).getLable();newkeyList.get(i).codes[0] = resultList.get(i).getCode();}keyboardView.setKeyboard(keyDig);}
交易密码框的实现的实现,构建一个虚拟的,通过对的可见性控制来虚拟的模拟交易密码的输入(回显效果),在把真正的输入内容存放在中,当输入长度到达6时,回调,自定义一个交易密码框代码如下:
public class SecurityPasswordEditText extends LinearLayout { private EditText mEditText; private ImageView oneTextView; private ImageView twoTextView; private ImageView threeTextView; private ImageView fourTextView; private ImageView fiveTextView; private ImageView sixTextView; LayoutInflater inflater; private ImageView[] imageViews; private View contentView; StringBuilder builder; public SecurityPasswordEditText(Context context, AttributeSet attrs) { super(context, attrs); inflater = LayoutInflater.from(context); builder = new StringBuilder(); initWidget(); } private void initWidget() { contentView = inflater.inflate(R.layout.sdk2_simple_pwd_widget, null); mEditText = (EditText) contentView .findViewById(R.id.sdk2_pwd_edit_simple); oneTextView = (ImageView) contentView .findViewById(R.id.sdk2_pwd_one_img); twoTextView = (ImageView) contentView .findViewById(R.id.sdk2_pwd_two_img); fourTextView = (ImageView) contentView .findViewById(R.id.sdk2_pwd_four_img); fiveTextView = (ImageView) contentView .findViewById(R.id.sdk2_pwd_five_img); sixTextView = (ImageView) contentView .findViewById(R.id.sdk2_pwd_six_img); threeTextView = (ImageView) contentView .findViewById(R.id.sdk2_pwd_three_img); LinearLayout.LayoutParams lParams = new LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); mEditText.addTextChangedListener(mTextWatcher); imageViews = new ImageView[] { oneTextView, twoTextView, threeTextView, fourTextView, fiveTextView, sixTextView }; this.addView(contentView, lParams); } TextWatcher mTextWatcher = new TextWatcher() { @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { if (s.toString().length() == 0) { return; } if (builder.length() < 6) { builder.append(s.toString()); setTextValue(); }s.delete(0, s.length());} }; private void setTextValue() { String str = builder.toString(); int len = str.length(); if (len <= 6) { imageViews[len - 1].setVisibility(View.VISIBLE); } if (len >= 6) { Log.i("简密框","回调"); Log.i("简密框","支付密码" + str); if (mListener != null) { mListener.onNumCompleted(str); }
// LogUtils.i("jone", builder.toString());
// FunctionUtils.hideSoftInputByView(getContext(), mEditText); } } public void delTextValue() { String str = builder.toString(); int len = str.length(); if (len == 0) { return; } if (len > 0 && len <= 6) { builder.delete(len - 1, len);
// Log.e("===", builder.toString()+"len = "+len);} imageViews[len - 1].setVisibility(View.INVISIBLE);
// Log.e("===", builder.toString()+"len = "+imageViews[len-1].getVisibility());}public interface SecurityEditCompleListener { public void onNumCompleted(String num); } public SecurityEditCompleListener mListener; public void setSecurityEditCompleListener( SecurityEditCompleListener mListener) { this.mListener = mListener; } public void clearSecurityEdit() { if (builder != null) { if (builder.length() == 6) { builder.delete(0, 6); } } for (ImageView tv : imageViews) { tv.setVisibility(View.INVISIBLE); } } public EditText getSecurityEdit() { return this.mEditText; }
}
交易密码POP的封装及调用,清楚以上一种关键实现之后,下面我们将他封装起来,代码如下:
/*** 封装pop类,创建回调* @author AHF**/
public class TradePwdPopUtils {private PopupWindow popWindow = null;private CallBackTradePwd callBackTradePwd;public TradePwdPopUtils() {super();}public CallBackTradePwd getCallBackTradePwd() {return callBackTradePwd;}public void setCallBackTradePwd(CallBackTradePwd callBackTradePwd) {this.callBackTradePwd = callBackTradePwd;}public interface CallBackTradePwd{public void callBaceTradePwd(String pwd);}protected void showPopWindow(Context context,Activity ac,LinearLayout lin) {popWindow = null;if (popWindow == null) {LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);View view = inflater.inflate(R.layout.trade_key_layout, null);SecurityPasswordEditText myEdit = (SecurityPasswordEditText) view.findViewById(R.id.my_edit);TextView tvClose = (TextView) view.findViewById(R.id.tv_close);myEdit.setSecurityEditCompleListener(new SecurityEditCompleListener() {@Overridepublic void onNumCompleted(String num) {popWindow.dismiss();if(callBackTradePwd!=null){callBackTradePwd.callBaceTradePwd(num);}}});tvClose.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {popWindow.dismiss();}});ac.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);Method setShowSoftInputOnFocus = null;try {setShowSoftInputOnFocus = myEdit.getClass().getMethod("setShowSoftInputOnFocus", boolean.class);setShowSoftInputOnFocus.setAccessible(true);setShowSoftInputOnFocus.invoke(myEdit, false);} catch (SecurityException e) {e.printStackTrace();} catch (NoSuchMethodException e) {e.printStackTrace();}catch(Exception e){e.printStackTrace();}new KeyboardUtil(view, context, myEdit).showKeyboard();popWindow = new PopupWindow(view, LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);popWindow.setFocusable(true);popWindow.setOutsideTouchable(true);popWindow.setBackgroundDrawable(new BitmapDrawable());popWindow.showAtLocation(lin, Gravity.BOTTOM, 0, 0);}}
}
ok,在这已经完成了一大半了,最后一步,只需会调用封装好的方法即可显示密码输入效果了。
/*** 主活动* @author AHF**/
public class MainActivity extends Activity implements CallBackTradePwd{Button btn;LinearLayout lin;private TradePwdPopUtils pop;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main_layout);btn = (Button) findViewById(R.id.btn);pop = new TradePwdPopUtils();lin = (LinearLayout) findViewById(R.id.lin);pop.setCallBackTradePwd(this);btn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {pop.showPopWindow(MainActivity.this, MainActivity.this, lin);}});}@Overridepublic void callBaceTradePwd(String pwd) {Toast.makeText(this, "回调密码"+pwd, Toast.LENGTH_LONG).show(); }
}
ok,初略的分析了下,希望对你有所帮助!!!
最后贴上源码下载地址:仿支付宝密码输入框+随机键盘源码下载
tags:
支付宝