关闭

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

标签: Android
412人阅读 评论(0) 收藏 举报
分类:
【源】Android Design Support Library使用详解——TextInputLayout与TextInputEditText - 博客频道 - CSDN.NET

http://blog.csdn.net/maosidiaoxian/article/details/52217057

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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

显示错误消息

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

    ViewParent parent = editText.getParent();
    if (parent instanceof TextInputLayout) {
        ((TextInputLayout)parent).setError(message);
    }
    editText.setError(message);
  • 1
  • 2
  • 3
  • 4
  • 5

错误消息会直接显示在编辑框下面,并且不像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);
            }
        });
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

统计输入字数

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">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

counterOverflow定义:

    <style name="counterOverflow">
        <item name="android:textColor">@color/red</item>
    </style>
  • 1
  • 2
  • 3

我们可以只配置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;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

TextInputLayout使用以及自定义颜色

继CoordinatorLayout之后,继续研究 material design 的相关控件TextInputLayout,下面是效果图: 1.gradle 配置 compile ‘com.and...
  • android_freshman
  • android_freshman
  • 2016-04-12 20:05
  • 9073

Materials Design修改TextInputLayout的label字体颜色和下划线的状态颜色

1、修改label的字体颜色,使用反射的方法  public static void changeTextInputLayoutLabelColor(TextInputLayout layout...
  • u012670497
  • u012670497
  • 2016-04-26 12:05
  • 3441

TextInputLayout使用以及EditText自己实现监听

TextInputLayout介绍: 首先呢,TextInputLayout是什么?TextInputLayout是一个能够把EditText包裹在当中的一个布局,当输入文字时,它可以把Hint文字飘...
  • Zadarrien_China
  • Zadarrien_China
  • 2016-08-11 14:11
  • 1408

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

TextInputLayout在谷歌的Material Design中,文本输入是这样表现的:当用户点击输入框想要输入文字时,如果输入框是空的,那么它的提示文字(hint)就会变小并且同时移动到输入框...
  • maosidiaoxian
  • maosidiaoxian
  • 2016-08-16 09:28
  • 4706

Android Design Support Library(一):FloatingActionButton、TextInputLayout、TextInputEditText简单用法

Android Design Support Library(一):FloatingActionButton、TextInputLayout、TextInputEditText简单用法
  • Zzz_Zzz_Z
  • Zzz_Zzz_Z
  • 2016-06-07 17:23
  • 9179

Android进阶系列--Design Support Library使用详解(Snackbar,TextInputLayout,TabLayout,NavigationView...)

Material Design 设计风格非常受欢迎,那么支持其效果的Design Support Library(Android 2.1  API  level 7及其以上)库又有哪些控件呢。主要包括...
  • sw5131899
  • sw5131899
  • 2017-01-04 12:38
  • 1930

Android Design Support Library--TextInputLayout的使用

本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 引言Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的An...
  • Wei_Smile
  • Wei_Smile
  • 2016-04-30 00:22
  • 11472

Android Design Support Library(2)- TextInputLayout的使用

这篇文章介绍下Android Design Support Library中的TextInputLayout的使用,如果你还不知道怎么使用这个Design Library请参考 http://blog...
  • leejizhou
  • leejizhou
  • 2016-01-11 00:10
  • 2132

Android学习之Design Support Library中TextInputLayout的使用

今天学习了一个Android Design Support Library 中的TextInputLayout控件,感觉还不错,较之以往的Editetxt,多了几分灵活性,使用也很简单,故此给大家推荐...
  • qq_16131393
  • qq_16131393
  • 2016-04-02 17:38
  • 2005

Android Design Support Library使用详解——Snackbar

Google在2015 I/O大会上,给我们带来了更加详细的Material Design规范,同时也引入了Android Design Support Library,为我们提供了基于Materia...
  • maosidiaoxian
  • maosidiaoxian
  • 2016-08-03 09:27
  • 3164
    个人资料
    • 访问:6971次
    • 积分:205
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:11篇
    • 译文:0篇
    • 评论:0条
    最新评论