Android开发笔记（一百四十六）仿支付宝的支付密码输入框

编辑框EditText算是Android的一个基础控件了，表面上看，EditText只负责接收用户手工输入的文本；可实际上，要把这看似简单的文本输入做得方便易用，并不是一个简单的事情。因为用户可能希望App会更加智能一些，比如用户希望编辑框提供关键词联想功能，又比如用户希望编辑框能够自我纠错等等；所以，Android从设计之初就努力尝试解决这些问题，先是自带了自动完成编辑框AutoCompleteTextView，后来又在Android5.0以后提供了文本输入布局TextInputLayout。

然而，计划赶不上变化，开发工作中总有一些现有控件无法直接实现的需求，就像支付宝的支付密码输入框，在一排方格区域内输入并显示密文密码，每个密文字符之间又有竖线分隔。为直观理解支付密码输入框的业务需求，下面还是先看看该输入框的最终效果图。


从图中可以看出，这个支付密码输入框由六个方格组成，每个方格输入并显示第几位的密文字符。可是单张静态截图无法准确体现支付密码输入框的具体功能，因此我们再来看看使用该输入框的完整操作流程，相关动图如下所示。


由这张动图可以发现，支付密码输入框至少需要完成以下功能：
1、一开始边框是灰色的，获得焦点后边框变蓝色；
2、输入框一共六个方格，每个方格之间以竖线隔开；
3、每个方格只显示一个密码字符，且字符位于方格中央；
4、密码不显示明文，而是显示密文，比如点号（·）或者星号（*）；
5、输完六位密码，应自动触发密码输入完成的事件；

因为支付密码允许一位一位输入，也允许一位一位删除，所以它本质上还是一个编辑框，也就是说，支付密码的输入框必须实现EditText的功能。当然，在界面展现上，需要以横排方格的形式加以显示。于是可以考虑，把支付密码的输入与显示操作分离开来，即密码输入操作仍由EditText处理，而密码显示操作则由自定义的方格布局接管。

对于处理密码输入的EditText来说，需要实现以下几项操作：
1、把默认的下划线背景替换为圆角背景，且支持在获得焦点时高亮显示；
2、屏蔽输入光标，可调用setCursorVisible方法设置为不可见；
3、把输入文字变成不可见，这里建议把文字颜色设为透明，而不是把文字大小设为0，因为若将大小设为0就无法自适应高度；
4、设置输入字符串的长度为6，设置长度操作可调用setFilters方法；
5、添加文本变更监听器，每当密码输入或者删除之时，就通知方格布局更新密文显示；同时还得监控输入字符数是否达到6位，如果达到6位就触发密码完成事件；

对于接管密码显示的方格布局来说，需要实现以下几项操作：
1、建立一个密码文本队列，队列长度为6；
2、每项密码文本控件都是一个TextView，文字居中对齐；
3、往布局上添加TextView队列时，在相邻的TextView之间要添加一条竖线，也就是宽度为1的灰色View；
4、依据转换规则，决定当前显示明文还是密文；如果是密文，则显示哪个密文字符；
5、每当EditText里的文本发生变更之时，相应更新TextView队列的各项文本显示；

上述的改造内容，大部分都有可以直接调用的函数，但有两个功能的实现要特别注意：
首先，对于密文字符，Android默认显示点号（·），可显示星号（*）也很常见，那有没有办法把系统默认的点号替换为星号呢？
这个需求看起来很简单，只要强行给TextView队列调用setText方法即可，然而这不是安全的做法，因为它丢弃了CharSequence中的丰富信息。正确的做法是调用setTransformationMethod方法，给TextView设置转换方式。恰好系统提供了一个字符替换的转换方式类即HideReturnsTransformationMethod，该类的关键代码如下所示：

    private static char[] ORIGINAL = new char[] { '\r' };    private static char[] REPLACEMENT = new char[] { '\uFEFF' };    protected char[] getOriginal() {        return ORIGINAL;    }    protected char[] getReplacement() {        return REPLACEMENT;    }

这几行代码的意思是，把回车符（'\r'）替换为Unicode编码的空格（'\uFEFF'），其中getOriginal表示返回需要替换的字符列表，getReplacement表示返回替换后的字符列表。所以，若想把密码文本替换成点号或者星号，即可依样画葫芦，把数字字符（'0'到'9'）替换为'\u2022'（点号的Unicode编码）或者'\u002A'（星号的Unicode编码）。

其次，对于支付密码输入框的焦点获得问题，因为该输入框内部集成了EditText，所以不管是给输入框注册点击事件还是触摸事件，手势焦点都会被内部的EditText所抢占，使得密码输入框反而不会响应点击和触摸事件。详细的事件处理机制限于篇幅不再叙述，这里直接给出具体的解决步骤：
1、重写支付密码输入框布局的onInterceptTouchEvent方法，对所有触摸事件予以拦截，不让触摸事件传递给下级视图，代码如下所示：

public boolean onInterceptTouchEvent(MotionEvent ev) {return true;}

2、给支付密码输入框以及其它编辑框控件注册触摸监听器，并对触摸动作进行处理，在触摸密码输入框时强行使之获得焦点，处理触摸动作的代码如下所示：

public boolean onTouch(View v, MotionEvent event) {if (v.getId() == R.id.et_account) {et_account.setCursorVisible(true);} else if (v.getId() == R.id.ppi_password) {et_account.setCursorVisible(false);et_account.clearFocus();ppi_password.requestFocus();}return false;}

如此改进之后，本文开头的支付密码输入框也就具备了应有的输入和显示功能。

下面是支付密码输入框控件的完整代码：

public class PayPasswodInput extends RelativeLayout implements TextWatcher {private final static String TAG = "PayPasswodInput";private Context mContext;private EditText mEditText; // 文本编辑框，实际看不见private LinearLayout mShowLayout; // 真正显示着的文本区域private TextView[] mTextViews; // 分隔开的密码框private int mBorderColor = Color.GRAY; // 边框与分隔线颜色private int mPasswordColor = Color.BLACK; // 密码文字颜色private int mPasswordSize = 30; // 密码文字大小private int mPasswordLength = 6; // 密码长度private TransformationMethod mPasswordMethod; // 密码的显示方式private int mSplitWidth; // 分隔线的宽度public PayPasswodInput(Context context) {this(context, null);}public PayPasswodInput(Context context, AttributeSet attrs) {this(context, attrs, 0);}public PayPasswodInput(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mContext = context;mBorderColor = mContext.getResources().getColor(R.color.gray);mSplitWidth = Utils.dp2px(mContext, 1);mPasswordMethod = HideReturnsTransformationMethod.getInstance();}public void setPasswordStyle(int pwd_color, int pwd_size, int pwd_length, boolean pwd_show, int pwd_type) {mPasswordColor = pwd_color;mPasswordSize = pwd_size;mPasswordLength = pwd_length;mPasswordMethod = pwd_show ? HideReturnsTransformationMethod.getInstance() : //明文密码StarTransformationMethod.getInstance(pwd_type); //密文密码removeAllViews();showTextLayout();}private void showTextLayout() {LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);// 添加看不见的编辑框mEditText = new EditText(mContext);mEditText.setBackgroundResource(R.drawable.editext_selector);mEditText.setCursorVisible(false);mEditText.setTextSize(mPasswordSize);mEditText.setTextColor(Color.TRANSPARENT);// 设置最大长度mEditText.setFilters(new InputFilter[] { new InputFilter.LengthFilter(mPasswordLength) });mEditText.setInputType(InputType.TYPE_NUMBER_VARIATION_PASSWORD| InputType.TYPE_CLASS_NUMBER);mEditText.addTextChangedListener(this);addView(mEditText, layoutParams);// 添加可见的密码框布局mShowLayout = new LinearLayout(mContext);mShowLayout.setLayoutParams(layoutParams);mShowLayout.setGravity(Gravity.CENTER);mShowLayout.setOrientation(LinearLayout.HORIZONTAL);addView(mShowLayout);// 添加密码文本队列mTextViews = new TextView[mPasswordLength];LinearLayout.LayoutParams textParams = new LinearLayout.LayoutParams(0, LayoutParams.WRAP_CONTENT, 1);textParams.gravity = Gravity.CENTER;LinearLayout.LayoutParams splitParams = new LinearLayout.LayoutParams(mSplitWidth, LayoutParams.MATCH_PARENT);for (int i = 0; i < mTextViews.length; i++) {TextView textView = new TextView(mContext);textView.setLayoutParams(textParams);textView.setGravity(Gravity.CENTER);textView.setTextSize(mPasswordSize);textView.setTextColor(mPasswordColor);textView.setInputType(InputType.TYPE_NUMBER_VARIATION_PASSWORD| InputType.TYPE_CLASS_NUMBER);textView.setTransformationMethod(mPasswordMethod);textView.setPadding(0, Utils.dp2px(mContext, 5), 0, 0);mTextViews[i] = textView;mShowLayout.addView(mTextViews[i]);if (i < mTextViews.length - 1) {View view = new View(mContext);view.setBackgroundColor(mBorderColor);mShowLayout.addView(view, splitParams);}}}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {return true;}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {Editable edit = mEditText.getText();Selection.setSelection(edit, edit.length());}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void afterTextChanged(Editable s) {if (s.length() > 0) {int length = s.length();for (int i = 0; i < mPasswordLength; i++) {if (i < length) {for (int j = 0; j < length; j++) {char ch = s.charAt(j);mTextViews[j].setText(String.valueOf(ch));}} else {mTextViews[i].setText("");}}} else {for (int i = 0; i < mPasswordLength; i++) {mTextViews[i].setText("");}}if (s.length() == mPasswordLength) {if (onPasswordFinishListener != null) {onPasswordFinishListener.onFinishPassword(s.toString().trim());}}}private OnPasswordFinishListener onPasswordFinishListener;public void setOnPasswordFinishListener(OnPasswordFinishListener listener) {onPasswordFinishListener = listener;if (mEditText == null) {showTextLayout();}}public interface OnPasswordFinishListener {void onFinishPassword(String password);}}

点此查看Android开发笔记的完整目录

__________________________________________________________________________
本文现已同步发布到微信公众号“老欧说安卓”，打开微信扫一扫下面的二维码，或者直接搜索公众号“老欧说安卓”添加关注，更快更方便地阅读技术干货。