TextInputLayout 为 Material 文本字段提供了实现。我们只需要使用 TextInputEditText！首先，导入新的 material components 依赖。同时，在你的 Activity 中设置 MaterialComponent 主题。

implementation 'com.google.android.material:material:1.1.0-alpha09'

默认情况下，输入文本字段具有填充背景以吸引用户注意力。现在让我们创建一个默认的文本字段：

 <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box(default)">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

</com.google.android.material.textfield.TextInputLayout>

在接下来的几个部分中，我们将以不同的方式自定义文本字段。

标准和密集文本字段

文本字段有两种高度变体：

• Standard - 如果没有其他设置，则默认使用此变体。
• Dense - @style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense

密集文本字段的高度略短一些。

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box(default)">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box dense"
            app:boxBackgroundColor="#20D81B60">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

默认使用 FilledBox.Standard 样式，app:boxBackgroundColor 用于设置填充框颜色。屏幕上的效果如下所示：

轮廓框文本字段

在 TextInputLayout 上应用以下样式即可获得轮廓外观的文本字段：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

与 FilledBox 类似，它也有两种高度变体 - Standard 和 Dense。要设置圆角半径，使用以下属性：

• boxCornerRadiusTopStart
• boxCornerRadiusTopEnd
• boxCornerRadiusBottomStart
• boxCornerRadiusBottomEnd

boxStrokeColor 用于设置轮廓的描边颜色。效果如下所示：

末尾图标模式

接下来，让我们设置末尾图标模式。这些基本上是设置在文本字段右侧的图标。目前内置可用的三种图标类型是：

• password_toggle
• clear_text
• custom

上述属性不言自明。我们可以使用 endIconTint 属性为这些图标设置自己的图标着色。对于自定义图标，我们使用 endIconDrawable 属性。

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Enter password"
            app:endIconMode="password_toggle">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Enter password"
            app:endIconMode="password_toggle"
            app:endIconTint="@color/colorAccent">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Clear text"
            app:endIconMode="clear_text"
            app:endIconTint="@color/colorPrimaryDark">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Custom end icon"
            app:endIconCheckable="true"
            android:id="@+id/custom_end_icon"
            app:endIconDrawable="@android:drawable/ic_input_add"
            app:endIconMode="custom"
            app:endIconTint="@color/colorPrimaryDark">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

屏幕上的效果如下所示：

对于自定义图标，我们可以使用 setEndIconOnClickListener 回调来监听点击事件并执行相应操作。

形状文本字段

ShapeAppearance 是一个强大的样式。它允许我们自定义文本字段的形状。我们有两个内置形状 - cut 和 round。

<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
    </style>

    <style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

在 shapeAppearance 属性中设置上述样式，结果如下 -

这就总结了 Material Components Text Fields 的内容。在下面的源代码中，你将找到所有上述概念。

AndroidMaterialTextFields

Github 项目链接