Material Design UI中的TextField Android

Question

我想做一個像下面這樣的編輯文本。 我不想使用 TableRow 來做到這一點。 Material Design TextField有什么辦法嗎？ 我為 TextInputEditText 圓形設置背景。

我的設計有一些問題。

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

請幫我。 預先感謝！

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

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

下面是代碼片段

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