在本教程中，我们将使用新的"材料设计组件库"实现"文本字段"。
我们已经在这里实现了TextInputLayout。

材质文本字段

TextInputLayout提供了Material文本字段的实现。
我们只需要使用TextInputEditText！首先，首先要导入新的材料组件依赖性。
另外，在"活动"中设置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>

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

标准和密集文本字段

文本字段具有两种类型的高度变体：

• 标准–如果没有其他内容，则默认使用此选项。

• 密集-@ 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"用于设置填充框的颜色。

这是在屏幕上的外观：

Android材质文本字段密集标准填充框

大纲框文本字段

在TextInputLayout上应用以下样式以获取概述的外观文本字段：

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

与FilledBox相似，它也具有两个高度变体-标准和密集。
要设置拐角半径，请使用以下属性：

• boxCornerRadiusTopStart
• boxCornerRadiusTopEnd
• boxCornerRadiusBottomStart
• boxCornerRadiusBottomEnd

boxStrokeColor用于设置轮廓的笔触颜色。

外观如下：

Android Material Text Field概述框

结束图标模式

继续前进，现在让我们设置结束图标模式。
这些基本上是设置在文本字段右侧的图标。
当前，内置的三种图标类型是：

• 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>

屏幕上的外观如下：

Android材质文本字段结束图标

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

异形文本字段

ShapeAppearance是一种强大的样式。
它使我们可以自定义文本字段的形状。
我们有两种内置形状–切割和圆形。

<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属性中设置上述样式