带圆角的 TextInputLayout

Posted 2023-02-22

【中文标题】带圆角的 TextInputLayout

【英文标题】：TextInputLayout with rounded courners

【发布时间】：2020-12-30 05:50:30

【问题描述】：

如何为登录表单制作圆角？这是我的代码：

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/editLoginWrapper"
        android:layout_
        android:layout_
        android:layout_below="@+id/appTitle"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="18dp">

        <com.google.android.material.textfield.TextInputEditText    
      android:id="@+id/editLogin"
            android:layout_
            android:layout_
            android:background="#FFFFFF"
            android:backgroundTint="#FFFFFF"
            android:hint="@string/login_hint"
            android:inputType="text"
            android:textColor="#000000"
            android:padding="7dp"
android:textColorLink="#FFFFFF" />

尝试添加：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:endIconMode="password_toggle"
        app:boxCornerRadiusBottomEnd="8dp"
        app:boxCornerRadiusTopEnd="8dp"
        app:boxCornerRadiusBottomStart="8dp"
        app:boxCornerRadiusTopStart="8dp"

如here 所述，但它不会产生任何效果 - 角不会变圆。怎么了？

【问题讨论】：

您可以在 textinputedittext 或布局上使用自定义背景。只需创建带角的自定义矩形形状。如果你需要一些代码，我可以写它

@JohnyDeph 为什么要在默认组件支持属性实现圆角的情况下使用自定义背景？

【参考方案1】：

删除TextInputEditText 中的android:background="#FFFFFF" 和android:backgroundTint="#FFFFFF"。

用途：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/editLoginWrapper"
    android:layout_
    android:layout_
    android:layout_below="@+id/appTitle"
    android:layout_marginBottom="8dp"
    android:hint="Login"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:endIconMode="password_toggle"
    app:boxCornerRadiusBottomEnd="8dp"
    app:boxCornerRadiusTopEnd="8dp"
    app:boxCornerRadiusBottomStart="8dp"
    app:boxCornerRadiusTopStart="8dp"
    android:layout_marginTop="18dp">

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/editLogin"
    android:layout_
    android:layout_
    android:inputType="text"
    android:textColor="#000000"
    android:padding="7dp"
    android:textColorLink="#FFFFFF" />

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

您也可以使用shapeAppearanceOverlay 属性来代替声明所有角：

<com.google.android.material.textfield.TextInputLayout
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.rounded"

与：

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

【参考方案2】：

我为您的案例制作了一个示例 Activity xml。这对我来说很好。让我知道这是否是您要找的东西。

activity_main.xml

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/editLoginWrapper"
    android:layout_
    android:layout_
    android:layout_margin="8dp"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:boxCornerRadiusBottomEnd="8dp"
    app:boxCornerRadiusTopEnd="8dp"
    app:boxCornerRadiusBottomStart="8dp"
    app:boxCornerRadiusTopStart="8dp">

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/editLogin"
    android:layout_
    android:layout_
    android:hint="Name"
    android:background="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:inputType="text"
    android:textColor="#000000"
    android:padding="7dp"
    android:textColorLink="#FFFFFF" />
</com.google.android.material.textfield.TextInputLayout>

看起来是这样的：