Material Design UI Android中的TextField答案

【问题标题】：TextField in Material Design UI AndroidMaterial Design UI Android中的TextField
【发布时间】：2021-04-16 03:27:48
【问题描述】：

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

我的设计有问题。

第一行我想在文本和图像之间留出更多空间。
第二行图片和文字不在同一行。
TextInputLayout 的背景不能改变。

请帮助我。提前致谢！

【问题讨论】：

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

【解决方案1】：

你可以使用：

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

【讨论】：

【解决方案2】：

这是使用材料设计 TextFiled 实现的方法

如果您希望文本和图片之间有更多空间，请使用

android:drawablePadding="16dp"

设置文字重力

android:gravity="center"

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

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" 块引用

如果要实现圆角边框设置

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

下面是代码sn-p

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

【讨论】：