Material 设计中的 TextField UI Android

Question

我想做一个像下面这样的编辑文本。我不想使用 TableRow 来执行此操作。 Material Design TextField 有什么办法吗？我为 TextInputEditText 圆形设置了背景。

我的设计有些问题。

第一行我想在文本和图像之间增加 space。
第二行图文不在同一行
TextInputLayout 的背景不能改变。

请帮助我。提前致谢！

Answer 1

这就是使用 material design TextFiled

实现的方法

如果您想要更多 space 在文本和图像之间使用

android:drawablePadding="16dp"

设置文本重力

android:gravity="center"

无外线边框的圆角半径设置样式

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" Blockquote

如果要实现圆形验尸边框设置

 app:boxCornerRadiusBottomEnd="32dp"
 app:boxCornerRadiusBottomStart="32dp"
 app:boxCornerRadiusTopEnd="32dp"
 app:boxCornerRadiusTopStart="32dp"

下面是代码片段

  <com.google.android.material.textfield.TextInputLayout   
 style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="32dp"
                 android:layout_marginEnd="32dp"
                 app:boxCornerRadiusBottomEnd="32dp"
                 app:boxCornerRadiusBottomStart="32dp"
                 app:boxCornerRadiusTopEnd="32dp"
                 app:boxCornerRadiusTopStart="32dp"
                 app:boxStrokeColor="@color/color_red"
                 app:startIconDrawable="@drawable/ic_user">
 
                 <com.google.android.material.textfield.TextInputEditText
 
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:drawablePadding="16dp"
                     android:gravity="center"
                     android:hint="hint"
                     android:inputType="text" />
             </com.google.android.material.textfield.TextInputLayout>

Answer 2

您可以使用：

       <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:placeholderText="Name"
            app:startIconDrawable="@drawable/..."
            app:startIconTint="@color/...."
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.rounded"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

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

与：

<style name="ShapeAppearanceOverlay.App.rounded" parent="">
    <item name="cornerSize">50%</item>
</style>

Material 设计中的 TextField UI Android

TextField in Material Design UI Android

android

material-design

textfield

material-components-android

android-textinputlayout