Android自定义View实现滴滴验证码输入框效果

1.VerficationCodeInput.Java

/** * 輸入验证码的自定义view * */public class VerificationCodeInput extends LinearLayout  implements TextWatcher, View.OnKeyListener{    private final static String TYPE_NUMBER = "number";    private final static String TYPE_TEXT = "text";    private final static String TYPE_PASSWORD = "password";    private final static String TYPE_PHONE = "phone";    private static final String TAG = "VerificationCodeInput";    private int box = 4;    private int boxWidth = 60;    private int boxHeight = 60;    private int childHPadding = 14;    private int childVPadding = 14;    private String inputType = TYPE_PASSWORD;    private Drawable boxBgFocus = null;    private Drawable boxBgNormal = null;    private Listener listener;    private boolean focus = false;    private List<EditText> mEditTextList = new ArrayList<>();    private int currentPosition = 0;    public VerificationCodeInput(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.vericationCodeInput);        box = a.getInt(R.styleable.vericationCodeInput_box, 4);        childHPadding = (int) a.getDimension(R.styleable.vericationCodeInput_child_h_padding, 0);        childVPadding = (int) a.getDimension(R.styleable.vericationCodeInput_child_v_padding, 0);        boxBgFocus =  a.getDrawable(R.styleable.vericationCodeInput_box_bg_focus);        boxBgNormal = a.getDrawable(R.styleable.vericationCodeInput_box_bg_normal);        inputType = a.getString(R.styleable.vericationCodeInput_inputType);        boxWidth = (int) a.getDimension(R.styleable.vericationCodeInput_child_width, boxWidth);        boxHeight = (int) a.getDimension(R.styleable.vericationCodeInput_child_height, boxHeight);        initViews();    }    @Override    protected void onAttachedToWindow() {        super.onAttachedToWindow();    }    @Override    protected void onDetachedFromWindow() {        super.onDetachedFromWindow();    }    private void initViews() {        for (int i = 0; i < box; i++) {
            EditText editText = new EditText(getContext());            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(boxWidth, boxHeight);            layoutParams.bottomMargin = childVPadding;            layoutParams.topMargin = childVPadding;            layoutParams.leftMargin = childHPadding;            layoutParams.rightMargin = childHPadding;            layoutParams.gravity = Gravity.CENTER;            editText.setOnKeyListener(this);            if(i == 0)
            setBg(editText, true);            else setBg(editText, false);            editText.setTextColor(Color.BLACK);            editText.setLayoutParams(layoutParams);            editText.setGravity(Gravity.CENTER);            editText.setInputType(EditorInfo.TYPE_CLASS_PHONE);            editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(1)});//            if (TYPE_NUMBER.equals(inputType)) {//                editText.setInputType(InputType.TYPE_CLASS_NUMBER);//            } else if (TYPE_PASSWORD.equals(inputType)){//                editText.setTransformationMethod(PasswordTransformationMethod.getInstance());//            } else if (TYPE_TEXT.equals(inputType)){//                editText.setInputType(InputType.TYPE_CLASS_TEXT);//            } else if (TYPE_PHONE.equals(inputType)){//                editText.setInputType(InputType.TYPE_CLASS_PHONE);////            }            editText.setId(i);            editText.setEms(1);            editText.addTextChangedListener(this);            addView(editText,i);            mEditTextList.add(editText);        }


    }    private void backFocus() {        int count = getChildCount();        EditText editText ;        for (int i = count-1; i>= 0; i--) {
            editText = (EditText) getChildAt(i);            if (editText.getText().length() == 1) {
                editText.requestFocus();                setBg(mEditTextList.get(i),true);                //setBg(mEditTextList.get(i-1),true);                editText.setSelection(1);                return;            }
        }
    }    private void focus() {        int count = getChildCount();        EditText editText ;        for (int i = 0; i< count; i++) {
            editText = (EditText) getChildAt(i);            if (editText.getText().length() < 1) {
                editText.requestFocus();                return;            }
        }
    }    private void setBg(EditText editText, boolean focus) {        if (boxBgNormal != null && !focus) {
            editText.setBackground(boxBgNormal);        } else if (boxBgFocus != null && focus) {
            editText.setBackground(boxBgFocus);        }
    }    private void setBg(){        int count = getChildCount();        EditText editText ;        for(int i = 0; i< count; i++){
            editText = (EditText) getChildAt(i);            if (boxBgNormal != null && !focus) {
                editText.setBackground(boxBgNormal);            } else if (boxBgFocus != null && focus) {
                editText.setBackground(boxBgFocus);            }
        }

    }    private void checkAndCommit() {
        StringBuilder stringBuilder = new StringBuilder();        boolean full = true;        for (int i = 0 ;i < box; i++){
            EditText editText = (EditText) getChildAt(i);            String content = editText.getText().toString();            if ( content.length() == 0) {
                full = false;                break;            } else {
                stringBuilder.append(content);            }

        }
        Log.d(TAG, "checkAndCommit:" + stringBuilder.toString());        if (full){            if (listener != null) {                listener.onComplete(stringBuilder.toString());                setEnabled(false);            }

        }
    }    @Override    public void setEnabled(boolean enabled) {        int childCount = getChildCount();        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);            child.setEnabled(enabled);        }
    }    public void setOnCompleteListener(Listener listener){        this.listener = listener;    }    @Override    public LayoutParams generateLayoutParams(AttributeSet attrs) {        return new LinearLayout.LayoutParams(getContext(), attrs);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        Log.d(getClass().getName(), "onMeasure");        int count = getChildCount();        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);            this.measureChild(child, widthMeasureSpec, heightMeasureSpec);        }        if (count > 0) {
            View child = getChildAt(0);            int cHeight = child.getMeasuredHeight();            int cWidth = child.getMeasuredWidth();            int maxH = cHeight + 2 * childVPadding;            int maxW = (cWidth + childHPadding) * box + childHPadding;            setMeasuredDimension(resolveSize(maxW, widthMeasureSpec),                    resolveSize(maxH, heightMeasureSpec));        }

    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.d(getClass().getName(), "onLayout");        int childCount = getChildCount();        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);            child.setVisibility(View.VISIBLE);            int cWidth = child.getMeasuredWidth();            int cHeight = child.getMeasuredHeight();            int cl =  (i) * (cWidth + childHPadding);            int cr = cl + cWidth;            int ct = childVPadding;            int cb = ct + cHeight;            child.layout(cl, ct, cr, cb);        }


    }    @Override    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }    @Override    public void onTextChanged(CharSequence s, int start, int before, int count) {        if (start == 0 && count >= 1 && currentPosition != mEditTextList.size() - 1) {            currentPosition++;            mEditTextList.get(currentPosition).requestFocus();            setBg(mEditTextList.get(currentPosition),true);            setBg(mEditTextList.get(currentPosition-1),false);        }

    }    @Override    public void afterTextChanged(Editable s) {        if (s.length() == 0) {
        } else {
            focus();            checkAndCommit();        }
    }    @Override    public boolean onKey(View view, int keyCode, KeyEvent event) {
        EditText editText = (EditText) view;        if (keyCode == KeyEvent.KEYCODE_DEL && editText.getText().length() == 0) {            int action = event.getAction();            if (currentPosition != 0 && action == KeyEvent.ACTION_DOWN) {                currentPosition--;                mEditTextList.get(currentPosition).requestFocus();                setBg(mEditTextList.get(currentPosition),true);                setBg(mEditTextList.get(currentPosition+1),false);                mEditTextList.get(currentPosition).setText("");            }
        }        return false;    }    public interface Listener {       void onComplete(String content);    }

}

2.attrs.XML

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="vericationCodeInput">        <attr name="box" format="integer" />        <attr name="child_h_padding" format="dimension"/>        <attr name="child_v_padding" format="dimension"/>        <attr name="child_width" format="dimension"/>        <attr name="child_height" format="dimension"/>        <attr name="padding" format="dimension"/>        <attr name="box_bg_focus" format="reference"/>        <attr name="box_bg_normal" format="reference"/>        <attr name="inputType" format="string"/>    </declare-styleable></resources>

3.输入框输入文字和没输入文字不同的状态

verification_edit_bg_focus.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#FFFFFF" />    <corners android:radius="2dip" />    <stroke        android:width="3dip"        android:color="#ffee33" /></shape>

verification_edit_bg_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#FaFafa" />    <corners android:radius="2dip" />    <stroke        android:width="1dip"        android:color="#BDC7D8" /></shape>

4.在Activity中使用

public class YanZhenMaActivity extends Activity {    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.yanzhen_activity);    }
}

布局文件

<TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="输入验证码："    android:padding="12dp"    /><com.nuoyuan.njs.VerificationCodeInput    android:digits="1234567890."    android:id="@+id/verificationCodeInput"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    ver:box="6"    ver:box_bg_normal="@drawable/verification_edit_bg_normal"    ver:box_bg_focus="@drawable/verification_edit_bg_focus"    ver:child_h_padding="5dp"    android:layout_centerInParent="true"    android:layout_marginBottom="16dp"    />

好了，到这里，自定义验证码输入框完成。。。。。。。。。。。。。。。。。。。。。。

原文链接：http://www.apkbus.com/blog-896840-68103.html