Android 常用且比较好看的EditText（二）—— TextInputEditText

已于 2023-02-04 18:37:46 修改
阅读量8k 收藏 17
点赞数 4
分类专栏： Android 文章标签： android java materialdesign ui
于 2021-12-10 13:08:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W41ted/article/details/121852425
版权

文章目录

Android EditText

之前讲了一个带动画的EditText
这一篇来讲一下
对于我个人也比较常用的一个EditText —— Material Design 的 TextInputEditText
网上也有很多文章关于这个TextInputEditText
很多属性也都归纳过
这里我就简单讲述一下 我使用的
仅为个人自己所学习和使用的

首先 TextInputEditText 要和TextInputLayout 搭配使用
TextInputLayout 就等同于一个线性布局，TextInputEditText的限制属性也可以在TextInputLayout 中描述声明

样例

简单放一下样例
在这里插入图片描述
在这里插入图片描述
样例中，字数超过限制后会相应的报错，如果用于密码还可以设置显示和隐藏密码
之前也写过文章关于这个隐藏密码的问题
Android TextInputEditText初始隐藏密码

图一xml

下面分别给出两张图的两段代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/cloud"
    tools:context=".ui.LoginActivity">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_centerInParent="true"
        android:background="@drawable/shape_mine_top1"
        android:elevation="5dp"
        android:orientation="vertical"
        android:paddingTop="10dp">

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/account"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/identification"
                android:drawableLeft="@drawable/identification"
                android:hint="请输入账号"
                android:imeOptions="actionNext"
                android:inputType="text" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            app:hintAnimationEnabled="true"
            app:hintEnabled="true"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/toggle">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/password"
                android:drawableLeft="@drawable/password"
                android:hint="请输入密码"
                android:imeOptions="actionDone"
                android:inputType="number" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/submit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:backgroundTint="#FFFFFF"
            android:paddingLeft="25dp"
            android:paddingRight="25dp"
            android:text="确定"
            android:textColor="#CC9933"
            app:cornerRadius="15sp"
            app:icon="@drawable/right"
            app:iconSize="20dp"
            app:iconTint="#CC9933"
            app:strokeColor="#7FFFD4"
            app:strokeWidth="2dp" />


        <com.google.android.material.textview.MaterialTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="注册账号"
            android:textColor="#808080"
            android:textSize="11sp"/>


    </androidx.appcompat.widget.LinearLayoutCompat>

</RelativeLayout>

图二xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".button_list.TextInputEdit">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="10dp"
        android:background="@drawable/text_edit"
        app:counterEnabled="true"
        app:counterMaxLength="8"
        app:counterOverflowTextAppearance="@style/counterOverFlow"
        app:counterTextAppearance="@style/CounterStyle"
        app:hintAnimationEnabled="true"
        app:hintEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/man"
            android:hint="请输入相应内容"
            android:imeOptions="actionNext"
            android:inputType="text"
            android:paddingLeft="10dp"
            android:textColorHint="#fff" />
    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="10dp"
        android:hint="请输入相应内容"
        android:background="@drawable/second_text_edit"
        app:counterEnabled="true"
        app:counterMaxLength="6"
        app:counterOverflowTextAppearance="@style/counterOverFlow"
        app:hintAnimationEnabled="true"
        app:hintEnabled="true"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/toggle">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionNext"
            android:inputType="number"/>


    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:hint="请输入相应内容"
        app:counterEnabled="true"
        app:counterMaxLength="6"
        app:hintAnimationEnabled="true"
        app:hintEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/textInputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionDone"
            android:inputType="number"/>

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout_second"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:hint="请输入相应内容"
        app:counterEnabled="true"
        app:counterMaxLength="6"
        app:hintAnimationEnabled="true"
        app:hintEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/textInputEditText_second"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionDone"
            android:inputType="number"/>

    </com.google.android.material.textfield.TextInputLayout>



</LinearLayout>

这里仅仅提及我上图所使用的属性
且属性说明比较口语化

涉及字体样式的，图中使用colors和style的可以定义颜色

属性属性说明
android:drawableLeft在输入框左边添加图片
app:hintAnimationEnabledhint的动画是否显示，默认显示，默认值为true
app:hintEnabledhint是否使用，默认使用，默认值为true
app:passwordToggleEnabled是否使用密码隐藏和显示，需要设置EditText inputType
app:passwordToggleTint密码显示和隐藏图片颜色
app:counterEnabled是否使用计数器
app:counterMaxLength计数器的最大值，需要使用计数器
app:counterOverflowTextAppearance超过计数器最大值时字体样式
app:counterTextAppearance计数器的字体的样式

可以看到图二中，第三第四个是有错误的提示的，这个是自定义的样式
接下来通过活动来编写

错误提示样式一

activity

	private TextInputLayout textInputLayout;
	private TextInputEditText textInputEditText;        //EditText错误信息

	textInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);
	textInputEditText = (TextInputEditText) findViewById(R.id.textInputEditText);   //EditText错误信息
 
	makerEditText();

    //自定义错误信息
    public void makerEditText() {
        textInputEditText.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) {
                if (textInputEditText.getText().length() > textInputLayout.getCounterMaxLength()) {
                    textInputEditText.setError("已经超过限定字数了!! 需要重新输入");
                }
            }
        });
    }

这一个自定义的错误信息是设置在EditText（TextInputEditText）的
通过监听TextInputEditText，判断输入的是否大于规定的计数器的最大值，超过则显示错误信息，setError

错误提示样式二

activity

	private TextInputLayout newTextInputLayout;
    private TextInputEditText newTextInputEditText;    //Layout错误信息

	newTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout_second);
    newTextInputEditText = (TextInputEditText) findViewById(R.id.textInputEditText_second);  //Layout错误信息	
    
   	makerLayout();

    private void makerLayout() {
        newTextInputEditText.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) {
                if (newTextInputEditText.getText().length() > newTextInputLayout.getCounterMaxLength()) {
                    newTextInputLayout.setError("超过规定字数！请更改内容");
                } else {
                    newTextInputLayout.setErrorEnabled(false);
                }
            }
        });
    }

这个错误信息是设置在TextInputLayout的，所以图中的第三个输入框错误信息在TextInputEditText上，第四个在TextInputLayout上
也是通过监听TextInputEditText，判断是否字数超过计数器最大值

错误信息样式关键点

ps：细心的会发现都是显示错误信息，而样式二的代码有else的情况，这是为什么？

原因是：因为错误信息设置在TextInputLayout上，如果不写else的内容，
当第一次的输入超过计数器最大值而显示错误信息后，此时退格删除输入的信息使输入的长度小于计数器最大值，但是却会发现错误信息不会消失

所以需要设置一个else，当退格删除后，小于计数器最大值，保证错误信息消失、不显示 newTextInputLayout.setErrorEnabled(false);

总结

这个就是自己经常使用的EditText的第二部分，
Material Design的内容还是比较好看的
自己也比较喜欢用这个，平时出现的问题也努力解决以达到想要的效果

以后还会继续发表一些自己比较喜欢使用的控件

学习Android的路还很长，大家共同努力❤

iㅤ
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
深入Android【二】——架构和学习
02-21
Android架构和特征千呼万唤始出来，犹抱琵琶半遮。--《琵琶行》虽贵为富二代，但Android要是没任何可圈点的地方，开不过70迈，在玲琅满目的手机平台竞争中，充其量也就做几个俯卧撑打一桶酱油，然后被落的远远的。说...
Box 效果的 EditText，很漂亮哦.zip
10-10
Box 效果的 EditText，很漂亮哦。.zip,基于（旧）google材料设计指南的框中的材料设计文本字段。
MaterialDesign系列文章（十）TextInputLayout和TextInputEdittext
weixin_34342578的博客
05-15 186
最近看见我的文章被很多人喜欢，这里先谢谢大家了！感谢你对我写作的认可。 我叫 笔墨Android ，希望大家记得！哈哈。。。写关于MD文章已经有10篇了，坚持真是一个很神奇的东西！不知不觉已经更新10篇文章了。这段时间自己的只是体系得到了提升，还结交到了很多朋友。感觉挺值的！如果我的文章有什么问题，希望你及时提出来，我会尽早的给你一个交代的！文末我会把我的QQ号奉上的，有问题找我哦！！！ 本文知...
Android 之 EditText (输入框)详解
leyang0910的博客
06-03 7968
有时我们可能需要对输入的数据进行限制，比如输入电话号码的时候，你输入了一串字母，这 显然是不符合我们预期的，而限制输入类型可以通过inputType属性来实现！比如下面的效果图: 第一个是设置了该属性的，第二个是没设置该属性的，设置为true的EditText获得焦点后 选中的是所有文本！，文中给出了很多实际开发中可能遇到的一些需求 的解决方法，应该会为你的开发带来便利，在本节中，我们来学习第二个很常用的控件。一个参数的是设置光标位置的，两个参数的是设置起始位置与结束位置的中间括的部分，即部分选中！
2024年Android最新Android Studio中的EditText控件使用详解，工程建设面试问题
最新发布
2401_84562251的博客
05-14 976
给大家分享一份移动架构大纲，包含了移动架构师需要掌握的所有的技术体系，大家可以对比一下自己不足或者欠缺的地方有方向的去学习提升；网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！n_all"
Android Material Design之TextInputLayout,TextInputEditText(十四)
csdn_yang123的博客
12-12 741
TextInputLayout,TextInputEditText
MaterialEditText android酷炫输入框 框架(基本满足所有需求)
Lance_小超
02-19 3903
首先上截图: 使用特别方便 本框架并非原创 在github那找的 分享给大家地址:https://github.com/rengwuxian/MaterialEditText
Android开发： 美化输入框EditText
幼稚园六级学渣博客
11-26 4756
美化输入框代码
安卓Android源码——自动清空edittext.rar
10-10
总之，"安卓Android源码——自动清空edittext.rar"这个资源提供了实现EditText自动清空功能的参考代码，帮助开发者理解和学习如何在Android应用中动态控制EditText的文本内容，提升用户体验。通过研究这个源码，...
安卓Android源码——自动清空edittext.zip
10-10
"安卓Android源码——自动清空edittext.zip"这个压缩包文件很可能是提供了一个示例或者解决方案，用于演示如何在用户完成编辑后自动清空Edittext中的文本。下面我们将深入探讨这一功能的实现方式，以及相关知识点。 ...
android design包控件,Android Design包之TextInputLayout和TextInputEditText的组合使用【原创】...
weixin_32139147的博客
06-02 361
在Android的日常开发中，EditText是个不可或缺的控件之一，作为输入框，用法也没什么太多值得可说的，拿一个简单的登录界面为例，平时差不多是这样的布局： 一般来说是这样，EditText里面的hint属性作为提示语，但是一旦输入的时候，提示语就会消失，另外对于不合法的输入我们一般来说会采用Toast的方式来进行提示。那么接下来看看采用design包中的TextInputLayout和Te...
Android EditText终极美化------带行号、下划线、弹性效果、光标美化
xuqiqiang1993的博客
03-28 9816
不多说，直接上代码： NoteEditText.java public class NoteEditText extends EditText { private Context context; private boolean initialized; // 画笔 用来画下划线 private Paint paint; private Paint
Android EditText——扁平化的登录界面
MartinDong的博客
02-07 1万+
在2016年底写了一个小项目，登录界面一开始是自己随便写的，基本看得过去，也凑活能用，然后美工看了一眼，默默地回去做了一张登陆的图丢给我，看完美工的图，我对自己的审美产生了怀疑，，， 没有对比就没有伤害，所以我绝不会放出自己写的登录界面来对（diu）比（ren）。 登陆界面先来看看登录界面写完的效果图 1.登录界面 2 监听editText，可以一键清空 3 checkBox的颜色统一代码下面，
Android美化EditText
gao_chun
04-20 9666
目前各种app都讲究用户体验，这里介绍下对EditText控件的样式美化。 先上效果图：            注：第一个控件没有没有设置 background 的任何属性，第二个控件设置了 android:background="@drawable/bg_edittext_selector" 若希望取消 EditText 背景，直接设置 android:background=
android EditText 全面阐述
jrcisme的专栏
08-09 1万+
EditText 属性   EditText继承关系：View-->TextView-->EditText。 EditText的属性很多，这里介绍几个： android:layout_gravity="center_vertical" 设置控件显示的位置：默认
Android Material（一）
qq_43621019的博客
01-19 941
Android Material（一） 1. MaterialTextField implementation 'com.google.android.material:material:1.1.0-alpha09' 1. 默认效果 <com.google.android.material.textfield.TextInputLayout android:layout_wi...
Android EditText设置边框
热门推荐
tracy的博客
09-05 3万+
Android EditText设置边框 简介 Android应用程序中给EditText设置边框。 效果图： 快速开始 在res/drawable目录下新建样式文件 edit_background.xml。 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.an...
android widget 布局,Android Widget Attributes——View
05-27
Android的Widget是指可以被放置在桌面或者其他应用中的小部件，比如常见的时钟、天气、日历等等。在Android中，Widget的布局可以使用XML文件来进行定义，与普通的布局定义类似，可以使用各种属性来设置Widget的样式和行为。 在Widget的XML布局文件中，可以使用View类中定义的许多属性来控制Widget的样式和行为，比如： 1. android:id：设置Widget的ID，可以在代码中通过findViewById()方法来获取对应的View对象。 2. android:layout_width、android:layout_height：设置Widget的宽度和高度，可以使用具体数值或者match_parent、wrap_content等特殊值。 3. android:layout_gravity：设置Widget在父布局中的对齐方式，比如center、left、right等等。 4. android:padding、android:paddingLeft、android:paddingRight等：设置Widget的内边距，用于控制Widget内部内容的显示位置。 5. android:background：设置Widget的背景颜色或者背景图片。 6. android:clickable、android:longClickable：设置Widget是否可以被点击或者长按。 7. android:focusable、android:focusableInTouchMode：设置Widget是否可以获取焦点，用于控制Widget是否可以响应键盘事件等。 8. android:visibility：设置Widget是否可见，可以使用值为visible、invisible、gone。 除了以上列出的属性之外，还有许多其他的属性可以用于控制Widget的样式和行为，具体可以查看Android官方文档。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iㅤ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值