前言

源码传送门

在 Material Design出现之前，如果我们想写一个登陆界面是不是一般都写两组TextView,EditText及一个Button，如果你想在账号和密码后面加一个计数的功能，又需要加控件并且要自己实现计数，或者在密码框后面加个类似眼睛的密码显示开关，或者你想加一个账号或者密码输入无效或者错误的提醒，一般是显示一个Toast或者使用EditText的setError设置，不过体验并不是太好，等等这些麻烦的的处理在Material Design TextInputLayout出现后得到了极大改善，我们可以做最少的事达到最好的效果，今天的这篇文章就是通过一个登陆界面来学习TextInputLayout的API重要方法及其使用。先来一张效果图

添加依赖

TextInputLayout是在Material Design中的，所以我们需要在gradle 文件配置

dependencies {compile 'com.android.support:appcompat-v7:24.2.0'compile 'com.android.support:design:24.2.0'
}

使用

在TextInputLayout官方文档API中描述它是一种新的继承自LinearLayout的布局，使用时只能包含一个EditText或其子类的控件，该布局可以通过设置hint和Error显示浮动标签。接下我们看看布局文件

          <LinearLayoutandroid:id="@+id/account_login_form"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><android.support.design.widget.TextInputLayoutandroid:id="@+id/accountinput"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/prompt_account"><EditTextandroid:id="@+id/account"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""android:inputType="phone"android:singleLine="true"/></android.support.design.widget.TextInputLayout><android.support.design.widget.TextInputLayoutandroid:id="@+id/passwordinput"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/prompt_password"><EditTextandroid:id="@+id/password"android:layout_width="match_parent"android:layout_height="wrap_content"android:singleLine="true"/></android.support.design.widget.TextInputLayout><Buttonandroid:id="@+id/account_sign_in_button"style="?android:textAppearanceSmall"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:background="@drawable/login_btn"android:textColor="@color/btninvalid"android:text="@string/action_sign_in"android:textStyle="bold"/></LinearLayout>

使用其实很简单，只需要一个TextInputLayout（需要全路径）容器并在其中加一个EditText(或子类)，需要注意的是一个TextInputLayout有且只能对应一个EditText。在TextInputLayout加入android:hint=”账号”就可以显示一个浮动标签了，效果图如上，还可以通过下面代码将浮动标签关闭，如果关闭的话，设置hint也就没有效果了，默认是开启的。

app:hintEnabled="false"

对于android:hint=”账号”属性在TextInputLayout或者在EditText中设置都可以达到我们浮动标签的效果，但是不能在两者中同时使用设置hint，当两者同时使用时没有获取焦点时都会显示hint(两个hint重叠显示)，获取焦点时TextInputLayout设置的hint会成为悬浮标签，但是此时EditText设置的hint不会消失，有输入内容时才会消失，具体原因可以自己阅读源码查看，代码不多，很容易看出来。对于浮动标签显示隐藏切换有一个过渡动画，可以通过 app:hintAnimationEnabled=”boolean”设置。

如果我们此时想在账号那一栏后面加个字数统计，例如一般情况我们的账号是固定位数的，如果使用手机号作为我们的登录账号，此时我们加一个统计输入长度可以提示用户当然也可以超过位数时限制其输入，我们只需要在TextInputLayout加入

app:counterEnabled="true"

默认是关闭的，当然我们可以设置一个输入的最大长度，此处设置11.

app:counterMaxLength="11"

当我们设置输入的最大技术长度11时并不是到达11后不能再输入计数，而是会以一种颜色提示用户强调超过设置长度。

TextInputLayout提供了设置错误提醒的功能，在此篇文章中我们用手机号及密码至少6位做判断，

   if (TextUtils.isEmpty(account)||!isAccountValid(account)) {accountinput.setError(getString(R.string.error_invalid_account));}if (TextUtils.isEmpty(password)||!isPasswordValid(password)) {passwordinput.setError(getString(R.string.error_invalid_password));}private boolean isAccountValid(String name) {//TODO: Replace this with your own logicPattern pattern= Pattern.compile("^(13[0-9]|14[5|7]|15\\d|17[6|7]|18[\\d])\\d{8}$");return pattern.matcher(name).matches();}private boolean isPasswordValid(String password) {//TODO: Replace this with your own logicreturn password.length() > 6;}

当我们输入不符合规则，设置错误，显示效果如下，

对于设置错误，可以通过app:errorEnabled=”boolean”或者代码accountinput.setEnabled(boolean);将其打开或者关闭，当通过accountinput.setError()设置错误时源码中默认调用setEnabled（true）打开，无需自己再次调用，还有一个注意的地方设置后不会自动取消，需要自己调用accountinput.setError(null);取消错误提示。例如在上面图示提示错误后，我们在编辑该EditText时需要取消错误提示，那么我们可以通过addTextChangedListener监听，代码如下

 mAccountView.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void afterTextChanged(Editable s) {if(accountinput.getError()!=null){accountinput.setError(null);}}});

当我们编辑时回调执行，我们通过getError获取设置的错误信息，如果设置的有内容则返回设置的字符，默认为null。

对于输入密码的空间我们通过TextInputLayout中EditText 的android:inputType=”textPassword”设置输入密码，此时我们可以在右侧看到一个眼睛的密码开关实现将密码显示或隐藏。如果我们不想显示这个眼睛图标可以在TextInputLayout中加入

app:passwordToggleEnabled="false"

此时就看不到眼睛的图标，密码也不在隐藏，当我们想将眼睛的图标设置为我们自己设计的图标时，可以通过下面代码设置

app:passwordToggleDrawable="@drawable/common_full_open_on_phone"

我们还可以通过passwordToggleTint给图标设置着色并且通过passwordToggleTintMode设置对应模式，达到更好看的效果。
是不是很简单，这些功能要在之前布局肯定需要一大堆代码的，而现在很简单，只要几行代码。

自定义EditText下划线样式

默认情况下EditText的下划线是灰色的，当获取焦点时颜色是colorAccent，如上图，如果我们想自定义，可以给TextInputLayout加一个theme，如下代码

android:theme="@style/customLineColor"

customLineColor样式为colorControlNormal为没有获取焦点时的颜色，colorControlActivated为获取焦点时的颜色，这样就可以设置我们想要的颜色了。

    <style name="customLineColor" parent="Theme.AppCompat.Light"><item name="colorControlNormal">@color/colorAccent</item><item name="colorControlActivated">@color/drawerTextColor</item></style>

自定义浮动标签

默认情况下浮动标签的颜色也是colorAccent，我们可以通过hintTextAppearance设置浮动标签字体样式，如
app:hintTextAppearance=”@style/hintAppearance”，

    <style name="hintAppearance" parent="TextAppearance.AppCompat"><item name="android:textSize">14sp</item><item name="android:textColor">@color/colorPrimary</item></style>

自定义错误提示信息

app:errorTextAppearance=”@style/errorAppearance”

    <style name="errorAppearance" parent="TextAppearance.AppCompat"><item name="android:textSize">14sp</item><item name="android:textColor">@color/red</item></style>

自定义超出计数最大长度样式

app:counterOverflowTextAppearance=”@style/counterOverflowTextAppearance”

    <style name="counterOverflowTextAppearance" parent="TextAppearance.AppCompat"><item name="android:textSize">14sp</item><item name="android:textColor">@color/red</item></style>

监控虚拟键盘

通过上面的介绍，我们将TextInputLayout的使用及常用的设置都已经都介绍了，既然文章名字是登录界面，下面简单介绍一下其他一些比较多登录界面的一些实现。如当焦点在账户上，我们输入完成后直接点击虚拟键盘上的下一项时焦点直接跳到密码项，密码输入完成，直接可以点击虚拟键盘的确定就可以登录，该怎么实现呢。如下
在账号的EditText中加入

                android:imeActionId="@+id/password"android:imeOptions="actionNext"

在密码的EditText中加入

                android:imeActionId="@+id/account_sign_in_button"android:imeOptions="actionDone"

  mPasswordView.setOnEditorActionListener(new TextView.OnEditorActionListener() {@Overridepublic boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {if ( id == EditorInfo.IME_ACTION_DONE) {InputMethodManager inputMethodManager=(InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);//inputMethodManager.showSoftInput(getWindow().getDecorView(),InputMethodManager.SHOW_FORCED);//显示inputMethodManager.hideSoftInputFromWindow(getWindow().getDecorView().getWindowToken(),InputMethodManager.RESULT_UNCHANGED_SHOWN);//attemptLogin();startLogin();return true;}return false;}});

动态监测登录按钮

在支付宝中，当账户名或者密码有没填的项，登录按钮就是不可点击的，并通过样式给用户反馈是不是可以点击。这个也很简单，只需要给两个EditText设置addTextChangedListener监听，监听两个控件只有有没填项就将登录按钮设置为不可以点击，否则可以点击，核心代码

   if (account.equals("")||password.equals("")){mAccountSignInButton.setClickable(false);mAccountSignInButton.setTextColor(getResources().getColor(R.color.btninvalid));}else{mAccountSignInButton.setClickable(true);mAccountSignInButton.setTextColor(getResources().getColor(R.color.white));}

多账号自动提示

AutoCompleteTextView是EditText的子类，可以实现自动提示功能该控件有一个setAdapter方法，可以监测我们输入的内容在传入的适配器中有数据时会自动弹出下拉提示，在文章开始效果图已经展示，代码简单实现

    private  String[] accounts = { "18236593333", "13463373657", "18235784765", "18234637686" };ArrayAdapter<String> arrayAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,accounts);mAccountView.setAdapter(arrayAdapter);//输入至少两个字符才会提示

Ok,到这里本篇文章就结束了，有问题欢迎留言指出，Have a wonderful day .

从登陆界面学习TextInputLayout相关推荐

Android学习之登陆界面设计（一）前后期准备以及相关配置
Android学习之登陆界面设计(一)前后期准备以及相关配置前言成品成品样式成品特点工具系统配置手机配置 Android Studio 3.6.3 SDK 图片来源矢量图标库 Back ...
Android学习之登陆界面设计（二）基本界面设计
Android学习之登陆界面设计(二)基本界面设计前提绘图样式 - drawable bg_login_btn_submit.xml bg_login_panel_slide.xml bg_log ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(二）---登陆界面功能实现
打开 main.js,这个文件里定义的是整体小程序中会用到的一些功能 (即变量之类),也就是说,只要在这里出现的功能,其它页面可以直接拿来使用.可以把它理解为: 共享单车main ,大家都可以用. ...
Java学习笔记之三——Java用户登陆界面
好久没有总结这个月的学习了,先唠叨几句,这个月工作烂的一塌糊涂.跟老板吵架,然后辞职.今天是递交辞职申请的倒数第三天. Java用户登陆这块,主要还是学到了新的类: 1,边界布局:BorderLayo ...
c# 程序员学习android（2）登陆界面
上次说的是引导界面本次我们说说登陆界面 android的登陆界面很多.我想做一个类似于qq的但是头像是圆形的这种,下面是样图我想做成这样的,这里有两个技术难点,一个是这个圆形的图,一个是下面的用户名 ...
登陆界面(jsp)客户端验证
第二步:通过servlet处理 import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; ...
MATLAB飞机大战第二版,windows程序设计——飞机大战札记（单文档文件登陆界面）...
windows程序设计--飞机大战笔记(单文档文件登陆界面) //2015/07/21 /by xbw/// /环境 VS 2013 飞机大战做的差不多了,闲来无事加点高大上的东西,关于单文档的登陆界 ...
Android仿新浪微博弹出界面动画,Android仿新浪微博启动界面或登陆界面（1）
本文为大家分享了Android模仿新浪微博启动界面&登陆界面的具体实现代码,供大家参考,具体内容如下启动界面主要有两个功能: 1.加载启动动画 2.判断网络,有者直接进入登陆界面,否则去设 ...
win10如何改变登陆界面背景
==> 学习汇总(持续更新) ==> 从零搭建后端基础设施系列(一)-- 背景介绍因为win10没有直接可以修改登录背景的UI界面,所以只能修改UI代码. 1.新建一个txt文本,然后复 ...

从登陆界面学习TextInputLayout

前言