EditText实现分割输入内容

最新推荐文章于 2023-08-30 00:27:10 发布
最新推荐文章于 2023-08-30 00:27:10 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： 自定义View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_rabbit/article/details/69946651
版权
本文介绍如何通过自定义EditText控件，实现手机号、银行卡号和身份证号等输入内容的分割显示，提升用户体验。提供属性配置及代码使用说明，并附带效果展示和项目源码链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在项目中可能会有许多需要输入手机号码、银行卡号或者身份证号等内容的输入框。如果直接输入的话将会是一堆号码堆在一起，第一是不太美观，第二也容易出错，用户体验不太好。但是若将输入的号码按特定格式进行分割将会大大提高用户体验！

以下是对常用的号码进行简单封装的自定义输入框控件，方便我们在开发过程中使用：

  1. 该控件支持xml属性指定，也支持代码指定；
  2. 该控件支持类型分别为电话号码(000 0000 0000)、银行卡号(0000 0000 0000 0000 000)和身份证号(000000 0000 0000 0000)。

效果图

320*568

自定义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>

项目地址 ☞ 传送门

Android自定义EditText，实现分割输入内容效果
04-10
NULL 博文链接：https://renxin-327666062-qq-com.iteye.com/blog/1666694
实现EditText的分割输入内容效果
weixin_33796205的博客
06-23 150
2019独角兽企业重金招聘Python工程师标准>>> ...
笔记本样式的EditText控件(每行均带下划虚线)
11-01 3917
package com.zongyi.trip.ui; import com.zongyi.trip.R; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import
android分割编辑框内容,SplitEditText 一个灵活的分割编辑框。常常应用于验证码输入 、密码输入等场景。...
weixin_42572134的博客
05-27 417
SplitEditTextSplitEditText for Android 是一个灵活的分割编辑框。常常应用于 验证码输入 、密码输入 、等场景。之所以造这个轮子，是因为之前有这样的需求，然后也用过其他开发者类似的库，但是需求随着需求的变动，之前使用的库就不太满足现有的需求。所以最近抽空鲁了一个轮子。这里贴出之前使用过的轮子VerificationCodeView，他是通过继承 Relative...
对EditText拓展完成输入内容分隔处理
u012481172的专栏
12-23 788
今天没有时间看源码了。就写一篇今天的工作记录吧，为了解决一个小功能，就对Android的EditText作了功能上的拓展。      首先说下遇到的需求，在EditText中对用户输入的内容进行一次“重新排版”，即没四个字符串分为一组，每一组用空格隔开：核心源码如下：         /** * 文本改变监听 * @author sunny * */ private
实现Android EditText内容分割输入的自定义技巧
由于本文的描述部分未提供详细说明，所以我们将基于标题中“自定义EditText，实现分割输入内容效果”进行展开。实现这样的功能可能需要以下关键步骤： 1. 创建一个自定义的EditText类，并继承Android原生的EditText...
Android之EditText控制禁止输入空格和回车
08-30
在Android应用开发中，通过监听EditText的TextWatcher并处理输入内容，我们可以灵活地控制用户的输入行为。对于禁止输入空格，可以通过检测、分割和合并字符串来实现；而对于禁止输入回车，只需在XML布局中设置`...
文本切割器TextSplitter
11-27
文本切割工具，TextSplitter，功能点如下： 1，将大文本切割成小文本，便于在手机中打开浏览 2，可指定分成多少份，例如1M分成五分，便于win快速打开 3，轻松快捷，免安装，解压即用
超级好用的text文本切割、合成工具（分行数、大小、文件数三种方式）
10-16
是一款非常好用的text文本分割器，功能非常全面，可按文件大小、文件行数、文件数目分割。适合手机，PDA等掌上工具使用。
SplitEditTextView:Android类似支付宝密码输入框，美团外卖验证码输入框，验证码粘贴等；有效果图，有演示；支持下划线，边框，连体框样式；可设置光标，光标颜色，下划线输入时高亮，边框大小，颜色，圆角等等；设置密码显示的样式
03-19
SplitEditTextView Android类似支付宝密码输入框，美团外卖验证码输入框；支持下划线样式，分区输入框样式，带分割线输入框样式；支持长按粘贴；可设置光标宽高，光标颜色，边框大小，边框颜色，圆角，下划线颜色等等属性（具体可查看下面的属性说明），也可设置输入内容显示模式；不能满足需求也可自行将图书馆里面的原始码下载下来进行修改。原始码的的注释或比较详细，另外写了一篇关于该库是如何实现的文章，有兴趣的可以阅读（） 效果图 如何使用（可查看demo） 第一步：依赖 首先将SplitEditTextView添加到您的项目中，在build.gradle文件中添加依赖，如下： dependencies { .. . implementation ' com.open.keeplearn:SplitEditTextView:1.2.3 ' } 第二步：xml中使用 默
android 每四个数字分隔输入框demo
05-25
每四个数字分隔输入框，有一个输入框的代码和四个输入框的代码
自定义带分隔符输入框CustomEditText
12-03
自定义带分隔符输入框CustomEditText
输入框和分割线
weixin_33704591的博客
04-22 430
2019独角兽企业重金招聘Python工程师标准>>> ...
SplitEditText 是一个灵活的分割编辑框。常常应用于验证码输入 、密码输入等场景
未来很长，但我会努力的走下去。
05-10 591
SplitEditText 项目地址：jenly1314/SplitEditText 简介： 🔢 SplitEditText 是一个灵活的分割编辑框。常常应用于验证码输入 、密码输入等场景。 更多：作者提 Bug 标签： 正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消 SplitEditText for Android 是一个灵...
android中卡号输入框控件（每四位用空格分隔）(解决输入法跳转的问题)
ThugKd的博客
10-12 1645
转载：android中卡号输入框控件（每四位用空格分隔）(解决输入法跳转的问题)感谢作者，感觉非常好用！如需转载，请注明原创作者出处！ 由于项目的需求，需要在卡号输入时，每四位用空间分隔，于是就写了个控件。该控件支持中间删除，中间增加，粘贴，末尾输入等，光标的位置显示正确。主要的思想就是：对于添加TextWatcher监听Text的改变，text改变后，拿到该text，将text中的所有空格去掉。然
EditText根据字节长度拦截输入内容
江南黄鹤
07-30 253
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
EditText宽度不要受hint宽度控制
weixin_45253393的博客
09-24 387
EditText宽度不要受hint宽度控制
自定义安卓密码输入框和键盘
最新发布
TechPulseZ的博客
08-30 364
现在，我们需要在应用程序中使用自定义的密码输入框和键盘。在布局文件中，我们可以将CustomPasswordEditText和自定义的键盘布局添加到视图层次结构中。上述XML布局文件创建了一个垂直排列的LinearLayout，其中包含了一个水平排列的LinearLayout作为键盘的一行。上述布局文件中，我们将CustomPasswordEditText添加为RelativeLayout的子视图，并使用include标签将自定义的键盘布局引入。接下来，我们需要创建一个自定义的键盘布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值