前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android开发笔记(一百四十六)仿支付宝的支付密码输入框

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

作者头像
aqi00
发布2019-01-18 15:12:08
1.8K0
发布2019-01-18 15:12:08
举报
文章被收录于专栏:老欧说安卓老欧说安卓

编辑框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,该类的关键代码如下所示:

代码语言:javascript
复制
    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方法,对所有触摸事件予以拦截,不让触摸事件传递给下级视图,代码如下所示:

代码语言:javascript
复制
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		return true;
	}

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

代码语言:javascript
复制
	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;
	}

如此改进之后,本文开头的支付密码输入框也就具备了应有的输入和显示功能。 下面是支付密码输入框控件的完整代码:

代码语言:javascript
复制
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);
	}

}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年06月05日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档