Android中的EditText输入银行卡号四位空一格

近期项目开发有需要用户输入银行卡号，为了便于用户区分自己是否输入的正确，提升用户体验，特做了银行卡号四位一空格的操作。同时考虑到粘贴复制过来的银行卡号也要做四位一空格的处理，所以自定义了一个监听事件，用来处理空格。

具体的操作如下：

/**
 * 银行卡4位插入一空格监听
 * Created by zeng on 2018/9/25.
 */

public class NumSpaceTextWatcher implements TextWatcher {
  private static final int DEFAULT_OFFSET = 4;
  // 目标输入框
  private final EditText mDesTxt;
  // 偏移量(几位插入一空格)
  private int mOffset;
  // 记录目标字符串
  private StringBuffer mBuffer = new StringBuffer();
  // 改变之前的文本长度
  private int mBeforeTextLength;
  // 改变之后的文本长度
  private int mOnTextLength;
  // 改变之前去除空格的文本长度
  private int mBeforeNumTxtLength;
  // 改变之后去除空格的文本长度
  private int mNumTxtLength;
  // 目标 光标的位置
  private int mLocation = 0;
  // 之前 光标的位置(可判断用户是否做删除操作)
  private int mBeforeLocation = 0;
  // 改变前有多少空格
  private int mBeforeSpaceNumber = 0;
  // 是否选中空格覆盖
  private boolean isOverrideSpace;
  // 被覆盖的空格数
  private int mOverrideSpaceNum;
  // 是否是粘贴(此粘贴非彼粘贴)
  private boolean isPaste;
  // 复制的字符数(不包括空格)
  private int mPasteNum;
  // 是否需要进行格式化字符串操作
  private boolean isChanged = false;
  //要处理的View
  private LinearLayout disposeView;

  public NumSpaceTextWatcher(@NonNull EditText target) {
    this(target, DEFAULT_OFFSET);
  }

  public NumSpaceTextWatcher(@NonNull EditText target, int offset) {
    if (target.getInputType() == InputType.TYPE_CLASS_NUMBER) {
      target.setInputType(InputType.TYPE_CLASS_TEXT);
      // 当InputType为Number时，手动设置我们的Listener
      target.setKeyListener(new MyDigitsKeyListener());
    } else if (target.getInputType() != InputType.TYPE_CLASS_TEXT) {
      // 仅支持Text及Number类型的EditText
      throw new IllegalArgumentException("EditText only support TEXT and NUMBER InputTyp！");
    }
    mDesTxt = target;
    mOffset = offset;
  }
  //对特殊的控件要做处理的
  public NumSpaceTextWatcher(@NonNull EditText target, int offset, LinearLayout disposeView) {
    if (target.getInputType() == InputType.TYPE_CLASS_NUMBER) {
      target.setInputType(InputType.TYPE_CLASS_TEXT);
      // 当InputType为Number时，手动设置我们的Listener
      target.setKeyListener(new MyDigitsKeyListener());
    } else if (target.getInputType() != InputType.TYPE_CLASS_TEXT) {
      // 仅支持Text及Number类型的EditText
      throw new IllegalArgumentException("EditText only support TEXT and NUMBER InputTyp！");
    }
    mDesTxt = target;
    mOffset = offset;
    this.disposeView = disposeView;
  }

  @Override
  public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    mBeforeTextLength = s.length();
    mBeforeNumTxtLength = s.toString().replaceAll(" ", "").length();
    mBeforeLocation = mDesTxt.getSelectionEnd();
    // 重置mBuffer
    if (mBuffer.length() > 0) {
      mBuffer.delete(0, mBuffer.length());
    }
    // 计算改变前空格的个数
    mBeforeSpaceNumber = 0;
    for (int i = 0; i < s.length(); i++) {
      if (s.charAt(i) == ' ') {
        mBeforeSpaceNumber++;
      }
    }
  }

  @Override
  public void onTextChanged(CharSequence s, int start, int before, int count) {
    mOnTextLength = s.length();
    mNumTxtLength = s.toString().replaceAll(" ", "").length();
    // 判断是否是粘贴,其中粘贴小于offset位的不做判断,并且offset>2判断才有意义
    if (mOffset >= 2 && count >= mOffset) {
      isPaste = true;
      mPasteNum = count;
    } else {
      isPaste = false;
      mPasteNum = 0;
    }
    // 若是经过afterTextChanged方法，则直接return
    if (isChanged) {
      isChanged = false;
      return;
    }
    // 若改变后长度小于等于mOffset - 1，则直接return
    if (mOnTextLength <= mOffset - 1) {
      isChanged = false;
      return;
    }
    // 若改变前后长度一致，并且数字位数相同，则isChanged为false
    // (数字位数相同是防止用户单选空格后输入数字)
    if (mBeforeTextLength == mOnTextLength && mBeforeNumTxtLength == mNumTxtLength) {
      isChanged = false;
      return;
    } else {
      isChanged = true;
    }
    // 若要进行格式化，则判断该情况
    // 判断是否选中空格覆盖(排除删除空格的情况)
    if (before == 1 && count == 0) {
      isOverrideSpace = false;
    } else {
      isOverrideSpace = mBeforeTextLength - mBeforeSpaceNumber - before + count != mNumTxtLength;
    }
    // 若是该情况，计算覆盖空格的个数
    if (isOverrideSpace) {
      mOverrideSpaceNum = mNumTxtLength - (mBeforeTextLength - mBeforeSpaceNumber - before + count);
    } else {
      mOverrideSpaceNum = 0;
    }
  }

  @Override
  public void afterTextChanged(Editable s) {
    if (isChanged) {
      mLocation = mDesTxt.getSelectionEnd();
      // 去除空格
      mBuffer.append(s.toString().replace(" ", ""));
      // 格式化字符串，mOffset位加一个空格
      int index = 0;
      int mAfterSpaceNumber = 0;
      while (index < mBuffer.length()) {
        if (index == mOffset * (1 + mAfterSpaceNumber) + mAfterSpaceNumber) {
          mBuffer.insert(index, ' ');
          mAfterSpaceNumber++;
        }
        index++;
      }
      // 判断是否是粘贴键入
      if (isPaste) {
        mLocation += mPasteNum / mOffset;
        isPaste = false;
        // 判断是否是选中空格输入
      } else if (isOverrideSpace) {
        mLocation += mOverrideSpaceNum;
        // 判断此时光标是否在特殊位置上
      } else if (mLocation % (mOffset + 1) == 0) {
        // 是键入OR删除
        if (mBeforeLocation <= mLocation) {
          mLocation++;
        } else {
          mLocation--;
        }
      }
      // 若是删除数据刚好删除一位，前一位是空格，mLocation会超出格式化后字符串的长度(因为格
      // 式化后的长度没有不包括最后的空格)，将光标移到正确的位置
      String str = mBuffer.toString();
      if (mLocation > str.length()) {
        mLocation = str.length();
      } else if (mLocation < 0) {
        mLocation = 0;
      }
      s.replace(0, s.length(), str);
      Editable editable = mDesTxt.getText();
      Selection.setSelection(editable, mLocation);
    }
    if (s.length() <= 0 && disposeView != null) {
      disposeView.setVisibility(View.GONE);
    }
  }

  // 继承DigitsKeyListener，实现我们自己的Listener
  private class MyDigitsKeyListener extends DigitsKeyListener {
    private char[] mAccepted = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ' '};

    @Override
    protected char[] getAcceptedChars() {
      return mAccepted;
    }
  }
}

自定义的监听事件里代码都有注释，请自行查看。监听事件写好了后，就在代码中对EditText设置监听事件：

    //银行卡输入框单独设置一个监听用于四位空一格
    EditText.addTextChangedListener(
      /**
       * new NumSpaceTextWatcher(EditText target, int offset, LinearLayout disposeView)
       * 这个方法里的参数1：要监听的EditText；参数2：几位数字空一格（加入想三位数字空一格可以将这里设置成3）；
       * 参数3：这个是我自己传的一个view，用于处理别的控件的显示与否，大家用的时候这个地方可以不用传
       */
      new NumSpaceTextWatcher(activityOpenBalaceAmountBinding.openAmountBankNum,
        4, activityOpenBalaceAmountBinding.bankMessageAll));

通过输入数字发现确实是四位一空格，同时在删除的时候会将空格自动删除掉的。从别处粘贴复制过来的一串数字也可以达到同样的效果。在此，EditText的输入银行卡号四位一空格的功能就写完了。既然需要在输入框里输入银行卡号，就会有将银行卡号传递到下一层的操作，在此提醒，在获取EditText输入框里的text时，不要忘了去除空格！

假如银行卡号不是用户手动输入，也不是复制粘贴过来的，比如从后台获取到用户的银行卡号，想四位一空格展示在TextView里，那么用上面这个方法就不现实了。可以用正则表达式来实现：

String cardNum = "6217710859874620".replaceAll("\\d{4}(?!$)", "$0 ");

TextView.setText(cardNum);

这样就可以实现银行卡号四位一空格展示在TextView中。

延伸功能：

在开发中不仅仅有银行卡需要四位一空格，比如手机号需要前三位空一格，后面每四位空一格呢，在此推荐看一下这篇博客：https://blog.csdn.net/lintcgirl/article/details/50358421。