思路進(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();
}
});
如此就可以了,是不是很簡單。