开发者社区> 浩码农> 正文

Android Design Support Library使用详解——TextInputLayout与TextInputEditText

简介: TextInputLayout 在谷歌的Material Design中,文本输入是这样表现的:当用户点击输入框想要输入文字时,如果输入框是空的,那么它的提示文字(hint)就会变小并且同时移动到输入框的上方;如果文字不为空,则上方一直浮着这个提示文字(见https://material.google.com/components/text-fields.html#text-fields-input )。
+关注继续查看

TextInputLayout

在谷歌的Material Design中,文本输入是这样表现的:当用户点击输入框想要输入文字时,如果输入框是空的,那么它的提示文字(hint)就会变小并且同时移动到输入框的上方;如果文字不为空,则上方一直浮着这个提示文字(见https://material.google.com/components/text-fields.html#text-fields-input )。并且在I/O大会的视频上,我们可以看到整个的动画过程很优美流畅。在design support library中,TextInputLayout就是提供了它的实现。

使用

通过TextInputLayout来实现上述这种效果很简单,就是在布局代码中每一个EditText外面再套上一个TextInputLayout就可以了,代码如下。注意一个TextInputLayout只能套一个EditText,否则会抛异常。

<android.support.design.widget.TextInputLayout
    android:id="@+id/mobile_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/image_title">
    <EditText
        android:id="@+id/mobile"
        style="@style/InputEditText.Login"
        android:drawableLeft="@drawable/icon_small_phone"
        android:hint="@string/hint_mobile"
        android:inputType="number"
        android:maxLength="11"/>
</android.support.design.widget.TextInputLayout>

编译运行,效果出现。
这里写图片描述

显示错误消息

除了显示提示文字,TextInputLayout还提供了显示错误消息的接口。显示的方法也很简单,以前我们是通过TextView的setError(String)来显示,现在改为调用TextInputLayout的setError(String)就可以了。代码如下:

    ViewParent parent = editText.getParent();
    if (parent instanceof TextInputLayout) {
        ((TextInputLayout)parent).setError(message);
    }
    editText.setError(message);

错误消息会直接显示在编辑框下面,并且不像EditText那样必须要获得焦点才能显示出来。如图所示:
这里写图片描述

除了显示错误消息之外,我们还需要清空错误消息,毕竟不能在用户改正之后还一直显示它吧。清空错误消息很简单,只需要调用它的API inputLayout.setErrorEnabled(false);即可。比如我们可以在用户修改EditText时调用它:

    ViewParent viewParent = inputText.getParent();
    if (viewParent != null && viewParent instanceof TextInputLayout) {
        final TextInputLayout inputLayout = (TextInputLayout) viewParent;
        inputText.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                inputLayout.setErrorEnabled(false);
            }
        });
    }

统计输入字数

TextInputLayout还封装了输入框的输入字数的统计。这一特性在一些字数受限的功能中可是大有用处,比如发个微博提交个用户反馈,通常都会限定一个最大字数,因而需要显示给用户已经输入了多少个字。
统计字数默认是不开启的,我们可以在属性里配置:

<android.support.design.widget.TextInputLayout
    android:id="@+id/password_layout"
    app:counterEnabled="true"
    app:counterTextAppearance="@style/counter"
    app:counterMaxLength="8"
    app:counterOverflowTextAppearance="@style/counterOverflow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/mobile_layout"
    android:layout_marginBottom="@dimen/margin_double">

counterOverflow定义:

    <style name="counterOverflow">
        <item name="android:textColor">@color/red</item>
    </style>

我们可以只配置counterEnabled,这样的话它就只会显示输入的字数。而counterTextAppearance属性则用于配置计数文本外观。counterMaxLength用于配置最大字数,当配置了它时,就必须再配置counterOverflowTextAppearance,否则当用户输入的字数超过这个最大字数时会引发异常。
下图是我们配置后的运行效果:
这里写图片描述

其他属性与方法请参数API文档,这里不再赘述。

TextInputEditText

在上一节中,我们可以看到TextInputLayout与EditText在搭配使用当中,对于所需的功能都处理得非常好,那么,为什么还要有TextInputEditText呢?
原因很简单,TextInputEditText是为了填坑的。
当我们的界面处于横屏时,点击一个EditText,默认情况下不是在它下面弹出键盘,而是进入到输入法的一个全屏的输入界面(通过配置android:imeOptions="flagNoExtractUi"可以设为直接在当前界面显示)。
一般在我们要弹出输入法时,它会与对应的View建立一个连接,用于两者之间的互动,比如获取输入提示hint,然后在刚才所述的情况中显示到输入法的输入界面上。但是当我们为EditText外面套上一个TextInputLayout时,TextInputLayout会拿到EditText的hint显示出来并把EditText本身的hint设为空。这样如果跳到输入法的输入界面上,就显示不了我们所设置的提示文本了。所以TextInputEditText重写了EditText的onCreateInputConnection(EditorInfo outAttrs)方法,把父容器的hint内容传给EditorInfo,下面就是它唯一做的事情:

    @Override
    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
        final InputConnection ic = super.onCreateInputConnection(outAttrs);
        if (ic != null && outAttrs.hintText == null) {
            // If we don't have a hint and our parent is a TextInputLayout, use it's hint for the
            // EditorInfo. This allows us to display a hint in 'extract mode'.
            final ViewParent parent = getParent();
            if (parent instanceof TextInputLayout) {
                outAttrs.hintText = ((TextInputLayout) parent).getHint();
            }
        }
        return ic;
    }

所以当我们使用了TextInputLayout时,就需要把我们的EditText换成TextInputEditText。
下面两张图分别是使用EditText及TextInputEditText的运行效果:
使用EditText,没有提示文本
使用TextInputEditText有提示文本

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用IntelliJ IDEA开发SpringMVC网站(四)用户管理
原文:使用IntelliJ IDEA开发SpringMVC网站(四)用户管理 摘要 通过对用户表的管理,更加深入地讲解SpringMVC的操作。 目录[-] 文章已针对IDEA 15做了一定的更新,部分更新较为重要,请重新阅读文章并下载最新源码。
1034 0
使用Keras进行深度学习:(三)使用text-CNN处理自然语言(上)
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习、深度学习的知识! 上一篇文章中一直围绕着CNN处理图像数据进行讲解,而CNN除了处理图像数据之外,还适用于文本分类。
1551 0
解决sitemesh3装饰页面不能使用freemarker标签问题
如题,这个问题其实在sitemesh2中已经很好的解决了,不过在sitemesh3中可能没有解决,所以要自己写代码解决了,下面我先讲下sitemesh2是如何解决的: sitemesh-freemarker com.
992 0
android library 使用switch 问题
android library 使用switch 问题
12 0
Android 使用 WebView 实现 Hybrid 的思路导引
Android 使用 WebView 实现 Hybrid 的思路导引 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1227 0
Android Native禁止使用系统私有库详解
解读Android Native对于系统私有库的限制,老版本的黑科技代码在N版本之后都可能导致APP崩溃。
2034 0
+关注
浩码农
开源社区技术专家
222
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载