EditText方框验证码

项目中有这样一个需求:

  验证码页是四个方框,输入验证码方框颜色改变,删除再变回原来颜色。

先看下效果,动图不太清晰,将就看吧

CF4BB2A548FE859F5C48B3B654888915.jpg

效果.gif

思路:

 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, AttributeSet attrs) {
    this(context, attrs, 0);
}

public SecurityCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TextViews = new TextView[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 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() > 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  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(InputCompleteListener inputCompleteListener) {
    this.inputCompleteListener = inputCompleteListener;
}

public interface InputCompleteListener {
    void inputComplete();

    void deleteContent(boolean isDelete);
}

/**
 * 获取输入文本
 *
 * @return
 */
public String getEditContent() {
    return inputContent;
}

布局

  
  




    

    

    

    

    

    

    






使用:

    




   public class MainActivity extends AppCompatActivity implements SecurityCodeView.InputCompleteListener {

    private SecurityCodeView editText;
    private TextView text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    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(boolean isDelete) {
        if (isDelete){
        text.setText("输入验证码表示同意《用户协议》");
        text.setTextColor(Color.BLACK);
      }
  }
}

Demo地址:https://github.com/xiaviv/SecurityCodeDemo

IT文库 » EditText方框验证码
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址