Android 使用 TextInputLayout 创建登陆页面
Android TextInputLayout 是一个强大的控件，它可以帮助开发者创建 Material Design 风格的登陆页面。在这篇教程中，我们将详细介绍如何使用 TextInputLayout 创建一个简单的登陆页面。
让我们了解一下 TextInputLayout 的优点。TextInputLayout 可以自动地将 EditText 的 hint 文本浮动在 EditText 的上方，这样可以提供一个更加美观的用户界面。同时，它还可以帮助开发者轻松地实现 Material Design 风格的登陆页面。
现在，让我们开始创建一个简单的登陆页面。创建一个新的 Android 项目，并选择目标 API 为 17，这是 Design Support Library 支持的最小 API 版本。创建完成后，我们就可以开始设计用户界面了。
在设计用户界面时，我们需要添加两个 EditText 元素，一个用于用户名，一个用于密码。我们还需要添加一个触发登陆流程的按钮。背景颜色我们可以设置成扁平风格的灰色。
在布局文件中，我们需要正确地设置 EditText 的 inputType 属性。第一个 EditText 的 inputType 应该设置成 textEmail，而第二个应该设置成 textPassword。
下面是布局文件的代码：
```
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#e3e3e3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/activity_horizontal_margin"
tools:context=".LoginActivity"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<com.android.support.design.widget.TextInputLayout
android:id="@+id/til_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmail"
android:hint="用户名" />
</com.android.support.design.widget.TextInputLayout>
<com.android.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="密码" />
</com.android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="登陆" />
</RelativeLayout>
</LinearLayout>
```
在上面的代码中，我们使用了 TextInputLayout 控件来包围 EditText 元素，并为其添加了 hint 文本。同时，我们还添加了一个触发登陆流程的按钮。
让我们运行应用程序，并查看结果。我们可以看到， TextInputLayout 控件已经自动地将 hint 文本浮动在 EditText 的上方，这样提供了一个更加美观的用户界面。
使用 TextInputLayout 控件可以轻松地创建 Material Design 风格的登陆页面，而不需要编写大量的代码。这使得开发者可以更加专注于业务逻辑的实现，而不是浪费时间在用户界面的设计上。
