Android EditText每4位自动添加空格效果

基本功能

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

完美!顺利上线!

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

于是就有了这个demo。

拓展功能

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

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

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

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

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

  • 当输入框的内容改变时,就将内容取出拆分为一个一个的字符,在每4位的中间添加空格,最后一个4位不能添加。用这种拼接字符的方法是为了解决当用户删除中间的数字,会导致空格位置错位的问题。
  • 当用户删除中间的字符时,要记录该动作并且记录光标位置,保证重新排序完成后,光标的位置在应该在的位置。

大概就这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遍而已!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Android EditText追加空格、限制字符等方法示例

    前言 使用输入框时产品常常会有一些需求,比如123456789变成123-456-789或者限制一些字符的输入等等.很多时候都是网上搜索就完事了,但是每次都去搜索有点浪费时间,而且有些也不符合需求.所以自己写一篇,以后就可以吃老本了.

  • Android EditTextView 实现带空格分隔的输入(电话号码,银行卡)

    电话号码输入框需求: 三位,七位后有空格 删除倒数第四,第八位会将空格也删除 使用TextWatcher When an object of a type is attached to an Editable, its methods will be called when the text is changed.就是说,只要是一个可编辑的文本设置了TextWatcher,当文本发生变化时,TextWatcher里的方法将会被调用. 其实不难,看了网上搜索到的例子,思路绕了点,这边做一份自己的记

  • Android EditText禁止输入空格和特殊字符

    有时候我们需要限制EditText输入的字符类型,如空格,特殊字符等,这时候我们可以使用系统提供的输入过滤器--InputFilter.具体实现如下: /** * 禁止EditText输入空格 * @param editText */ public static void setEditTextInhibitInputSpace(EditText editText){ InputFilter filter=new InputFilter() { @Override public CharSequ

  • Android实现 EditText输入手机号空格功能

    Android EditText输入手机号空格 开发需求是在登录页面的手机EditText中间插入空格,让用户看起来方便点, 130 1234 4567,中间第4个数字和第5个数字空格前面加空格. 要求还有一点,就是除了输入要加入空格,从其他地方复制过来的电话号码,没有空格的,也要在粘贴后,自动补全空格. 思路:重写TextWatcher,每次EditText内容变化,都判断内容是否符合要求. @Override public void afterTextChanged(Editable s)

  • Android之EditText控制禁止输入空格和回车

    1.EdiTtext输入框控制不能输入空格,给EditText添加一个addTextChangedListener监听,如果有空格split截取截取再for循环将截取后不包含空格的字符串数组重新排列这样这个字符串就不包含空格了,最后将这个字符串重新写入EditText,这时会出现一个问题就是光标会自动跳转到第一个位置,在onTextChanged中会有一个叫做start的变量他会传入在这个空格输入之前的光标位置,EditText.setSelection(int)来改变光标的位置具体位置. 具体

  • Android EditText每4位自动添加空格效果

    基本功能 刚拿到需求,很简单的一个功能,二话不说,很快就出来了: 完美!顺利上线! 没过几天领导拿着手机过来说:"这一堆数字在一起看着很费劲,像其他App一样,加个空格吧!" 于是就有了这个demo. 拓展功能 下面就来在基本功能上做拓展:每4位,自动添加空格. 看似很小的功能,在开发的过程中,遇到了非常多的问题与难点: EditText输入框监听死循环 输入框中的空格无法删除(删除又添加) 从中间删除一个数字产生的一系列问题 输入框光标位置的控制问题 之前踩坑的过程就不再赘述了,太心

  • 正则表达式实现字符串每4位后自动加空格效果(两种方法)

    需求:输入框中输入银行卡号(或其他)时,每4位自动加空格(如下图) 分析 方法一:监控输入框的keyup事件,当value值的长度为4,8,12,16时,插入空格字符串" "(vue中代码片段如下) <input type="text" v-model="bankCard" @keyup="bankCardKeyup"> bankCardKeyup (e) { let self = this // 如果是删除键,则

  • Android 实现为点击事件添加震动效果

    Android 点击Button 实现震动效果教程 Overview 在Android 的点击效果中,遇到震动效果的还是很多的. 接下来就让我们看一下如何实现震动效果. 所需要的权限 如果我们在开发中需要使用到我们的震动,那么我们就需要申请一下权限: <uses-permission android:name="android.permission.VIBRATE"/> 这样我们的权限就申请好了. 我们震动效果的帮助类 创建一个名为VibrateHelp的点击震动的帮助类.

  • Android自定义View实现拖动自动吸边效果

    本文实例为大家分享了Android自定义View实现拖动自动吸边的具体代码,供大家参考,具体内容如下 自定义View,一是为了满足设计需求,二是开发者进阶的标志之一.随心所欲就是我等奋斗的目标!!! 效果 实现逻辑 明确需求 1.实现控件跟随手指拖动2.实现控件自动贴边 整理思路 1.既然要实现控件拖动,那么就离不开onTouchEvent()这个方法,需要监听里面的按下和滑动事件.2. 要实现自动贴边,需要监听onTouchEvent()中手指离开屏幕事件.对于贴边的过程,我们用属性动画来解决

  • 基于jquery实现的银行卡号每隔4位自动插入空格的实现代码

    难点不是插入空格,而是修正光标的位置,这个只支持IE9+.chrome浏览器 注意:这个使用了jquery框架 核心代码 $(function() { $('#kahao').on('keyup', function(e) { //只对输入数字时进行处理 if((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105 )){ //获取当前光标的位置 var caret =

  • android实现App活动定时自动跳转效果

    App的小功能点,很简单几十行代码就可以实现 主页面代码 package com.buildingbuilding; import android.content.Intent; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.WindowManag

  • Android手机号码输入框(满11位自动跳到下个输入框)实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.jixiong.teen.view; import android.content.Context; import android.text.Editable; import android.text.Selection; import android.text.TextWatcher; import android.util.AttributeSet; import android.widget.EditText;

  • Android 自定义输入手机号自动添加分隔符

    比较简单的一个控件,就是加些逻辑处理而已,以前貌似是直接监听的,封装起来方便点 public class AccountTxtView extends android.support.v7.widget.AppCompatEditText { private final char CUT = '-'; public AccountTxtView(Context context) { super(context); } public AccountTxtView(Context context,

  • 强制去除Unity自动添加的Android隐私权限

    提审Google Play会遇到隐私权限的问题,最好把非必要隐私权限清理干净.GF框架DebugComponent组件中涉及Input.location API调用,Unity打包时就会自动添加定位权限. 首先通过Android SDK BuildTool下的aapt.exe查看apk的权限 ./aapt dump badging xxx.apk 强制去除权限方法: 1.在Project Setting ->Player中勾选自定义Manifest. 会在Plugins->Android下自动

随机推荐