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

Question

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

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

Answer 1

只需使用 TextInputLayout provided by the 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

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

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

Android: How to create custom UI of TextInputLayout

android

android-textinputlayout

material-components-android

material-components