效果圖
驗證碼頁是四個方框，輸入驗證碼方框顔色改變，删除再變回原來顔色。
思路：
1.用一個透明的EditText與四個TextView重疊，并給TextView設定預設背景
2.監聽EditText文本變化，擷取輸入内容，給TextView指派并改變TextView背景
3. 4個TextView有值後添加輸入完成回調，監聽删除鍵添加删除回調
代碼：
private EditText editText;
private TextView[] TextViews;
private StringBuffer stringBuffer = new StringBuffer();
private int count = 4;
private String inputContent;
public SecurityCodeView(Context context) {
this(context, null);
}
public SecurityCodeView(Context context, AttributeSetattrs) {
this(context,attrs, 0);
}
public SecurityCodeView(Context context, AttributeSetattrs, int defStyleAttr) {
super(context,attrs, defStyleAttr);
TextViews = newTextView[4];
View.inflate(context, R.layout.view_security_code, this);
editText =(EditText) findViewById(R.id.item_edittext);
TextViews[0] =(TextView) findViewById(R.id.item_code_iv1);
TextViews[1] =(TextView) findViewById(R.id.item_code_iv2);
TextViews[2] =(TextView) findViewById(R.id.item_code_iv3);
TextViews[3] =(TextView) findViewById(R.id.item_code_iv4);
editText.setCursorVisible(false);//将光标隐藏
setListener();
}
private void setListener() {
editText.addTextChangedListener(new TextWatcher() {
@Override
public voidbeforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public voidonTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public voidafterTextChanged(Editable editable) {
//重點 如果字元不為""時才進行操作
if(!editable.toString().equals("")) {
if(stringBuffer.length() > 3) {
//當文本長度大于3位時edittext置空
editText.setText("");
return;
} else{
//将文字添加到StringBuffer中
stringBuffer.append(editable);
editText.setText("");//添加後将EditText置空
// Log.e("TAG","afterTextChanged: stringBuffer is " + stringBuffer);
count = stringBuffer.length();//記錄stringbuffer的長度
inputContent = stringBuffer.toString();
if (stringBuffer.length() == 4) {
//文字長度位4 則調用完成輸入的監聽
if (inputCompleteListener != null) {
inputCompleteListener.inputComplete();
}
}
}
for(int i = 0; i < stringBuffer.length(); i++) {
TextViews[i].setText(String.valueOf(inputContent.charAt(i)));
TextViews[i].setBackgroundResource(R.mipmap.bg_verify_press);
}
}
}
});
editText.setOnKeyListener(new OnKeyListener() {
@Override
public booleanonKey(View v, int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_DEL
&& event.getAction() == KeyEvent.ACTION_DOWN) {
if(onKeyDelete()) return true;
returntrue;
}
return false;
}
});
}
public boolean onKeyDelete() {
if (count == 0){
count = 4;
return true;
}
if(stringBuffer.length() > 0) {
//删除相應位置的字元
stringBuffer.delete((count - 1), count);
count--;
// Log.e(TAG, "afterTextChanged:stringBuffer is " + stringBuffer);
inputContent = stringBuffer.toString();
TextViews[stringBuffer.length()].setText("");
TextViews[stringBuffer.length()].setBackgroundResource(R.mipmap.bg_verify);
if(inputCompleteListener != null)
inputCompleteListener.deleteContent(true);//有删除就通知manger
}
return false;
}
public void clearEditText() {
stringBuffer.delete(0, stringBuffer.length());
inputContent =stringBuffer.toString();
for (int i = 0;i < TextViews.length; i++) {
TextViews[i].setText("");
TextViews[i].setBackgroundResource(R.mipmap.bg_verify);
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
return super.onKeyDown(keyCode,event);
}
private InputCompleteListener inputCompleteListener;
public void setInputCompleteListener(InputCompleteListenerinputCompleteListener) {
this.inputCompleteListener= inputCompleteListener;
}
public interface InputCompleteListener {
void inputComplete();
void deleteContent(booleanisDelete);
}
public String getEditContent() {
returninputContent;
}
布局
<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="47dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="@+id/item_code_iv1"
style="@style/text_editStyle"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:id="@+id/item_code_iv2"
style="@style/text_editStyle"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:id="@+id/item_code_iv3"
style="@style/text_editStyle"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:id="@+id/item_code_iv4"
style="@style/text_editStyle"/>
</LinearLayout>
<EditText
android:id="@+id/item_edittext"
android:layout_width="match_parent"
android:layout_height="46dp"
android:background="@android:color/transparent"
android:inputType="number"/>
</RelativeLayout>
使用：
<com.xiaviv.securitycodedemo.SecurityCodeView
android:id="@+id/scv_edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp" />
<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_weight="4"
android:text="輸入驗證碼表示同意《使用者協定》" />
public class MainActivityextends AppCompatActivity implements SecurityCodeView.InputCompleteListener {
privateSecurityCodeView editText;
privateTextView text;
@Override
protected void onCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViews();
setListener();
}
private void setListener(){
editText.setInputCompleteListener(this);
}
private void findViews(){
editText =(SecurityCodeView) findViewById(R.id.scv_edittext);
text =(TextView) findViewById(R.id.tv_text);
}
@Override
public void inputComplete(){
Toast.makeText(getApplicationContext(), "驗證碼是：" + editText.getEditContent(), Toast.LENGTH_LONG).show();
if(!editText.getEditContent().equals("1234")) {
text.setText("驗證碼輸入錯誤");
text.setTextColor(Color.RED);
}
}
@Override
public void deleteContent(booleanisDelete) {
if(isDelete){
text.setText("輸入驗證碼表示同意《使用者協定》");
text.setTextColor(Color.BLACK);
}
}
}
Demo位址：https://github.com/xiaviv/SecurityCodeDemo