Android：如何创建 TextInputLayout 的自定义 UI答案

【问题标题】：Android: How to create custom UI of TextInputLayoutAndroid：如何创建 TextInputLayout 的自定义 UI
【发布时间】：2020-01-29 17:18:11
【问题描述】：

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

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

【问题讨论】：

你试过造型material.io/develop/android/components/text-input-layout
嗨@Raghunandan 感谢您的回复。我尝试使用 Material Components 样式进行样式设置，但无法将左下角和右下角设为“圆形”

标签： android android-textinputlayout material-components-android material-components

【解决方案1】：

只需使用Material Components Library提供的TextInputLayout即可。

类似：

    <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"
    ..>

结果是：

否则你可以强制使用这样的解决方法（我不喜欢它，因为它违反了材料指南）：

<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

【讨论】：

嗨@Gabriele Mariotti 感谢您的快速回复。你能指导我把左下角和右下角做成“圆形”吗？
@abhishekkumargupta 在这种情况下，最好的方法是使用Widget.MaterialComponents.TextInputLayout.OutlinedBox 样式。使用默认值 (Widget.MaterialComponents.TextInputLayout.FilledBox) 您可以实现它，但底部的行可能会出现一些问题。
使用 FilledBox 样式，我可以使用 app:boxCornerRadiusBottomEnd 和 app:boxCornerRadiusBottomStart 制作圆角，但正如您在评论中提到的那样，目前正在与底部的线作斗争。
@abhishekkumargupta 我建议您使用不同的设计（标准填充或标准轮廓）。有一个解决方法，但我不喜欢这个解决方案。您可以添加app:boxStrokeWidth="0dp"和app:boxStrokeColor="yourActivityBackgroudColor"。这样底部的线就看不见了。
@abhishekkumargupta 我刚刚用这两个例子更新了答案。

【解决方案2】：

尝试如下

  <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Main2Activity"
        android:orientation="vertical"
        android:background="#d4d4d4"
        android:weightSum="1">

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

          android:background="#FFFFFF"
          android:layout_margin="10dp"
          android:padding="10dp"
          >
          <com.google.android.material.textfield.TextInputEditText
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Aalina Rodgers"
              android:padding="10dp"/>
      </com.google.android.material.textfield.TextInputLayout>
        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="fullname"
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:padding="10dp"
            >
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Aalina Rodgers"
                android:padding="10dp"/>
        </com.google.android.material.textfield.TextInputLayout>
        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="fullname"
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:padding="10dp"
            >
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Aalina Rodgers"
                android:padding="10dp"/>
        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>

【讨论】：

不正确。不要在TextInputLayout 中使用android:background。使用boxBackgroundColor。
但它不起作用我在我的 xml 中尝试过没有显示任何颜色@GabrieleMariotti
它有效。还要检查doc