Android Material Design--TextInputLayout

TextInputLayout

1. 简介

官网开篇

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.

Also supports showing an error via setErrorEnabled(boolean) and setError(CharSequence), and a character counter via setCounterEnabled(boolean).

Password visibility toggling is also supported via the setPasswordVisibilityToggleEnabled(boolean) API and related attribute. If enabled, a button is displayed to toggle between the password being displayed as plain-text or disguised, when your EditText is set to display a password.

Note: When using the password toggle functionality, the ‘end‘ compound drawable of the EditText will be overridden while the toggle is enabled. To ensure that any existing drawables are restored correctly, you should set those compound drawables relatively (start/end), opposed to absolutely (left/right).

大致意思:

将布局控件TextInputLayout套在编辑框TextInputEditText或EditText外,当用户编辑时会把指定的hint(无输入时的提示信息)内容上浮显示为标题,支持计数、错误及密码可见控制图标等属性的设置。

详细介绍和用使用案例建议前往官网浏览,毕竟越没有经过加工的信息越接近真相,毕竟写文章是为了自我总结和抛砖引玉,而不是写教程。

用户名和密码常见的输入样式有以下两种(其他还有很多):

    

而利用Material Design的TextInputLayout可以轻松地实现下面这种效果:

只需给TextInputLayout设置好hint属性,那么当其包含的TextInputEditText或EditText处于编辑状态时,hint内容会上浮作为标题显示,如图中的Username。

从图中还可以看到,分别对Username的最大字数限制,Password的是否可见属性进行了设置,其实Email同样设置了格式检测,下面就通过具体的代码来看看用TextInputLayout实现这些功能的便捷与高效。

2. 实例

项目代码放在Github上,感兴趣的朋友自行下载。

Username的布局代码:

 1 <android.support.design.widget.TextInputLayout
 2   android:id="@+id/til_username"
 3   style="@style/TextInputLayoutStyle"
 4   app:errorEnabled="true"
 5   app:counterEnabled="true"
 6   app:counterMaxLength="10"
 7   app:hintTextAppearance="@style/HintAppearance"
 8   app:errorTextAppearance="@style/TextErrorAppearance"
 9   app:counterOverflowTextAppearance="@style/HintErrorAppearance">
10
11   <android.support.design.widget.TextInputEditText
12     android:id="@+id/et_username"
13     android:hint="@string/username"
14     style="@style/EditTextStyle" />
15
16 </android.support.design.widget.TextInputLayout>

其中用到的五个style定义:

 1 <style name="TextInputLayoutStyle">
 2   <item name="android:layout_width">match_parent</item>
 3   <item name="android:layout_height">wrap_content</item>
 4   <item name="android:layout_marginTop">@dimen/edit_top_margin</item>
 5 </style>
 6
 7 <style name="EditTextStyle">
 8   <item name="android:layout_width">match_parent</item>
 9   <item name="android:layout_height">wrap_content</item>
10   <item name="android:textSize">@dimen/edit_content_size</item>
11   <item name="android:textColor">@color/colorEditContent</item>
12 </style>
13
14 <style name="HintAppearance" parent="TextAppearance.AppCompat">
15   <item name="android:textSize">@dimen/edit_hint_size</item>
16   <item name="android:textColor">@color/colorAccent</item>
17 </style>
18
19 <style name="HintErrorAppearance" parent="TextAppearance.AppCompat">
20   <item name="android:textSize">@dimen/edit_hint_size</item>
21   <item name="android:textColor">@color/colorHintError</item>
22   <item name="textColorError">@color/colorHintError</item>
23 </style>
24
25 <style name="TextErrorAppearance" parent="TextAppearance.AppCompat">
26   <item name="android:textSize">@dimen/edit_hint_size</item>
27   <item name="android:textColor">@color/colorTextError</item>
28   <item name="textColorError">@color/colorTextError</item>
29 </style>

首先看一下字数限制的文本样式设置:

1 app:counterEnabled="true"
2 app:counterMaxLength="10"
3 app:counterOverflowTextAppearance="@style/HintErrorAppearance"

Username设置了最大字数限制--10,当输入字数超过上限之后就会将hint标题显示为counterOverflowTextAppearance样式。

颜色设置给出截图,可以直观地看到代码对应的颜色:

colorTextError对应编辑框左下角的错误提示,colorHintError对应右下角的字数限制和左上角的hint标题。

从运行结果可以看出,设置了字数限制后,Design会自动在编辑框右下角显示最大字数和当前输入字数(随着输入情况实时变化)。当字数在限制范围内时,hint样式为hintTextAppearance;字数超过之后,hint样式为counterOverflowTextAppearance。当然,如果没有设置counterOverflowTextAppearance属性,Design一般会将错误文本显示为红色,至于不同设备不同主题会有些差别。

接下来看看编辑框左下角的错误提示是怎么设置的,布局代码:

1 app:errorEnabled="true"
2 app:errorTextAppearance="@style/TextErrorAppearance"

还需要在Java代码中指定显示的时机和文本:

 1 private TextInputLayout mTILUsername;
 2 private EditText mETUsername;
 3 ...
 4 mETUsername.addTextChangedListener(new TextWatcher() {
 5     @Override
 6     public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
 7
 8     @Override
 9     public void onTextChanged(CharSequence s, int start, int before, int count) {
10         if (s.length() > 10) {
11             mTILUsername.setErrorEnabled(true);
12             mTILUsername.setError("Username max length is 10.");
13         } else {
14             mTILUsername.setErrorEnabled(false);
15         }
16     }
17
18     @Override
19     public void afterTextChanged(Editable s) {}
20 });

给编辑框mETUsername设置了编辑状态改变监听器,参数为TextWatcher匿名类,实现onTextChanged方法。当字数超过限制之后将错误属性enable,同时设置错误提示内容;否则,就将错误属性disable。

测试后发现,布局代码中的app:errorEnabled="true"和Java中的mTILUsername.setErrorEnabled(true)是可以不设置的,调用setError方法就够了。

从截图中可以看出,编辑框下方那条线的颜色是跟随errorTextAppearance样式变化的,而不是counterOverflowTextAppearance。

再来看看邮箱格式的检测,这里是利用正则表达式,而且是比较基础的:

1 private static final Pattern EMAIL_PATTERN = Pattern.compile(
2             "\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*");
1 if (!EMAIL_PATTERN.matcher(s.toString().trim()).matches()) {
2     mTILEmail.setErrorEnabled(true);
3     mTILEmail.setError("Please input correct email.");
4 } else {
5     mTILEmail.setErrorEnabled(false);
6 }

matches方法返回false时表示输入内容不匹配邮箱格式,进而给出错误提示信息。

错误的情况上面已经给出了,正确的情况见下图:

密码编辑框右边带有一个类似眼睛的图标,这就是内容是否可见的开关。布局代码如下:

 1 <android.support.design.widget.TextInputLayout
 2     android:id="@+id/til_password"
 3     android:layout_below="@id/til_email"
 4     style="@style/TextInputLayoutStyle"
 5     app:errorEnabled="true"
 6     app:passwordToggleEnabled="true"
 7     app:hintTextAppearance="@style/HintAppearance"
 8     app:errorTextAppearance="@style/TextErrorAppearance">
 9
10     <android.support.design.widget.TextInputEditText
11         android:id="@+id/et_password"
12         android:hint="@string/password"
13         android:inputType="textPassword"
14         style="@style/EditTextStyle" />
15
16 </android.support.design.widget.TextInputLayout>
设置passwordToggleEnabled为true,inputType为textPassword,默认情况下输入内容是以点的形式显示。点击图标之后便会显示明文,再点一下又会显示密文,如此反复切换。明文形式如下:

3. 总结

上面通过例子简单地描述了TextInputLayout的基本用法,官网上的介绍还包含了其他的一些方法,能实现更多的效果。

时间: 2024-11-05 12:32:34

Android Material Design--TextInputLayout的相关文章

Android Material Design新UI控件使用大全 一

序言 自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们

Android Material Design 兼容库的使用

Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客:1.Android Material Design 兼容库的使用详解2.Android应用Design Support Library完全使用实例第一篇博客是这个兼容库的详细解析,我参考了里面的许多内容,第二篇是兼容库的大致介绍,如果你能把这两篇全部弄懂,我这篇也没有必要看了.说了这么多,开始正文吧

Android Material Design学习之RecyclerView代替 ListView

前言 # Android Material Design越来越流行,以前很常用的 ListView 现在也用RecyclerView代替了,实现原理还是相似的.笔者实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 源码地址(欢迎star) https://github.com/studychen/SeeNewsV2 本文链接 http://blog.csdn.net/never_cxb/article/details/50495505,转载请注明出处. 复习 L

Android Material Design带来的UI变革

谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点. 谷歌I/O 014开发者大会上宣布全新的设计语言"Material Design",适用于旗下所有平台,包括 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点." Material Design 初

Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

?? Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计 Android Ripple Effect波纹荡漾效果,是Android Material Design视觉设计引入的一种交互设计效果简言之:当点击某个view时候,view会出现像水波波纹一样的荡漾传播效果.在最新版的Android如Android 5.0或以上版本中默认具有该效果,但在低版本Android中没有,如果需要向下兼容低版本设备,则需要自己写代码实现,实现步骤: 第1步:

MaterialEditText——Android Material Design EditText控件

MaterialEditText是Android Material Design EditText控件.可以定制浮动标签.主要颜色.默认的错误颜色等. 随着 Material Design 的到来, AppCompat v21 中也提供了 Material Design 的控件外观支持,其中包括 EditText .但 AppCompat 中的 EditText 实在有点难用,因为它是通过 colorAccent 来自动为控件着色的,并没有提供设置颜色的api,因此需要通过为控件定制theme的

android Material design是什么

Material design概述: Material design是一套UI样式标准,应该会提供一些新的API这写API包含了以下五大模块内容,分别是: Material Theme New Widgets View Shadows Animations New Capabilities for Drawables 1.material新的主题样式. 主题的颜色.动画.反馈效果都可以自定义: 2.控件阴影. 在原来的X,Y的基础之上增加了Z轴的阴影控制,Z值大的控件将显示在上面. 3.Recy

Android Material Design(一)史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout.SwitchCompat.SnackBar.FloatingActionButton.Shadows.Ripples.TabLayout.RecyclerView.Card.NavigationView.BottomSheet.Palette控件. 转载请注明出处,谢谢!! http://blog.csdn.net/johnny901114/article/deta

android material design

谷歌2015 I/O大会上,发布了Android新版本,为了能使用 这些 material design 组件,需要去更新最新的SDK中的Extras支持库 Android Support Library Android Support Repository 下面是android studio sdk manager 相关安装的截图: 更新完之后,在build.gralde文件添加依赖: 基于matterial design的组件: 1. FloatingActionButton (浮动按钮)

Android Material Design系列之主题样式介绍说明

今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个项目时,系统自带了三个属性的颜色,现在就重点介绍这三个颜色属性的意义和作用.讲明白这个,留着以后讲别的用. 最常用的三个颜色属性 colorPrimary colorPrimaryDark colorAccent 这三个分别代表什么意思呢? colorPrimaryDark 是状态栏底色 colorPrimary 如果你不手动自己去修改t