EditText每4位自动添加空格

基本功能

刚拿到需求,很简单的一个功能,二话不说,很快就出来了:


完美!顺利上线!

没过几天领导拿着手机过来说:“这一堆数字在一起看着很费劲,像其他App一样,加个空格吧!”

于是就有了这个demo。

拓展功能

下面就来在基本功能上做拓展:每4位,自动添加空格。

看似很小的功能,在开发的过程中,遇到了非常多的问题与难点:

  • EditText输入框监听死循环
  • 输入框中的空格无法删除(删除又添加)
  • 从中间删除一个数字产生的一系列问题
  • 输入框光标位置的控制问题

之前踩坑的过程就不再赘述了,太心酸....



经过一系列的实验,最后定下来的思路如下:

  1. 当输入框的内容改变时,就将内容取出拆分为一个一个的字符,在每4位的中间添加空格,最后一个4位不能添加。用这种拼接字符的方法是为了解决当用户删除中间的数字,会导致空格位置错位的问题。

  2. 当用户删除中间的字符时,要记录该动作并且记录光标位置,保证重新排序完成后,光标的位置在应该在的位置。

大概就这2步,就可以实现这个功能,下面一步一来,我们先实现空格的添加,保证内容永远满足4位后一个空格:

下面先看EditText的监听:

et_credit_number.addTextChangedListener(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) {
    }
    @Override
    public void afterTextChanged(Editable s) {
        //获取输入框中的内容,不可以去空格
        String etContent = EditTextUtils.getText(et_credit_number);
        if (TextUtils.isEmpty(etContent)) {
            bt_submit.setEnabled(false);
            return;
        }
        //重新拼接字符串
        String newContent = AppUtils.addSpeaceByCredit(etContent);
        //如果有改变,则重新填充
        //防止EditText无限setText()产生死循环
        if (!etContent.equals(newContent)) {
            et_credit_number.setText(newContent);
            //保证光标在最后,因为每次setText都会导致光标重置
            //这样最基本地解决了光标乱跳的问题
            et_credit_number.setSelection(newContent.length());
        }
        //判断是否满足信用卡格式,注意去空格判断
        if (MatcheUtils.isCreditNumber(newContent.replaceAll(" ", ""))) {
            bt_submit.setEnabled(true);
            return;
        }
        bt_submit.setEnabled(false);
    }
});

没有难点,重新拼接字符串我单独封装了出来:

public static String addSpeaceByCredit(String content) {
    if (TextUtils.isEmpty(content)) {
        return "";
    }
    //去空格
    content = content.replaceAll(" ", "");
    if (TextUtils.isEmpty(content)) {
        return "";
    }
    //卡号限制为16位
    if (content.length() > 16) {
        content = content.substring(0, 16);
    }
    StringBuilder newString = new StringBuilder();
    for (int i = 1; i <= content.length(); i++) {
        //当为第4位时,并且不是最后一个第4位时
        //拼接字符的同时,拼接一个空格
        //如果在最后一个第四位也拼接,会产生空格无法删除的问题
        //因为一删除,马上触发输入框改变监听,又重新生成了空格
        if (i % 4 == 0 && i != content.length()) {
            newString.append(content.charAt(i - 1) + " ");
        } else {
        //如果不是4位的倍数,则直接拼接字符即可
            newString.append(content.charAt(i - 1));

        }
    }
    return newString.toString();
}

这里每一步的含义,我都写了注释,应该问题不大,下面运行一下:



完美!空格正常添加了!
但是光标乱跳的问题,我特地演示了一下。

用字符排序的方式来做这个功能的原因是这个,当用户从中间删除字符时,我们需要将所有添加的空格位置都进行审查,并重新进行空格的添加,所以我认为重新排序字符是非常恰当的一种做法。当然这仅仅是我的愚见,可能有更优的做法。

现在我们就要进行第二步,当用户删除中间字符时,我们要判断用户本次操作是删除字符,并且保存本次删除的光标位置,在删除完成、排序完成之后,将光标移动到保存的光标位置。

思路有了,下面就看最终代码好了。

功能展示


输入框监听的代码:

et_credit_number.addTextChangedListener(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) {
        //因为重新排序之后setText的存在
        //会导致输入框的内容从0开始输入,这里是为了避免这种情况产生一系列问题
        if (start == 0 && count > 0) {
            return;
        }
        String editTextContent = EditTextUtils.getText(et_credit_number);
        if (TextUtils.isEmpty(editTextContent) || TextUtils.isEmpty(lastString)) {
            return;
        }
        editTextContent = AppUtils.addSpeaceByCredit(editTextContent);
        //如果最新的长度 < 上次的长度,代表进行了删除
        if (editTextContent.length() <= lastString.length()) {
            deleteSelect = start;
        } else {
            deleteSelect = editTextContent.length();
        }
    }
    @Override
    public void afterTextChanged(Editable s) {
        //获取输入框中的内容,不可以去空格
        String etContent = EditTextUtils.getText(et_credit_number);
        if (TextUtils.isEmpty(etContent)) {
            bt_submit.setEnabled(false);
            return;
        }
        //重新拼接字符串
        String newContent = AppUtils.addSpeaceByCredit(etContent);
        //保存本次字符串数据
        lastString = newContent;
        //如果有改变,则重新填充
        //防止EditText无限setText()产生死循环
        if (!etContent.equals(newContent)) {
            et_credit_number.setText(newContent);
            //保证光标的位置
            et_credit_number.setSelection(deleteSelect > newContent.length() ? newContent.length() : deleteSelect);
        }
        //判断是否满足信用卡格式,注意去空格判断
        if (MatcheUtils.isCreditNumber(newContent.replaceAll(" ", ""))) {
            bt_submit.setEnabled(true);
            return;
        }
        bt_submit.setEnabled(false);
    }
});

这边主要利用了onTextChanged()的监听,判断用户操作是删除操作时,保存光标的位置。

小结

项目我已经上传到了我的GitHub,有兴趣的同学可以去参考一下。

这个功能的坑远远超出了我的想象,我才不会说这个项目我就运行了100遍而已!


再次更新

这期间不少同学提出了许多问题。

首先真的很感谢大家,愿意花费时间到这个demo。

@星空lngwu 和 @luckilyLiu提出的BUG均已修复。

并且当初没想到会有这么多人使用这个功能,于是没有进行封装。

现在我已经将核心代码封装到了自定义EditText中,并且添加了大量注释。

如果还有什么问题,我会继续维护。

再次感谢各位!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容