浅谈 Android 支付密码输入框
x1d2m3
8年前
<p>有些应用都有支付密码功能，而支付密码的密码输入框确实一个很好玩的控件。虽然网上有很多例子，但是我们网络上有很多实现好的demo，但是抽时间自己设计一个未尝不可啊。看一下效果图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/05acb4692721d8e0c43375f21f092368.png"></p> <p style="text-align:center">输入密码中.png</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/12c0190edde916b3bf16feaca8a453c3.png"></p> <p style="text-align:center">密码输入结束.png</p> <p>我的思路：</p> <p>变成点的控件不是TextView和EditText而是Imageview。首先写一个RelativeLayout里边包含6个ImageView和一个EditText(EditText要覆盖ImageView)将EditText的背景设置成透明。</p> <pre> <code class="language-java"><?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"> <LinearLayout android: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> <EditText android:id="@+id/item_edittext" android:layout_width="match_parent" android:layout_height="50dp" android:background="@android:color/transparent"/> </RelativeLayout></code></pre> <p>自定义一个控件ItemPasswordLayout，用来给布局做一些处理，重点是将EditText的光标去掉，并监听输入文字的事件在文字变化后将文字放在一个StringBuffer中，并将edittext设置为"";再监听按下键盘删除键的事件，当按下删除键后会将StringBuffer中删除相应位置的字符。</p> <pre> <code class="language-java">/** * 密码输入框的控件布局 * 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); } }</code></pre> <p>接下来只需要在Activity调用就可以了。在xml中声明</p> <pre> <code class="language-java"><com.example.went_gone.demo.view.ItemPasswordLayout android:id="@+id/act_zhifubao_IPLayout" android:layout_width="match_parent" android:layout_height="wrap_content"> </com.example.went_gone.demo.view.ItemPasswordLayout></code></pre> <p>在Activity中调用</p> <pre> <code class="language-java">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(); } });</code></pre> <p>如此就可以了，是不是很简单。</p> <p> </p> <p>来自：http://www.jianshu.com/p/01a75d7827d9</p> <p> </p>