Android的支付密码输入框实现浅析

先看一下效果图

实现思路：

变成点的控件不是TextView和EditText而是Imageview。首先写一个RelativeLayout里边包含6个ImageView和一个EditText（EditText要覆盖ImageView）将EditText的背景设置成透明。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:orientation="horizontal"android:background="@android:color/white"><ImageView android:id="@+id/item_password_iv1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@mipmap/nopassword"/><ImageView android:id="@+id/item_password_iv2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@mipmap/nopassword"/><ImageView android:id="@+id/item_password_iv3" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@mipmap/nopassword"/><ImageView android:id="@+id/item_password_iv4" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@mipmap/nopassword"/><ImageView android:id="@+id/item_password_iv5" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@mipmap/nopassword"/><ImageView android:id="@+id/item_password_iv6" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@mipmap/nopassword"/> </LinearLayout> <EditTextandroid:id="@+id/item_edittext"android:layout_width="match_parent"android:layout_height="50dp"android:background="@android:color/transparent"/></RelativeLayout>

自定义一个控件ItemPasswordLayout，用来给布局做一些处理，重点是将EditText的光标去掉，并监听输入文字的事件在文字变化后将文字放在一个StringBuffer中，并将edittext设置为"";再监听按下键盘删除键的事件，当按下删除键后会将StringBuffer中删除相应位置的字符。

/** * 密码输入框的控件布局 * Created by Went_Gone on 2016/9/14. */public class ItemPasswordLayout extends RelativeLayout{ private EditText editText; private ImageView[] imageViews;//使用一个数组存储密码框 private StringBuffer stringBuffer = new StringBuffer（）;//存储密码字符 private int count = 6; private String strPassword;//密码字符串 public ItemPasswordLayout（Context context） {this（context,null）; } public ItemPasswordLayout（Context context, AttributeSet attrs） {this（context, attrs,0）; } public ItemPasswordLayout（Context context, AttributeSet attrs, int defStyleAttr） {super（context, attrs, defStyleAttr）;imageViews = new ImageView[6];View view = View.inflate（context, R.layout.item_password,this）;editText = （EditText） findViewById（R.id.item_edittext）;imageViews[0] = （ImageView） findViewById（R.id.item_password_iv1）;imageViews[1] = （ImageView） findViewById（R.id.item_password_iv2）;imageViews[2] = （ImageView） findViewById（R.id.item_password_iv3）;imageViews[3] = （ImageView） findViewById（R.id.item_password_iv4）;imageViews[4] = （ImageView） findViewById（R.id.item_password_iv5）;imageViews[5] = （ImageView） findViewById（R.id.item_password_iv6）;editText.setCursorVisible（false）;//将光标隐藏setListener（）; } private void setListener（） {editText.addTextChangedListener（new TextWatcher（） { @Override public void beforeTextChanged（CharSequence charSequence, int i, int i1, int i2） { } @Override public void onTextChanged（CharSequence charSequence, int i, int i1, int i2） { } @Override public void afterTextChanged（Editable editable） {//重点 如果字符不为""时才进行操作if （！editable.toString（）.equals（""）） { if （stringBuffer.length（）>5）{//当密码长度大于5位时edittext置空editText.setText（""）;return; }else {//将文字添加到StringBuffer中stringBuffer.append（editable）;editText.setText（""）;//添加后将EditText置空 造成没有文字输入的错局Log.e（"TAG", "afterTextChanged: stringBuffer is "+stringBuffer）;count = stringBuffer.length（）;//记录stringbuffer的长度strPassword = stringBuffer.toString（）;if （stringBuffer.length（）==6）{ //文字长度位6 则调用完成输入的监听 if （inputCompleteListener！=null）{inputCompleteListener.inputComplete（）; }} } for （int i =0;i<stringBuffer.length（）;i++）{imageViews[i].setImageResource（R.mipmap.ispassword）; }} }}）;editText.setOnKeyListener（new OnKeyListener（） { @Override public boolean onKey（View v, int keyCode, KeyEvent event） {if （keyCode == KeyEvent.KEYCODE_DEL&& event.getAction（） == KeyEvent.ACTION_DOWN） {// Log.e（"TAG", "afterTextChanged: stringBuffer is "+stringBuffer）; if （onKeyDelete（）） return true; return true;}return false; }}）; } public boolean onKeyDelete（） {if （count==0）{ count = 6; return true;}if （stringBuffer.length（）>0）{ //删除相应位置的字符 stringBuffer.delete（（count-1）,count）; count--; Log.e（"TAG", "afterTextChanged: stringBuffer is "+stringBuffer）; strPassword = stringBuffer.toString（）; imageViews[stringBuffer.length（）].setImageResource（R.mipmap.nopassword）;}return false; } @Override public boolean onKeyDown（int keyCode, KeyEvent event） {return super.onKeyDown（keyCode, event）; } private InputCompleteListener inputCompleteListener; public void setInputCompleteListener（InputCompleteListener inputCompleteListener） {this.inputCompleteListener = inputCompleteListener; } public interface InputCompleteListener{void inputComplete（）; } public EditText getEditText（） {return editText; } /*** 获取密码* @return*/ public String getStrPassword（） {return strPassword; } public void setContent（String content）{editText.setText（content）; }}

接下来只需要在Activity调用就可以了。
在xml中声明

 <com.example.went_gone.demo.view.ItemPasswordLayoutandroid:id="@+id/act_zhifubao_IPLayout"android:layout_width="match_parent"android:layout_height="wrap_content"> </com.example.went_gone.demo.view.ItemPasswordLayout>

在Activity中调用

 itemPasswordLayout = （ItemPasswordLayout） findViewById（R.id.act_zhifubao_IPLayout）;itemPasswordLayout.setInputCompleteListener（new ItemPasswordLayout.InputCompleteListener（） { @Override public void inputComplete（） {Toast.makeText（ZhifubaoActivity.this, "密码是："+itemPasswordLayout.getStrPassword（）, Toast.LENGTH_SHORT）.show（）; }}）;

总结
好了，本文的内容到这就结束了，如此就可以了，是不是很简单。希望这篇文章能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。