如何在不使用 librery 的情况下在状态、焦点和正常状态下应用自定义形状的 TextInputLayout

Question

我想设计一个自定义圆角 TextInputLayout 正如我展示的活动 TextInputLayout 的示例图像below

我在xml中的代码是

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

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/mobile_number"
                android:inputType="number"
                android:fontFamily="@font/montserrat_regular"
                android:maxLength="10" />
</com.google.android.material.textfield.TextInputLayout>

它给了我一个默认的 TextInputLayout。我怎样才能得到我的看法。请帮帮我。 在样式声明中出错。

Answer 1

只需使用Widget.MaterialComponents.TextInputLayout.OutlinedBox 样式并应用自定义形状：

    <com.google.android.material.textfield.TextInputLayout
        style="@style/OutlinedRoundedBox"
        ...>

与：

 <style name="OutlinedRoundedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="shapeAppearanceOverlay">
      @style/ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded
    </item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">32dp</item>
  </style>

Answer 2

如果您想在不使用第三个库的情况下实现设计。只需创建这样的样式：

<style name="OutlinedRoundBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxBackgroundMode">outline</item>
    <item name="boxCornerRadiusBottomEnd">32dp</item>
    <item name="boxCornerRadiusBottomStart">32dp</item>
    <item name="boxCornerRadiusTopEnd">32dp</item>
    <item name="boxCornerRadiusTopStart">32dp</item>
    <item name="android:paddingLeft">20dp</item>
</style>