Android Material Design之TextInputLayout

1.TextInputLayout是什么？

首先看一下Google注释原文：

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

这是一个包装了当用户在输入文本时，将提示的信息显示为浮动标签的布局。

需要注意的是，类似于ScrollView，它只能有一个子控件。这里专门设计了一个TextInputEditText来配合它使用。

The {@link TextInputEditText} class is provided to be used as a child of this layout. Using
TextInputEditText allows TextInputLayout greater control over the visual aspects of any
text input

提供了TextInputEditText类，作为该布局的子元素。使用TextInputEditText允许TextInputLayout更好地
对输入的文本在视觉方面的控制。

其中，TextInputEditText继承自EditText

public class TextInputEditText extends AppCompatEditText
public class AppCompatEditText extends EditText

当时使用EditText也是可以的，因为关于TextInputLayout的解释中已经说了，它接收一个EditText作为子控件。

直白的讲，它的出现解决了原本的EditText存在的一些问题，例如当用户输入的时候，Hint信息就看不到了。如果用户忘了提示信息的内容，而不知道输入什么的时候，我们今天的主角就派上用场了。

下面来愉快地使用它吧。

2.TextInputLayout的使用：

想要使用它，直接在xml中写就好了，跟一般的控件没有什么区别。直接看一下下面的例子：

 <android.support.design.widget.TextInputLayout
        android:id="@+id/til_user_pwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:errorEnabled="true"
        app:errorTextAppearance="@style/text_input_layout_error"
        app:hintTextAppearance="@style/text_input_layout_hint"
        app:layout_constraintTop_toBottomOf="@+id/til_user_name">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_user_pwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="密码"
            android:inputType="text"
            android:textCursorDrawable="@drawable/color_cursor"
            android:textSize="16sp"
            />
    </android.support.design.widget.TextInputLayout>

这里主要看一下几个属性：

app:errorEnabled="true"

是否可以显示错误信息

app:errorTextAppearance="@style/text_input_layout_error"

错误信息的显示外观

app:hintTextAppearance="@style/text_input_layout_hint"

提示信息的显示外观

在style.xml中写上面两个style，比如：

<style name="text_input_layout_error">
      <item name="android:textColor">#ed4e40</item>
      <item name="android:textSize">12sp</item>
</style>

之前提到了显示错误信息，那应该如何显示呢？
比如我们有一个登陆按钮，点击登录的时候(onClick)，我们可以先验证用户名是否为空或者密码是否符合规范：

 /**
     * 验证用户名
     * @param userName
     * @return
     */
    private boolean nameValidation(String userName){
        if(StringUtils.isEmpty(account)){
            //mUserName 是你自己代码中代表用户名的TextInputLayout
            showError(mUserName,"用户名不能为空");
            return false;
        }
        return true;
    }

简单地验证一下密码：

 /**
     * 验证密码
     * @param password
     * @return
     */
    private boolean passwordValidation(String password) {
        if (StringUtils.isEmpty(password)) {
            showError(mUserPwd,"密码不能为空");
            return false;
        }

        if (password.length() < 6 || password.length() > 16) {
            showError(mUserPwd,"密码长度为6-16位");
            return false;
        }

        return true;
    }

接下来是我们的showError方法：

 /**
     * 显示错误提示，并获取焦点
     * @param textInputLayout
     * @param error
     */
    private void showError(TextInputLayout textInputLayout, String error){
        textInputLayout.setError(error);
        textInputLayout.getEditText().setFocusable(true);
        textInputLayout.getEditText().setFocusableInTouchMode(true);
        textInputLayout.getEditText().requestFocus();
    }

当两个验证方法都通过了，就可以发起登录的网络请求了

3.最后再加一点东西吧：
（一）关于密码框这里密码与明文切换的开关使用：

Password visibility toggling is also supported via the
{@link #setPasswordVisibilityToggleEnabled(boolean)}.
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.

密码可见性切换也支持通过在代码中 TextInputLayout.setPasswordVisibilityToggleEnabled(boolean)来设置
如果启用，当EditText的输入类型设置为显示密码时，则会显示一个按钮以在显示为明文的密码之间切换。

当然在xml中设置也可以：
首先EditText的inputType要设置为密码类型，例如：

 android:inputType="textPassword"

或者：

android:inputType="numberPassword"

或者：

 android:inputType="textWebPassword"

接着在TextInputLayout中设置passwordToggleEnabled属性：

app:passwordToggleEnabled="true"

2（二）小提示：
原文：

<strong>Note:</strong> The actual view hierarchy present under TextInputLayout is not guaranteed to match the view hierarchy as written in XML. As a result,calls to getParent() on children of the TextInputLayout -- such as an TextInputEditText --may not return the TextInputLayout itself, but rather an intermediate View. If you need to access a View directly, set an {@code android:id} and use {@link View#findViewById(int)}.

在TextInputLayout下的实际视图层次结构不保证与用XML编写的视图层次结构相匹配。
因此，在TextInputLayout(比如TextInputEditText)的子节点上调用getParent()可能不会返回TextInputLayout本身，而是返回一个中间视图。
如果您需要直接访问TextInputLayout，请在xml中给它设置一个id并在代码中通过findviewbyid直接获得它

（三）使用感悟：

因为我们在xml中设置TextInputLayout中的高度是wrap_content的，如果需要显示错误信息的前提下，会导致它的布局高度发生改变，由此产生的问题需要注意一下，但不是特别严重，在实际使用中关注一下就好。
（需要显示错误信息的前提下，如果设置固定高度，如果高度不够，可能会使得下面的错误提示显示不出来）

Android Material Design之TextInputLayout

猜你喜欢