Android:如何创建 TextInputLayout 的自定义 UI

Question

我正在尝试创建自定义 TextInputLayout。如何在自定义 TextInputLayout 下方创建？​​

我们将不胜感激任何帮助或指导。

Answer 1

只需使用 TextInputLayout由 Material Components Library 提供.

类似于:

    <com.google.android.material.textfield.TextInputLayout
       app:boxBackgroundColor="@color/...."    
       app:boxStrokeColor="@color/..."
       android:hint="..."
       ..>

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

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

关于圆角:

FilledBox (Widget.MaterialComponents.TextInputLayout.FilledBox)

默认行为是一个圆角框(4dp) 和底部的矩形框 (0dp)，如上图所示。
如果您想要一个圆角框，我建议您使用 OutlinedBox 样式:

 <com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    ..>

结果是:

否则你可以强制使用这样的解决方法(我不喜欢它，因为它违反了 Material 准则):

<com.google.android.material.textfield.TextInputLayout       
app:shapeAppearanceOverlay="@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox"
            app:boxStrokeWidth="0dp"
            app:boxStrokeColor="yourActivityBackgroundColor"
            ..>

app:shapeAppearanceOverlay 属性改变底角的形状:

  <style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox" parent="">
    <item name="cornerSizeBottomLeft">@dimen/mtrl_shape_corner_size_small_component</item>
    <item name="cornerSizeBottomRight">@dimen/mtrl_shape_corner_size_small_component</item>
  </style>

其中 mtrl_shape_corner_size_small_component=4dp