TextInputLayout与TextInputEditText详解

最新推荐文章于 2024-08-15 15:04:15 发布
最新推荐文章于 2024-08-15 15:04:15 发布
阅读量2.8w 收藏 40
点赞数 12
分类专栏： material-design 文章标签： android material-design weight
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012792686/article/details/73089227
版权

导读:

Android 从5.0版本开始,新增了Android Materia Design库,让开发者高效的实现炫酷的UI效果

本篇文章将介绍Materia Design库的TextInputLayout与TextInputEditText组件

TextInputLayout

  • TextInputLayout用于辅助EditText,当用户输入文本时,在EditText上方显示浮动标签,这个标签的内容就是我们设置的android:hint属性.

  • TextInputLayout 属于Android Design Support library,可以直接向下兼容到Android 2.2.

  • TextInputLayout 继承于Linerlayout,说明它是一个布局,需要配合子控件使用才能显示想要的效果,类似ScrollView的用法

TextInputLayout 属性说明

属性说明
app:Theme设置下划线或其他的颜色属性
android.support.design:counterEnabled是否显示计数器
android.support.design:counterMaxLength设置计数器的最大值,与counterEnabled同时使用
android.support.design:counterTextAppearance计数器的字体样式
android.support.design:counterOverflowTextAppearance输入字符大于我们限定个数字符时的字体样式
android.support.design:errorEnabled是否显示错误信息
android.support.design:errorTextAppearance错误信息的字体样式
android.support.design:hintAnimationEnabled是否显示hint的动画,默认true
android.support.design:hintEnabled是否使用hint属性,默认true
android.support.design:hintTextAppearance设置hint的文字样式(指运行动画效果之后的样式)
android.support.design:passwordToggleDrawable设置密码开关Drawable图片,于passwordToggleEnabled同时使用
android.support.design:passwordToggleEnabled是否显示密码开关图片,需要EditText设置inputType
android.support.design:passwordToggleTint设置密码开关图片颜色
android.support.design:passwordToggleTintMode设置密码开关图片(混合颜色模式),与passwordToggleTint同时使用

TextInputLayout使用

一、moudle的bulid.gradle 添加依赖库:


dependencies {
 compile 'com.android.support:appcompat-v7:25.3.1'
 compile 'com.android.support:design:26.0.0-alpha1'
 }

二、XML布局文件设置属性


<?xml version="1.0" encoding="utf-8"?>
<!-- xmlns:app="http://schemas.android.com/apk/res-auto" 记得设置命名空间-->
<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="xmx.zs.materia_design.TextInputLayoutActivity">

    <!--android.support.design:hintAnimationEnabled | 是否显示hint的动画,默认true-->
    <!--android.support.design:hintEnabled | 是否使用hint属性,默认true-->
    <!--android.support.design:hintTextAppearance | 设置hint的文字样式(指运行动画效果之后的样式)-->
    <!--android.support.design:counterEnabled | 是否显示计数器-->
    <!--android.support.design:counterMaxLength | 设置计数器的最大值-->
    <!--android.support.design:counterOverflowTextAppearance | 输入字符大于我们限定个数字符时的样式-->
    <!--app:theme 设置浮动标签的颜色主题-->
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="5"
        app:counterOverflowTextAppearance="@style/OverTextAppearance"
        app:counterTextAppearance="@style/CountTextAppearance"
        app:hintAnimationEnabled="false"
        app:hintEnabled="true"
        app:hintTextAppearance="@style/EditText_hintTextAppearance"
        app:theme="@style/EditText_Theme">

        <!--EditText 设置左侧图片,系统建议drawableStart/drawableLeft一起用,API>17-->
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/edit_account"
            android:drawableStart="@mipmap/edit_account"
            android:hint="请输入用户名"
            android:imeOptions="actionNext"
            android:inputType="text"/>

    </android.support.design.widget.TextInputLayout>

    <!--android.support.design:passwordToggleEnabled | 是否显示密码开关图片,需要EditText设置inputType-->
    <!--android.support.design:passwordToggleTint | 设置密码开关图片颜色-->
    <!--android.support.design:passwordToggleTintMode | 设置密码开关图片(混合颜色模式),与passwordToggleTint同时使用-->
    <!--android.support.design:errorEnabled |是否显示错误信息-->
    <!--android.support.design:errorTextAppearance| 错误信息的字体样式-->

    <!--系统默认的密码开关(修改颜色主题)-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        app:counterEnabled="true"
        app:counterMaxLength="5"
        app:counterOverflowTextAppearance="@style/OverTextAppearance"
        app:counterTextAppearance="@style/CountTextAppearance"
        app:errorEnabled="true"
        app:errorTextAppearance="@style/ErrorTextAppearance"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimaryDark"
        app:passwordToggleTintMode="multiply"
        app:theme="@style/EditText_Theme">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/edit_lock"
            android:drawableStart="@mipmap/edit_lock"
            android:imeOptions="actionNext"
            android:inputType="textPassword"
            android:paddingLeft="100dp"/>

    </android.support.design.widget.TextInputLayout>

    <!--android.support.design:passwordToggleDrawable | 设置密码开关Drawable图片-->
    <!--自定义我们的密码开关图片(drawable)-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_customize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请确认密码"
        app:counterEnabled="true"
        app:counterMaxLength="5"
        app:passwordToggleDrawable="@drawable/password_visible_invisible"
        app:passwordToggleEnabled="true"
        >

        <android.support.design.widget.TextInputEditText
            android:id="@+id/editText_customize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/edit_lock"
            android:drawableStart="@mipmap/edit_lock"
            android:imeOptions="actionDone"
            android:inputType="textPassword"/>


    </android.support.design.widget.TextInputLayout>

    <!--Test EditText.setCompoundDrawables()-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_testEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleDrawable="@drawable/password_visible_invisible"
        >

        <EditText
            android:id="@+id/editText_drawable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/edit_lock"
            android:drawableStart="@mipmap/edit_lock"
            android:hint="Test EditText.setCompoundDrawables()"
            android:inputType="numberPassword"/>
    </android.support.design.widget.TextInputLayout>

    <!--Test EditText.setCompoundDrawablesWithIntrinsicBounds()-->
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleDrawable="@drawable/password_visible_invisible">

        <EditText
            android:id="@+id/editText_drawable2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Test EditText.setCompoundDrawablesWithIntrinsicBounds()"
            android:inputType="numberPassword"/>
    </android.support.design.widget.TextInputLayout>


</LinearLayout>

三、MainActivity中调用控件

其实做完上面两步就已经有效果了,这里简单的演示下:

  • EditText.setError()和TextInputLayout.setError()的简单监听

  • EditText.setCompoundDrawables()和EditText.setCompoundDrawablesWithIntrinsicBounds()的简单使用

/*
 * @创建者     默小铭
 * @博客       http://blog.csdn.net/u012792686
 * @创建时间   2017/6/10
 * @本类描述      TextInputLyout 实际使用例子
 * @内容说明   
 * @补充内容
 *
 * ---------------------------------
 * @更新时间
 * @新增内容
 *
 */
public class TextInputLayoutActivity extends AppCompatActivity {

    private TextInputEditText mEditText_customize;
    private TextInputLayout   mTil_customize;
    private EditText          mEditText;
    private TextInputLayout   mTextInputLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_input_layout);

        //自定义密码开关输入框
        mEditText_customize = (TextInputEditText) findViewById(R.id.editText_customize);
        mTil_customize = (TextInputLayout) findViewById(R.id.til_customize);
        //系统自带的密码开关输入框
        mEditText = (EditText) findViewById(R.id.editText);
        mTextInputLayout = (TextInputLayout) findViewById(R.id.til);
        testSetCompoundDrawables();
        testSetCompoundDrawablesWithIntrinsicBounds();
        customizeEditText();
        TextInputLyout_EditText();

    }

    /**
     * 测试EditText.setCompoundDrawablesWithIntrinsicBounds()
     * <p>
     * 可以在上、下、左、右设置图标，如果不想在某个地方显示，则设置为null。
     * <p>
     * 图标的宽高将会设置为固有宽高，既自动通过getIntrinsicWidth和getIntrinsicHeight获取。
     * <p>
     * 即:这种方式只能显示原图
     */
    private void testSetCompoundDrawablesWithIntrinsicBounds() {
        Drawable drawable = getResources().getDrawable(R.mipmap.edit_lock);
        EditText editText_drawable = (EditText) findViewById(R.id.editText_drawable2);
        editText_drawable.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);

    }

    /**
     * 测试EditText.setCompoundDrawables()
     * <p>
     * 可以在上、下、左、右设置图标，如果不想在某个地方显示，则设置为null。
     * <p>
     * 但是Drawable必须要setBounds(Rect)。设置初始位置、宽和高等信息。
     * <p>
     * 即:使用前要先调用Drawable.setBounds(),可以调整图片的大小和相对位置
     */
    private void testSetCompoundDrawables() {
        Drawable drawable = getResources().getDrawable(R.mipmap.edit_lock);
        drawable.setBounds(0, 0, 40, 40);
        EditText editText_drawable = (EditText) findViewById(R.id.editText_drawable);
        editText_drawable.setCompoundDrawables(drawable, null, null, null);
    }

    /**
     * 系统自带的密码开关输入框的错误信息处理
     */
    private void TextInputLyout_EditText() {
        mEditText.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 (mEditText.getText().length() > mTextInputLayout.getCounterMaxLength()) {
                    mTextInputLayout.setError("超出限定字数了...");
                }

            }
        });

    }

    /**
     * 自定义密码开关输入框的错误信息处理
     */
    private void customizeEditText() {
        mEditText_customize.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 (mEditText_customize.getText().length() > mTil_customize.getCounterMaxLength()) {
                    mEditText_customize.setError("超出限定字数了!!");
                }
            }
        });


    }
}

Demo效果图

这里写图片描述

这里写图片描述

这里写图片描述

==注意==

  1. 添加库的时候注意要加appcompat-v7库,确保可以向后兼容
  2. TextInputLayout下的实际视图层次结构不能保证以XML格式编写视图层次结构。 因此，对于TextInputLayout的子对象EditText(或子类TextInputEditText)想调用getParent()可能不会返回TextInputLayout. 如果您需要直接访问视图,建议设置一个android：id并使用findViewById(int).
  3. 一个TextInputLayout只能套一个EditText(或它的子类TextInputEditText)
  4. 当使用passwordToggleDrawable密码开关图片的时候，EditText end位置的 图标时会被覆盖的，为了保证EditText end 位置Drawable的正常显示，你需要在设置这些Drawables 的相对位置（start/end）为绝对(left/right).(官方文档说的,没搞懂)
  5. 使用了TextInputLayout,和它的setError(),布局所占的位置会变多,设计布局注意留适当的空间
  6. EditText的setError和passwordToggleDrawable的图片会重叠,建议只用TextInputLatyout的setError或者重写EditText的布局,抉择一个吧
  7. TextInputLayout.setError()注意调用setErrorEnabled(false)清空错误信息,不然会一直显示
  8. 建议TextInputLayout只套一个EditText,放其他控件会出现焦点抢占的问题(View的事件分发)

TextInputEditText

  • TextInputEditText是EditText的子类,说白了是为了填EditText的坑的

  • 当我们的界面处于全屏时,点击一个EditText,默认情况下不是在它下面弹出键盘，而是进入到输入法的一个全屏的输入界面(通过配置android:imeOptions=”flagNoExtractUi”可以设为直接在当前界面显示)

  • 如果我们给EditText 套上了一个TextInputLayout时,TextInputLayout会拿到EditText的hint显示出来并把EditText本身的hint设为空.这样我们在全屏的输入界面上,就显示不出来我们设置hint,因此TextInputEditText重写了EditText

小知识:EditText的imeOptions要与inputType同时使用,不然没有反应

EditText与TextInputEditText效果区别图

这里写图片描述

在EditText 设置android:drawableLeft Bug

  • 今天在TextInputLayout设置了app:passwordToggleEnabled=”true”属性的EditText设置androd:drawableLeft属性时发现,只能显示原图,然后在代码调用Drawable.setBounds()方式调整大小时,发现drawableLeft图片直接不显示了(估计源码没设计好)

  • 而不调用 app:passwordToggleEnabled=”true”属性,Drawable.setBounds()能正常使用

  • 因此建议同学们,要么使用原图(美工切小图),要么不用passwordToggleEnabled属性,自己自定义drawableLeft/drawableRight(建议)

TextInputLayout使用bug:

  • 今天使用TextInputLyout.setError()发现以下bug,
Failed to inflate ColorStateList, leaving it to the framework
    java.lang.RuntimeException: Failed to resolve attribute at index 0
    android.content.res.TypedArray.getColor(TypedArray.java:401)
    ...

解决:
在布局文件的TextInputLayout设置app:errorTextAppearance=”@style/Theme.AppCompat”,同学们使用过程中发现类似RuntimeException bug,同理设置样式即可解决

总结

本篇文章Demo

留个TODO,请求大神帮帮忙:

当使用passwordToggleDrawable密码开关图片的时候，EditText end位置的 图标时会被覆盖的，为了保证EditText end 位置Drawable的正常显示，你需要在设置这些Drawables 的相对位置（start/end）为绝对(left/right).(官方文档说的,没搞懂)

官方用的矢量图,自己的方案是找个宽高较小的图片,或者重写EditText,自定义View

本篇文章到此结束,欢迎关注,后续有补充的会即使更新,有问题也欢迎评论,共同成长

K8s（六）：网络插件之Calico安装与详解
✨ 欢迎来到【Seal ^_^ 的CSDN博客】！这里是我记录技术心得、分享经验的地方。✨
04-02 2万+
🔴 K8s（六）：网络插件之Calico安装与详解
遗传算法（Genetic Algorithm）详解与实现
热门推荐
盼小辉丶的博客
12-25 17万+
遗传算法（Genetic Algorithm, GA）是受自然进化原理启发的一系列搜索算法。通过模仿自然选择和繁殖的过程，遗传算法可以为涉及搜索、优化和学习的各种问题提供高质量的解决方案。同时，它们类似于自然进化，因此遗传算法可以克服传统搜索和优化算法遇到的一些障碍，尤其是对于具有大量参数和复杂数学表示形式的问题。
MaterialDesign系列文章（十）TextInputLayout和TextInputEdittext
weixin_34342578的博客
05-15 200
最近看见我的文章被很多人喜欢，这里先谢谢大家了！感谢你对我写作的认可。 我叫 笔墨Android ，希望大家记得！哈哈。。。写关于MD文章已经有10篇了，坚持真是一个很神奇的东西！不知不觉已经更新10篇文章了。这段时间自己的只是体系得到了提升，还结交到了很多朋友。感觉挺值的！如果我的文章有什么问题，希望你及时提出来，我会尽早的给你一个交代的！文末我会把我的QQ号奉上的，有问题找我哦！！！ 本文知...
Android 常用且比较好看的EditText（二）—— TextInputEditText
https://github.com/W4ited
12-10 8504
文章目录Android EditText样例图一xml图二xml错误提示样式一错误提示样式二错误信息样式关键点总结 Android EditText 之前讲了一个带动画的EditText 这一篇来讲一下 对于我个人也比较常用的一个EditText —— Material Design 的 TextInputEditText 网上也有很多文章关于这个TextInputEditText 很多属性也都归纳过 这里我就简单讲述一下 我使用的 仅为个人自己所学习和使用的 首先 TextInputEditText 要和
Android开发-EditText讲解
最新发布
ban_ni_zuo_you的博客
08-15 745
EditText的作用是用来生成一个输入框，比如一些常见的登录界面EditText继承了TextView的所有属性，学习之前建议学习TextView控件（可以看我往期文章）
Material Design 入门（一）——TextInputLayout和TextInputEditText
dianziagen的博客
05-07 816
Material Design 入门（一）——TextInputLayout和TextInputEditText 2016-08-29 17:04 2199人阅读 评论(0) 收藏 举报 本文章已收录于： 分类： Android Matarial Design（9） 作者同类文章X 版权声明：本文为博主
TextInputLayout、TextInputEditText
songzi1228的博客
12-10 519
相关文章：Material Design 之 TextInputLayout和TextInputEditText TextInputLayout是22.2.0新添加的控件， 要和EditText(或EditText的子类）结合使用，并且只能包含一个EditText(或EditText的子类）。 TextInputLayout是什么 TextInputLayout主要是作为EditText的容...
TextInputLayout和TextInputEditText使用
Alex的世界
11-15 1446
TextInputLayout是2015 I/O大会谷歌推出了 Android Design Support Library，主要是配合edittext（它的子类）的使用，当edittext有输入内容时，hint会自动消失，而配合TextInputLayout使用时，hint可以在edittext上方显示，当然还有其他一些功能可以使用，不废话，下面是关于TextInputLayout的使用
TextInputLayout&TextInputEditText的使用
那些年我们一起写的代码
01-05 3689
TextInputLayout & TextInputEditText是Material Design里面的控件，相比EditText而言里面添加了动画和一些新特性，个人感觉体验更好些。非常深的研究并没有，这里记录下最常用的一些用法。
【Android -- Material Design】TextInputLayout 和 TextInputEditText 的基本使用
Kevin Learn Android
07-19 9641
MaterialDesign 设计风格之 TextInputLayout 控件。
TextInputLayout使用详解
yechaoa
12-02 3209
TextInputLayout 基础样式、错误提示、字数限制等等效果图： 布局文件 <android.support.design.widget.TextInputLayout android:id="@+id/til_name" android:layout_width="0dp" android:layout_height="wrap_c
Android Material Design 系列之 TextInputLayout 使用详解
一名互联网时代苟且偷生的 Android码农
06-23 1万+
前言 本文是 Material Design 系列第四篇：TextInputLayout 主要是作为 EditText 的容器，从而为 EditText 生成一个浮动的 Label，当用户点击 EditText 的时候，EditText 中的 hint 字符串会自动移到 EditText 的左上角。 TextInputLayout 的简单使用，是 Google 推出的整个 Material Design 库的一个缩影：Google 将 UI 视觉效果设计得华丽且流畅，同时代码封装更为优雅，开发者只需要在 l
Android Material 常用组件详解（二）—— TextInputLayout 使用详解
weixin_42046829的博客
11-26 2494
介绍 TextInputLayout 主要是作为 EditText 的容器，从而为 EditText 生成一个浮动的 Label，当用户点击 EditText 的时候，EditText 中的 hint 字符串会自动移到 EditText 的左上角。 TextInputLayout 使用详解 1、基本使用 布局文件中只需要在 EditText 外层包裹一层 TextInputLayout 布局即可 <com.google.android.material.textfield.TextInputLayo
《HTML5开发精要与实例详解》配套源码
01-31
此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔，内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点，几乎每个知识点都将配一个精心...
TextInputLayout 和 TextInputEditText 的简单介绍以及使用
weixin_33905756的博客
07-17 110
TextInputLayout 和 TextInputEditText 是属于 design 包里面的控件 呐，就是这个：compile 'com.android.support:design:26.0.0-alpha1' 这两者要结合使用，其实只用 TextInputLayout ，然后TextInputEditText 用EditText 替换好像也可以。 下面来看一个示例代码咯 ...
Android Design Support Library（一）：FloatingActionButton、TextInputLayout、TextInputEditText简单用法
朱磊的博客
06-07 1万+
Android Design Support Library（一）：FloatingActionButton、TextInputLayout、TextInputEditText简单用法
Android之增强文本框(TextInputEditText)
Wdani的博客
04-20 3455
效果图: xml代码: activity_text_input_layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andr...
TextInputEditText用法
yhy123456q的博客
01-23 7380
前言: Material Design推出了一种优秀的文本输入框形式——当用户点击空内容的文本输入框时，原本位于输入框内的提示语会经由一个动画浮动至输入框上方，文本颜色同时变成强调色，明确显示此时该组件获得焦点 为了让开发者更加方便地实现这种效果Google推出了TextInputLayout组件,里面放置一个EditText或者TextInputEditText,可以轻松实现
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值