【Android-UI】TextInputLayout的使用

因为要做登录的页面，参考了Android Design Support Library中的Material Design风格的控件，其中TextInputLayout正好可以满足需求。

TextInputLayout是一个用于在EditText上显示floating效果的辅助控件，其效果与扔物线的MaterialEditText效果相似。即当EditText没有输入时，hint文字显示在EditText内，当EditText获得焦点后hint文字变显示在输入框上方。

TextInputLayout的使用很简单，参考相关文档，简单的写出了布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.tablle.textinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center_horizontal"
            android:src="@mipmap/ic_launcher" />

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorEnabled="true"
            app:hintTextAppearance="@style/FloatingStyle">
            android:layout_marginTop="30dp">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="38dp"
                android:hint="UserName"
                android:inputType="number"
                android:padding="5dp"
                android:singleLine="true"
                android:textColorHint="@android:color/holo_blue_dark" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorEnabled="true"
            app:hintTextAppearance="@style/FloatingStyle">
            android:layout_marginTop="20dp">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="38dp"
                android:hint="PassWord"
                android:inputType="textEmailAddress"
                android:padding="5dp"
                android:singleLine="true"
                android:textColorHint="@android:color/holo_blue_dark" />
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>
</RelativeLayout>

运行后：

app:hintTextAppearance=”@style/FloatingStyle” 用于设置floating字体的样式。

<style name="FloatingStyle" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00eeff</item>
        <item name="android:textSize">12sp</item>
    </style>

注意：

1.在EditText中使用 android:textColorHint=”@android:color/white” 是没有效果的。textColorHint会根据theme的颜色来显示，所以这里只用通过设置activity的style中的textColorHint来更改hint的颜色。


2.连续调用setError()可能会出现问题，例如：

textInputLayout.setError(null);
textInputLayout.setError("error");

这个时候TextInputLayout不会显示错误信息。