自定义密码输入框和安全键盘
自定义密码输入框
- 前言:
前边我写过一个高仿微信密码支付框的文章,那篇也是一个仿照微信支付样式的,但是在编码上是通过布局堆出那个样式的,这次是自定义一个控件,可以灵活的定制背景,边框颜色,输入文字的颜色和大小以及可输入的位数。 - 分析:
首先来看一下密码框的样式
n等分这个布局。明确我们输入的时候是在每个小框中显示的,所以edittext肯定不行。结合我上一篇的布局堆出的密码支付框样式来看。这里应该是水平分布的线性布局,n等分的n个textview和n-1个分割线线性分布。 自定义viewgroup:
自定义viewgroup继承LinearLayout,我们说了,要自己定义样式,颜色等等,那么我们就需要一个让用户自定义这些属性的方法。如下:
// @param bgdrawable 背景drawable // @param pwdlength 密码长度 // @param splilinewidth 分割线宽度 // @param splilinecolor 分割线颜色 // @param pwdcolor 密码字体颜色 // @param pwdsize 密码字体大小 public void initStyle(int bgdrawable, int pwdlength, float splilinewidth, int splilinecolor, int pwdcolor, int pwdsize) { this.pwdlength = pwdlength; this.activity = (Activity) context; //根据自定义的属性来添加密码框 initShowInput(bgdrawable, pwdlength, splilinewidth, splilinecolor, pwdcolor, pwdsize); }
public void initShowInput(int bgcolor, int pwdlength, float slpilinewidth, int splilinecolor, int pwdcolor, int pwdsize) { this.setOrientation(HORIZONTAL); this.setBackgroundResource(bgcolor); //根据长度来初始化tv数组 textViews = new TextView[pwdlength]; LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT); params.weight = 1; params.gravity = Gravity.CENTER; //分割线的LayoutParams LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(dip2px(context, slpilinewidth), LayoutParams.MATCH_PARENT); for (int i = 0; i < textViews.length; i++) { final int index = i; TextView textView = new TextView(context); textView.setGravity(Gravity.CENTER); textViews[i] = textView; textViews[i].setTextSize(pwdsize); textViews[i].setTextColor(context.getResources().getColor(pwdcolor)); textViews[i].setInputType(InputType.TYPE_NUMBER_VARIATION_PASSWORD | InputType.TYPE_CLASS_NUMBER); this.addView(textView, params); //设置分割线的宽高,并将其add if (i < textViews.length - 1) { View view = new View(context); view.setBackgroundColor(context.getResources().getColor(splilinecolor)); this.addView(view, params2); } } }
以上代码通过我们需要的属性,定义出样式。注释比较详细,不难看懂。到这里,基本的样式出来了,我们可以在布局中使用了。但样式只是基础,后续的操作还有很多。
对外暴露的一些基本操作的方法:
a、输入的字符串的展示:* 根据输入字符,显示密码个数 * * @param s public void initDatas(String s) { if (s.length() > 0) { int length = s.length(); if(length<=pwdlength){ for (int i = 0; i < pwdlength; i++) { if (i < length) { for (int j = 0; j < length; j++) { char ch = s.charAt(j); textViews[j].setText(String.valueOf(ch)); } } else { textViews[i].setText(""); } } if(length == pwdlength){ onTextFinishListener.onFinish(s); } } } else { for (int i = 0; i < pwdlength; i++) { textViews[i].setText(""); } } }
b、是否显示明文的控制:* 是否显示明文 * * @param showPwd public void setShowPwd(boolean showPwd) { int length = textViews.length; for (int i = 0; i < length; i++) { if (showPwd) { textViews[i].setTransformationMethod(PasswordTransformationMethod.getInstance()); } else {