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

我正在尝试创建自定义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>

结果是：

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

其中

mtrl\u形状\u角大小\u小\u组件=4dp

尝试以下方法

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

您是否尝试过设计Hi@Raghunandan，谢谢您的回复。我尝试过使用材质组件样式进行造型，但无法使左下角和右下角成为“圆形”，这是不正确的。不要在

TextInputLayout

中使用

android:background

。使用

boxBackgroundColor

。但它不起作用。我在中的xml中尝试了不显示任何颜色@gabrielemariotti，它起作用。同时查看Hi@Gabriele Mariotti，感谢您的快速回复。请您指导我将左下角和右下角做成“圆形”形状。@abhishekkumargupta在这种情况下最好的方法是使用

小部件.MaterialComponents.TextInputLayout.OutlinedBox

样式。使用默认（

Widget.MaterialComponents.TextInputLayout.Filled Box

）可以实现，但底部的线条可能有问题。使用Filled Box样式，我可以使用app:boxCornerRadiusBottomEnd和app:boxCornerRadiusBottomStart创建圆角，但正如您在评论中提到的，目前正在与底部的线条斗争。@abhishekkumargupta我建议您使用不同的设计（标准填充或标准轮廓）。有一个解决办法，但我不喜欢这个解决方案。您可以添加

app:boxStrokeWidth=“0dp”

和

app:boxStrokeColor=“YourActivityBackgroundColor”

。这样，底部的线条就不可见了。@abhishekkumargupta我刚刚用这两个例子更新了答案。

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

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

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