使用TextInputLayout创建一个登陆界面

在Google I/O 2015期间，安卓团队发布了一个崭新的兼容库，Design Support Library。它简直就是为解决这个问题而生的。本教程将演示如何使用Design Support Library中的TextInputLayout控件。

1. 实现 TextInputLayout

第一步: 创建一个新的项目

  在Android Studio中 选择New > New project 。填入所需的信息然后创建项目。我的例子的target api是17，这是Design Support Library支持的最小api版本。这个级别的api基本上已经支持绝大多数设备了。我把主activity命名为LoginActivity，它的布局文件命名为activity_login.xml。

第二步 :导入Support Library

要使用TextInputLayout控件，你需要导入两个Library。第一个是appcompat-v7,它确保material style可以向后兼容。第二个是Design Support Library。在你的build.gradle文件中，添加如下依赖：

1. dependencies {
2.     compile fileTree(dir: 'libs', include: ['*.jar'])
3.  
4.     compile 'com.android.support:design:22.2.0'
5.     compile 'com.android.support:appcompat-v7:22.2.0'
6. }

导完依赖记得同步哦!

第三步 :设计用户界面

它显示了一个“欢迎”文字（可以很容易替换成logo什么的）与两个EditText元素，一个是为用户名准备的，一个是为密码准备的。布局中还包含了一个触发登陆流程的按钮。背景颜色是扁平风格的灰色。

另一个重要的细节是记得正确设置EditText的inputType属性。第一个EditText的inputType应该设置成textEmail，而第二个应该设置成textPassword。下面是布局的样子：

 

1. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:background="#e3e3e3"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     android:padding="@dimen/activity_horizontal_margin"
7.     tools:context=".LoginActivity"
8.     android:orientation="vertical">
9.  
10.     <RelativeLayout
11.         android:layout_width="match_parent"
12.         android:layout_height="wrap_content"
13.         android:layout_weight="0.5"
14.         android:orientation="vertical">
15.  
16.         <TextView
17.             android:layout_width="match_parent"
18.             android:layout_height="wrap_content"
19.             android:layout_centerInParent="true"
20.             android:gravity="center"
21.             android:text="Welcome"
22.             android:textSize="30sp"
23.             android:textColor="#333333"/>
24.  
25.     </RelativeLayout>
26.  
27.  
28.     <LinearLayout
29.         android:layout_width="match_parent"
30.         android:layout_height="wrap_content"
31.         android:layout_weight="0.5"
32.         android:orientation="vertical">
33.  
34.         <EditText
35.             android:id="@+id/username"
36.             android:layout_width="match_parent"
37.             android:layout_height="wrap_content"
38.             android:inputType="textEmailAddress"/>
39.  
40.         <EditText
41.                 android:id="@+id/password"
42.                 android:layout_width="match_parent"
43.                 android:layout_height="wrap_content"
44.                 android:inputType="textPassword"/>
45.  
46.         <Button
47.             android:id="@+id/btn"
48.             android:layout_marginTop="4dp"
49.             android:layout_width="match_parent"
50.             android:layout_height="wrap_content"
51.             android:text="Login"/>
52.  
53.     </LinearLayout>
54.  
55. </LinearLayout>

你可能还想去掉app bar，也就是过去说的actionbar，编辑style.xml文件：

1. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
2. </style>

第四步: 使用TextInputLayout

TextInputLayout控件和LinearLayout完全一样，它只是一个容器。跟ScrollView一样，TextInputLayout只接受一个子元素。子元素需要是一个EditText元素

1. <android.support.design.widget.TextInputLayout
2.     android:id="@+id/usernameWrapper"
3.     android:layout_width="match_parent"
4.     android:layout_height="wrap_content">
5.  
6.     <EditText
7.         android:id="@+id/username"
8.         android:layout_width="match_parent"
9.         android:layout_height="wrap_content"
10.         android:inputType="textEmailAddress"
11.         android:hint="Username"/>
12.  
13. </android.support.design.widget.TextInputLayout>

一个单一的EditText 在输入文字的时候会隐藏hint，而被包含在TextInputLayout中的EditText则会让hint变成一个在EditText上方的浮动标签。同时还包括一个漂亮的material动画

第五步: 设置 Hints

下面是setContentView方法，初始化对theTextInputLayout视图的引用。

1. final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
2. final TextInputLayout passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper);

要让浮动标签动起来，你只需设置一个hint，使用setHint方法：

1. usernameWrapper.setHint("Username");
2. passwordWrapper.setHint("Password");

然后你就完成了。你的登陆界面现在很好的遵循了material设计规范。运行项目查看你的登陆界面。