关于Android自定义View实现验证码输入框

在做校验验证的时候，经常需要手机接收短信，获取验证码，输入验证码，实现起来其实也不难，今天对输入框简单做了一个封装，通过自定义View来实现。

先看效果图：

采用组合自定义view来实现，引入布局文件，这种方式实现起来虽然简单，但是不够智能通用，需求变动的话就需要改代码，但是也不难改，代码很简单，下面是完整代码，请自行阅读。

public class VerificationCodeView extends RelativeLayout {
    private Context context;
    private OnCodeFinishListener onCodeFinishListener;
    private TextView tvCode1;
    private TextView tvCode2;
    private TextView tvCode3;
    private TextView tvCode4;
    private TextView tvCode5;
    private TextView tvCode6;
    private View v1;
    private View v2;
    private View v3;
    private View v4;
    private View v5;
    private View v6;
    private EditText etCode;
    private List<String> codes = new ArrayList<>();
    private InputMethodManager imm;
 
 
    public OnCodeFinishListener getOnCodeFinishListener() {
        return onCodeFinishListener;
    }
 
    public void setOnCodeFinishListener(OnCodeFinishListener onCodeFinishListener) {
        this.onCodeFinishListener = onCodeFinishListener;
    }
 
    public VerificationCodeView(Context context) {
        super(context);
        this.context = context;
        loadView();
    }
 
    public VerificationCodeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        loadView();
    }
 
    private void loadView() {
        imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
        View view = LayoutInflater.from(context).inflate(R.layout.verification_code, this);
        initView(view);
        initEvent();
    }
 
    ArrayList<View> views = new ArrayList<>();
    ArrayList<TextView> tvList = new ArrayList<>();
 
    private void initView(View view) {
        tvCode1 = view.findViewById(R.id.tv_code1);
        tvCode2 = view.findViewById(R.id.tv_code2);
        tvCode3 = view.findViewById(R.id.tv_code3);
        tvCode4 = view.findViewById(R.id.tv_code4);
        tvCode5 = view.findViewById(R.id.tv_code5);
        tvCode6 = view.findViewById(R.id.tv_code6);
        etCode = view.findViewById(R.id.et_code);
        etCode.requestFocus();
        etCode.setFocusable(true);
        v1 = view.findViewById(R.id.v1);
        v2 = view.findViewById(R.id.v2);
        v3 = view.findViewById(R.id.v3);
        v4 = view.findViewById(R.id.v4);
        v5 = view.findViewById(R.id.v5);
        v6 = view.findViewById(R.id.v6);
        views.add(v1);
        views.add(v2);
        views.add(v3);
        views.add(v4);
        views.add(v5);
        views.add(v6);
        tvList.add(tvCode1);
        tvList.add(tvCode2);
        tvList.add(tvCode3);
        tvList.add(tvCode4);
        tvList.add(tvCode5);
        tvList.add(tvCode6);
    }
 
    private void initEvent() {
        //验证码输入
        etCode.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 != null && editable.length() > 0) {
                    etCode.setText("");
                    if (codes.size() < 8) {
                        etCode.setCursorVisible(false);
                        codes.add(editable.toString());
                        showCode();
                    }
                    onCodeFinishListener.onTextChange(getPhoneCode());
                }
            }
        });
        // 监听验证码删除按键
        etCode.setOnKeyListener(new OnKeyListener() {
            @Override
            public boolean onKey(View view, int keyCode, KeyEvent keyEvent) {
                if (keyCode == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN && codes.size() > 0) {
                    codes.remove(codes.size() - 1);
                    showCode();
                    onCodeFinishListener.onTextDel();
                    return true;
                }
                return false;
            }
        });
    }
 
    /**
     * 显示输入的验证码
     */
    private void showCode() {
        String code1 = "";
        String code2 = "";
        String code3 = "";
        String code4 = "";
        String code5 = "";
        String code6 = "";
        if (codes.size() >= 1) {
            code1 = codes.get(0);
        }
        if (codes.size() >= 2) {
            code2 = codes.get(1);
        }
        if (codes.size() >= 3) {
            code3 = codes.get(2);
        }
        if (codes.size() >= 4) {
            code4 = codes.get(3);
        }
        if (codes.size() >= 5) {
            code5 = codes.get(4);
        }
        if (codes.size() >= 6) {
            code6 = codes.get(5);
        }
 
        tvCode1.setText(code1);
        tvCode2.setText(code2);
        tvCode3.setText(code3);
        tvCode4.setText(code4);
        tvCode5.setText(code5);
        tvCode6.setText(code6);
    }
 
    /**
     * 设置下划线高亮颜色
     */
    private void setColor(int defaultColor, int focusColor) {
        int color_default = context.getResources().getColor(defaultColor);
        int color_focus = context.getResources().getColor(focusColor);
        for (View v : views) {
            //默认颜色
            v.setBackgroundColor(color_default);
        }
        int length = getPhoneCode().length();
        for (int i = 0; i < length; i++) {
            views.get(i).setBackgroundColor(color_focus);
        }
    }
 
    /**
     * 显示键盘
     */
    public void showSoftInput() {
        //显示软键盘
        if (imm != null && etCode != null) {
            etCode.postDelayed(new Runnable() {
                @Override
                public void run() {
                    imm.showSoftInput(etCode, 0);
                }
            }, 200);
        }
    }
 
    /**
     * 获得手机号验证码
     *
     * @return 验证码
     */
    public String getPhoneCode() {
        StringBuilder sb = new StringBuilder();
        for (String code : codes) {
            sb.append(code);
        }
        return sb.toString();
    }
 
    public void errorText(int color) {
        for (View v : views) {
            v.setBackgroundColor(color);
        }
    }
 
    public void textBgColor(int color) {
        for (View v : views) {
            v.setBackgroundColor(color);
        }
    }
 
    public interface OnCodeFinishListener {
        /**
         * 文本改变
         */
        void onTextChange(String content);
 
        void onTextDel();
    }
 
 
    public void setEditTextCursorDrawable(EditText editText) {
        //修改光标的颜色（反射）
        try {
            @SuppressLint("SoonBlockedPrivateApi") Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
            f.setAccessible(true);
//            f.set(editText, R.drawable.et_otp_cursor);
        } catch (Exception ignored) {
        }
    }
}

在看看布局文件

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout
        android:id="@+id/ll_code"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="10dp">
            <TextView
                android:id="@+id/tv_code1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:textSize="24dp"
                android:textStyle="bold"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#4c000000" />
        </LinearLayout>
 
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="10dp"
            >
            <TextView
                android:id="@+id/tv_code2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:textSize="24dp"
                android:textStyle="bold"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v2"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#4c000000" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="10dp"
            >
            <TextView
                android:id="@+id/tv_code3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:textSize="24dp"
                android:textStyle="bold"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v3"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#4c000000" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="10dp">
            <TextView
                android:id="@+id/tv_code4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:textSize="24dp"
                android:textStyle="bold"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v4"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#4c000000" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="10dp">
            <TextView
                android:id="@+id/tv_code5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:textColor="@color/black"
                android:textSize="24dp"
                android:textStyle="bold"
                android:gravity="center"/>
            <View
                android:id="@+id/v5"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#4c000000" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginRight="10dp"
            >
            <TextView
                android:id="@+id/tv_code6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:textSize="24dp"
                android:textStyle="bold"
                android:background="@null"
                android:gravity="center"/>
            <View
                android:id="@+id/v6"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#4c000000" />
        </LinearLayout>
    </LinearLayout>
 
    <EditText
        android:id="@+id/et_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/ll_code"
        android:layout_alignBottom="@+id/ll_code"
        android:background="@android:color/transparent"
        android:textColor="@android:color/transparent"
        android:cursorVisible="false"
        android:layout_marginLeft="20dp"
        android:inputType="number"/>
</RelativeLayout>