在專案中可能會有許多需要輸入手機號碼、銀行卡號或者身份證號等內容的輸入框。如果直接輸入的話將會是一堆號碼堆在一起，第一是不太美觀，第二也容易出錯，使用者體驗不太好。但是若將輸入的號碼按特定格式進行分割將會大大提高使用者體驗！

以下是對常用的號碼進行簡單封裝的自定義輸入框控制元件，方便我們在開發過程中使用：

1. 該控制元件支援xml屬性指定，也支援程式碼指定；
2. 該控制元件支援型別分別為電話號碼(000 0000 0000)、銀行卡號(0000 0000 0000 0000 000)和身份證號(000000 0000 0000 0000)。

效果圖

自定義EditText

/**
 * @Description 分割輸入框
 * @Author 一花一世界
 */
public
 
 class ContentWithSpaceEditText extends EditText {

    public static final int TYPE_PHONE = 0;
    public static final int TYPE_CARD = 1;
    public static final int TYPE_IDCARD = 2;
    private int maxLength = 100;
    private int contentType;
    private int start, count, before;
    private String digits;

    public
 
 ContentWithSpaceEditText(Context context) {
        this(context, null);
    }

    public ContentWithSpaceEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        parseAttributeSet(context, attrs);
    }

    public ContentWithSpaceEditText(Context context, AttributeSet attrs, int
 
 defStyleAttr) {
        super(context, attrs, defStyleAttr);
        parseAttributeSet(context, attrs);
    }

    private void parseAttributeSet(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ContentWithSpaceEditText, 0, 0);
        contentType = ta.getInt(R.styleable.ContentWithSpaceEditText_type, 0);
        ta.recycle();
        initType();
        setSingleLine();
        addTextChangedListener(watcher);
    }

    private void initType() {
        if (contentType == TYPE_PHONE) {
            maxLength = 13;
            digits = "0123456789 ";
            setInputType(InputType.TYPE_CLASS_NUMBER);
        } else if (contentType == TYPE_CARD) {
            maxLength = 23;
            digits = "0123456789 ";
            setInputType(InputType.TYPE_CLASS_NUMBER);
        } else if (contentType == TYPE_IDCARD) {
            maxLength = 21;
            digits = "0123456789xX ";
            setInputType(InputType.TYPE_CLASS_TEXT);
        }
        setFilters(new InputFilter[]{new InputFilter.LengthFilter(maxLength)});
    }

    @Override
    public void setInputType(int type) {
        super.setInputType(type);
        // setKeyListener要在setInputType後面呼叫，否則無效
        if (!TextUtils.isEmpty(digits)) {
            setKeyListener(DigitsKeyListener.getInstance(digits));
        }
    }

    private TextWatcher watcher = new TextWatcher() {

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

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            ContentWithSpaceEditText.this.start = start;
            ContentWithSpaceEditText.this.before = before;
            ContentWithSpaceEditText.this.count = count;
        }

        @Override
        public void afterTextChanged(Editable s) {
            if (s == null) {
                return;
            }
            //判斷是否是在中間輸入，需要重新計算
            boolean isMiddle = (start + count) < (s.length());
            //在末尾輸入時，是否需要加入空格
            boolean isNeedSpace = false;
            if (!isMiddle && isSpace(s.length())) {
                isNeedSpace = true;
            }
            if (isMiddle || isNeedSpace || count > 1) {
                String newStr = s.toString();
                newStr = newStr.replace(" ", "");
                StringBuilder sb = new StringBuilder();
                int spaceCount = 0;
                for (int i = 0; i < newStr.length(); i++) {
                    sb.append(newStr.substring(i, i + 1));
                    //如果當前輸入的字元下一位為空格(i+1+1+spaceCount)，因為i是從0開始計算的，所以一開始的時候需要先加1
                    if (isSpace(i + 2 + spaceCount)) {
                        sb.append(" ");
                        spaceCount += 1;
                    }
                }
                removeTextChangedListener(watcher);
                s.replace(0, s.length(), sb);
                //如果是在末尾的話,或者加入的字元個數大於零的話（輸入或者貼上）
                if (!isMiddle || count > 1) {
                    setSelection(s.length() <= maxLength ? s.length() : maxLength);
                } else if (isMiddle) {
                    //如果是刪除
                    if (count == 0) {
                        //如果刪除時，游標停留在空格的前面，游標則要往前移一位
                        if (isSpace(start - before + 1)) {
                            setSelection((start - before) > 0 ? start - before : 0);
                        } else {
                            setSelection((start - before + 1) > s.length() ? s.length() : (start - before + 1));
                        }
                    }
                    //如果是增加
                    else {
                        if (isSpace(start - before + count)) {
                            setSelection((start + count - before + 1) < s.length() ? (start + count - before + 1) : s.length());
                        } else {
                            setSelection(start + count - before);
                        }
                    }
                }
                addTextChangedListener(watcher);
            }
        }
    };

    private boolean isSpace(int length) {
        if (contentType == TYPE_PHONE) {
            return isSpacePhone(length);
        } else if (contentType == TYPE_CARD) {
            return isSpaceCard(length);
        } else if (contentType == TYPE_IDCARD) {
            return isSpaceIDCard(length);
        }
        return false;
    }

    private boolean isSpacePhone(int length) {
        return length >= 4 && (length == 4 || (length + 1) % 5 == 0);
    }

    private boolean isSpaceCard(int length) {
        return length % 5 == 0;
    }

    private boolean isSpaceIDCard(int length) {
        return length > 6 && (length == 7 || (length - 2) % 5 == 0);
    }

    public void setContentType(int contentType) {
        this.contentType = contentType;
        initType();
    }

    public String getTextWithoutSpace() {
        return super.getText().toString().replace(" ", "");
    }

    /**
     * @Description 內容校驗
     */
    public boolean isContentCheck() {
        String text = getTextWithoutSpace();
        if (contentType == TYPE_PHONE) {
            if (TextUtils.isEmpty(text)) {
                ToastUtil.showText(UIUtils.getString(R.string.phone_number_not_empty));
            } else if (text.length() < 11) {
                ToastUtil.showText(UIUtils.getString(R.string.phone_number_incorrect_length));
            } else {
                return true;
            }
        } else if (contentType == TYPE_CARD) {
            if (TextUtils.isEmpty(text)) {
                ToastUtil.showText(UIUtils.getString(R.string.bank_card_not_empty));
            } else if (text.length() < 16) {
                ToastUtil.showText(UIUtils.getString(R.string.bank_card_incorrect_length));
            } else {
                return true;
            }
        } else if (contentType == TYPE_IDCARD) {
            if (TextUtils.isEmpty(text)) {
                ToastUtil.showText(UIUtils.getString(R.string.identity_number_not_empty));
            } else if (text.length() < 18) {
                ToastUtil.showText(UIUtils.getString(R.string.identity_number_incorrect_length));
            } else {
                return true;
            }
        }
        return false;
    }
}

配置attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ContentWithSpaceEditText">
        <attr name="type" format="enum">
            <enum name="phone" value="0" />
            <enum name="card" value="1" />
            <enum name="IDCard" value="2" />
        </attr>
    </declare-styleable>
</resources>

佈局檔案中使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/theme_bg"
    android:orientation="vertical">

    <com.wiggins.splitinput.widget.TitleView
        android:id="@+id/titleView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_normal"
        android:layout_margin="@dimen/margin_normal"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:layout_width="@dimen/btn_width_normal"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:text="@string/phone_number"
            android:textColor="@color/blue"
            android:textSize="@dimen/font_normal" />

        <com.wiggins.splitinput.widget.ContentWithSpaceEditText
            android:id="@+id/edt_phone_input"
            android:layout_width="match_parent"
            android:layout_height="@dimen/item_normal"
            android:background="@color/white"
            android:gravity="center"
            android:hint="@string/please_enter_content"
            android:inputType="number"
            android:textColor="@color/blue"
            android:textColorHint="@color/gray"
            android:textCursorDrawable="@null"
            android:textSize="@dimen/font_normal"
            app:type="phone" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_normal"
        android:layout_margin="@dimen/margin_normal"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:layout_width="@dimen/btn_width_normal"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:text="@string/bank_card_number"
            android:textColor="@color/blue"
            android:textSize="@dimen/font_normal" />

        <com.wiggins.splitinput.widget.ContentWithSpaceEditText
            android:id="@+id/edt_bank_card_input"
            android:layout_width="match_parent"
            android:layout_height="@dimen/item_normal"
            android:background="@color/white"
            android:gravity="center"
            android:hint="@string/please_enter_content"
            android:inputType="number"
            android:textColor="@color/blue"
            android:textColorHint="@color/gray"
            android:textCursorDrawable="@null"
            android:textSize="@dimen/font_normal"
            app:type="card" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_normal"
        android:layout_margin="@dimen/margin_normal"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:layout_width="@dimen/btn_width_normal"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:text="@string/identity_number"
            android:textColor="@color/blue"
            android:textSize="@dimen/font_normal" />

        <com.wiggins.splitinput.widget.ContentWithSpaceEditText
            android:id="@+id/edt_identity_input"
            android:layout_width="match_parent"
            android:layout_height="@dimen/item_normal"
            android:background="@color/white"
            android:gravity="center"
            android:hint="@string/please_enter_content"
            android:inputType="number"
            android:textColor="@color/blue"
            android:textColorHint="@color/gray"
            android:textCursorDrawable="@null"
            android:textSize="@dimen/font_normal"
            app:type="IDCard" />
    </LinearLayout>
</LinearLayout>

專案地址 ☞ 傳送門