在用到支付类app时,都有一个简密的输入框。。开始实现的时候思路有点问题,后来到github上搜了下,找到了一个开源的库看起来相当的牛逼,,来个地址先:
https://github.com/Jungerr/GridPasswordView
效果图:
这个开源库我研究了之后,又有了自己的一个思路:来个假的简密框---底部放一个EditTextView,顶部放置6个ImageView的原点,控制他们的显隐来实现这个简密宽
开发步骤:
1 布局
<&#63;xml version="1.0" encoding="utf-8"&#63;>
2:自定义一个控件来处理输入、删除、显隐等事件
package com.suning.mobile.paysdk.view; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.util.AttributeSet; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.View; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import com.suning.mobile.paysdk.R; import com.suning.mobile.paysdk.utils.FunctionUtils; import com.suning.mobile.paysdk.utils.log.LogUtils; /** * * 〈一句话功能简述〉
* 〈功能详细描述〉 简密输入框 */ 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; ImageView[] imageViews; View contentView; 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.sdk_simple_pwd_widget, null); mEditText = (EditText) contentView .findViewById(R.id.sdk_pwd_edit_simple); OneTextView= (ImageView) contentView .findViewById(R.id.sdk_pwd_one_img); twoTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_two_img); fourTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_four_img); fiveTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_five_img); sixTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_six_img); threeTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_three_img); LinearLayout.LayoutParams lParams = new LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); mEditText.addTextChangedListener(mTextWatcher); mEditText.setOnKeyListener(keyListener); 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() == ) { return; } if (builder.length() <) { builder.append(s.toString()); setTextValue(); } s.delete(, s.length()); } }; OnKeyListener keyListener = new OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_UP) { delTextValue(); return true; } return false; } }; private void setTextValue() { String str = builder.toString(); int len = str.length(); if (len <= ) { imageViews[len - ].setVisibility(View.VISIBLE); } if (len == ) { LogUtils.i("回调"); LogUtils.i("支付密码" + str); if (mListener != null) { mListener.onNumCompleted(str); } LogUtils.i("jone", builder.toString()); FunctionUtils.hideSoftInputByView(getContext(), mEditText); } } private void delTextValue() { String str = builder.toString(); int len = str.length(); if (len == ) { return; } if (len > && len <= ) { builder.delete(len - , len); } imageViews[len - ].setVisibility(View.INVISIBLE); ; } StringBuilder builder; 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() == ) { builder.delete(, ); } } for (ImageView tv : imageViews) { tv.setVisibility(View.INVISIBLE); } } public EditText getSecurityEdit() { return this.mEditText; } }
这样子其实也实现了简密功能,但是这个比前面那个开源库简单了许多,当然功能也没有前面的那个强大。
以上内容给大家介绍了Android仿微信/支付宝密码输入框的全部叙述,希望大家喜欢。