实现4个数字一组分隔显示的数字输入框

前言

很悲剧，对于输入框而言，有时我们不得不实现几个数字后就出现一个空格的情况，这是为了方便用户观察。那么今天就讲讲这中输入框CrEditText的实现吧。

今天涉及内容：

1. 原理分析
2. CrEditText代码
3. CrEditText布局及使用
4. 效果图

一.原理分析

鉴于要实现四字分隔的情况，那么就需要监听 editText 的输入过程，即需要实现 TextWatcher 接口，然后在监听输入过程中去改变需要显示的内容。

二.下面贴出CrEditText代码

CrEditText继承于 EditText，实现 TextWatcher 接口

package com.android.testdemo.main;

import android.annotation.SuppressLint;
import android.content.Context;
import android.text.Editable;
import android.text.InputFilter;
import android.text.InputType;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.widget.EditText;

import com.android.testdemo.base.StringUtil;

import java.lang.reflect.Field;

/**
 * Title:实现四个数字一组分隔的输入框
 * Description:
 * <p>
 * Created by pei
 * Date: 2018/7/24
 */
@SuppressLint("AppCompatCustomView")
public class CrEditText extends EditText{

    public CrEditText(Context context) {
        super(context);
        setEditText();
    }

    public CrEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        setEditText();
    }

    public CrEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setEditText();
    }

    public CrEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        setEditText();
    }

    private void setEditText(){
        setInputType(InputType.TYPE_CLASS_NUMBER);
        addTextChangedListener(new CardWatcher(CrEditText.this));
    }

    /**获取未经分隔的内容**/
    public String getDifferString(){
        String str=CrEditText.this.getText().toString();
        if(StringUtil.isNotEmpty(str)){
            String temp=str.replaceAll(" ", "");
            if(StringUtil.isNotEmpty(temp)){
                return temp;
            }
        }
        return "";
    }

    class CardWatcher implements TextWatcher {

        private EditText mEditText;

        private String mNewText;

        public CardWatcher(EditText EditText) {
            mEditText = EditText;
        }

        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            String newText = "";
            String temp = charSequence.toString();
            temp = temp.replace(" ", "");
            //每4位增加一个空格
            for (int j = 0; j < temp.length(); j++) {
                newText = newText + temp.subSequence(j, j + 1);
                if ((j + 1) % 4 == 0 && newText.length() < getMaxLength(mEditText)) {
                    newText = newText + " ";
                }
            }

            if (mNewText == null || !newText.equals(mNewText)) {
                mNewText = newText;
                mEditText.setText(newText);
                mEditText.setSelection(newText.length());
            }
        }

        @Override
        public void afterTextChanged(Editable editable) {

        }
    }

    /**
     * 得到EditText最大长度
     *
     * @param view EditText
     * @return 最大长度
     */
    private int getMaxLength(EditText view) {
        int length = 0;
        try {
            InputFilter[] inputFilters = view.getFilters();
            for (InputFilter filter : inputFilters) {
                Class<?> c = filter.getClass();
                if (c.getName().equals("android.text.InputFilter$LengthFilter")) {
                    Field[] f = c.getDeclaredFields();
                    for (Field field : f) {
                        if (field.getName().equals("mMax")) {
                            field.setAccessible(true);
                            length = (Integer) field.get(filter);
                        }
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return length;
    }

}

三.CrEditText布局及使用

在activity的xml中的布局，你可以这样写：

    <com.android.testdemo.main.CrEditText
        android:id="@+id/edt_ein"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="14sp"
        android:gravity="center_vertical|right"
        android:background="@null"
        android:textColorHint="#ff0000"
        android:maxLength="19"
        android:textColor="#000000"
        android:hint="请填写纳税人识别号"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

其中最为重要的是，你一定要设置 “android:maxLength="19"”属性，不然会没有效果。
由于CrEditText是4数一组，那么直接 getText().toString() 是获取不到你输入的内容的，要想获得你输入的内容，你可以这样：

String kk1=editText.getDifferString();

四.效果图

1.gif

ok,今天的内容就讲到这里啦。