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

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

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

从图中可以看出,这个支付密码输入框由六个方格组成,每个方格输入并显示第几位的密文字符。可是单张静态截图无法准确体现支付密码输入框的具体功能,因此我们再来看看使用该输入框的完整操作流程,相关动图如下所示。
Android开发笔记(一百四十六)仿支付宝的支付密码输入框_第2张图片

由这张动图可以发现,支付密码输入框至少需要完成以下功能:
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);
			}
		}
	}

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

	@Override
	public void beforeTextChanged(CharSequence s, int start, int count, int after) {
		Editable edit = mEditText.getText();
		Selection.setSelection(edit, edit.length());
	}

	@Override
	public void onTextChanged(CharSequence s, int start, int before, int count) {
	}

	@Override
	public 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开发笔记的完整目录

__________________________________________________________________________
本文现已同步发布到微信公众号“老欧说安卓”,打开微信扫一扫下面的二维码,或者直接搜索公众号“老欧说安卓”添加关注,更快更方便地阅读技术干货。
Android开发笔记(一百四十六)仿支付宝的支付密码输入框_第3张图片

你可能感兴趣的:(android开发,Android开发笔记)