淺談Android支付密碼輸入框

思路進(jìn)行了調(diào)整 將ImageView換成了自定義的View。
項(xiàng)目地址:https://github.com/WentGone/ApplicationPassword

有些應(yīng)用都有支付密碼功能,而支付密碼的密碼輸入框確實(shí)一個很好玩的控件。雖然網(wǎng)絡(luò)上有很多實(shí)現(xiàn)好的demo,但是抽時間自己設(shè)計一個未嘗不可啊??匆幌滦Ч麍D

輸入密碼中.png
密碼輸入結(jié)束.png

我的思路:
變成點(diǎn)的控件不是TextView和EditText而是Imageview。首先寫一個RelativeLayout里邊包含6個ImageView和一個EditText(EditText要覆蓋ImageView)將EditText的背景設(shè)置成透明。

<?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,用來給布局做一些處理,重點(diǎn)是將EditText的光標(biāo)去掉,并監(jiān)聽輸入文字的事件在文字變化后將文字放在一個StringBuffer中,并將edittext設(shè)置為"";再監(jiān)聽按下鍵盤刪除鍵的事件,當(dāng)按下刪除鍵后會將StringBuffer中刪除相應(yīng)位置的字符。


/**
 * 密碼輸入框的控件布局
 * Created by Went_Gone on 2016/9/14.
 */
public class ItemPasswordLayout extends RelativeLayout{
    private EditText editText;
    private ImageView[] imageViews;//使用一個數(shù)組存儲密碼框
    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);//將光標(biāo)隱藏
        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) {
                //重點(diǎn)   如果字符不為""時才進(jìn)行操作
                if (!editable.toString().equals("")) {
                    if (stringBuffer.length()>5){
                        //當(dāng)密碼長度大于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   則調(diào)用完成輸入的監(jiān)聽
                            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){
            //刪除相應(yīng)位置的字符
            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調(diào)用就可以了。在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中調(diào)用

  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();
            }
        });

如此就可以了,是不是很簡單。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容