前言

源码传送门 https://github.com/xiehui999/fuseProgram

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

A0089CC8-BA1E-47BB-9FA7-81CC2C6FD827.png

添加依赖

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

使用

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

          <LinearLayout
            android:id="@+id/account_login_form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <android.support.design.widget.TextInputLayout
                android:id="@+id/accountinput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_account"
                >

            <EditText
                android: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.TextInputLayout
                android:id="@+id/passwordinput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_password"
                >

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"/>

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

            <Button
                android: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 logic
        Pattern 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 logic
        return password.length() > 6;
    }

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

53047FA0-8B93-4CD4-BBA6-340062C6D9F9.png

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

mAccountView.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(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下划线样式

3DDB1AA3-9C4B-4BA0-ADB4-ADDD130433FD.png

默认情况下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() {
            @Override
            public 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);//输入至少两个字符才会提示