浅谈Android支付密码输入框

思路进行了调整 将ImageView换成了自定义的View。
项目地址：https://github.com/WentGone/ApplicationPassword

有些应用都有支付密码功能，而支付密码的密码输入框确实一个很好玩的控件。虽然网络上有很多实现好的demo，但是抽时间自己设计一个未尝不可啊。看一下效果图

输入密码中.png 密码输入结束.png

我的思路：
变成点的控件不是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">
    <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>

自定义一个控件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.ItemPasswordLayout
        android: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();
            }
        });

如此就可以了，是不是很简单。