经常使用支付宝的朋友应该注意到了支付密码的输入框是六个矩形排列,今天闲来无事,就根据我的思路模仿写了一个。
我的思路是,我并不关心你输入的是什么,只要获取到就行了,不需要把写的元素展示出来,那么我只要做到监听你的输入和删除操作就可以了,你每输入一个字符,我就设置一个图片显示出来,类似于输入密码拿着黑点,当你删除的时候,我也跟着隐藏一个图片,这样就做到了想要的效果。我们来看代码吧。
首先写一个布局,描绘出一个大边框,再加五个小边框 ,里面均匀排列六个小图,每输入一个字符就展示一个。
xml文件是酱紫的:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/bordershape"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="@+id/iv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/history_pic_hot"
android:visibility="invisible" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#000" />
</RelativeLayout>
<com.kurt.edittextdemo.NoPasteEdit
android:id="@+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
android:inputType="number"
android:longClickable="false" />
<!-- android:digits="0123456789" -->
linearlayout中一共六个相对布局,样式一样,shape文件就是一个1px的黑色边框 初始化先把imageview隐藏起来
</LinearLayout>
然后定义一个类继承linearlayout,通过填充器把刚才的布局填充进去,然后对他们进行设置:
通过addTextChangedListener 设置输入时候的操作
通过setOnKeyListener设置删除字符时候的操作
private void addtext() {
String str = buffer.toString();
int len = str.length();
if (len <= 6) {
images[len - 1].setVisibility(View.VISIBLE);
}
if (len == 6) {
if (listener != null) {
listener.keyword(str); /*这里设置回调,当文字达到6的时候执行*/
}}}
private void removeText() {
String str = buffer.toString();
int len = str.length();
if (len == 0) {
return;
}
if (len <= 6) {
buffer.delete(len - 1, len);
images[len - 1].setVisibility(View.INVISIBLE);
}}
public void setKurtListener(KurtListener listener) {/*本方法提供给外部设置监听使用*/
this.listener = listener;
}
ok,到此为止,我们的工程就完成一半了。
剩下一半是因为那个背景为null的edittext点击的时候还会弹出复制粘贴的窗口,这样我们的伪装就露馅了,好,屏蔽掉它,重写edittext,就是上文布局文件中的NoPasteEdit
这样 可以说是大功告成了,具体细节请看源码:
你一定能看懂~http://download.youkuaiyun.com/detail/u010532761/9384328