Material Design Library系列之TextInputLayout

        前言：TextInputLayout用来增强其下的EditText控件的功能，可以设置一些提醒信息等，使交互体验更好。

        接下来我们使用TextInputLayout来设计一个用户登录界面：

      1.新建工程并添加依赖：

compile 'com.android.support:design:23.4.0'

      2.修改activity_main.xml布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_horizontal_margin"
    android:orientation="vertical"
    android:background="#E3E3E3"
    tools:context="com.example.administrator.textinputlayout.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="Welcome"
            android:textSize="30sp"
            android:textColor="#333333"/>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <!-- 第一种方法采用TextInputLayout包裹EditText -->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/id_username_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/id_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:hint="Username"/>

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

        <!-- 第二种方法直接使用TextInputEditText代替EditText -->
        <android.support.design.widget.TextInputEditText
            android:id="@+id/id_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="numberPassword"
            android:hint="Password"/>

        <Button
            android:id="@+id/id_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="Login"/>
    </LinearLayout>

</LinearLayout>

这里主要是将整个布局分为RelativeLayout与LinearLayout两部分。

RelativeLayout中只有一个TextView用来显示“Welcome”。

LinearLayout中主要有三个控件，两个EditText和一个Button。但这里的两个EditText采用了两种不同的方式。

第一种使用TextInputLayout包裹了EditText，使其多了一些特性；第二种直接使用了TextInputEditText控件。

        显示效果如下：

       

     3.TextInputLayout下还有这些方法：

     getEditText() => 得到包含的EditText控件

     setHint() => 设置提示信息

     setError() => 设置错误信息并显示在EditText下方

     setErrorEnabled() => Error信息是否显示，该方法一定要在setError()之后执行

     4.在MainActivity下试试这些方法的效果：

import android.support.design.widget.TextInputEditText;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /**
         * TextInputLayout的一些方法：
         * getEditText() => 得到包含的EditText控件
         * setHint() => 设置提示信息
         * setError() => 设置错误信息并显示在EditText下方
         * setErrorEnabled() => Error信息是否显示，该方法一定要在setError()之后执行
         */
        TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.id_username_input);
        EditText userName = textInputLayout.getEditText();
        textInputLayout.setHint("请输入用户名");
        textInputLayout.setError("用户名输入错误！");
        textInputLayout.setErrorEnabled(true); //将错误信息显示或不显示

        TextInputEditText password = (TextInputEditText) findViewById(R.id.id_password);
        password.setHint("请输入密码");
        password.setError("密码输入错误！");
    }
}

       显示的效果是这样的：

       

源码地址：http://download.csdn.net/detail/chenhao0428/9547256