android - 如何同时做填充和大纲TextInputLayout android？

Question

我使用过<com.google.android.material.textfield.TextInputLayout，但我也会接受其他选项或库

预期结果：

专注： 不专注 ：

标签： androidandroid-layoutmaterial-designandroid-custom-viewmaterial-components-android

Answer 1

您可以使用继承自 TextInputEditText 的自定义 TextInputLayout 样式Widget.MaterialComponents.TextInputLayout.FilledBox和自定义背景选择器来实现此目的。

在 xml 中创建 TextInputLayout，如下所示：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/emailTextInputLayout"
    style="@style/MyTextInputLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/emailTextInputEditText"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/edit_text_background"
       android:hint="Email"
       android:importantForAutofill="no"
       android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>

where@style/MyTextInputLayoutStyle是一个继承自Widget.MaterialComponents.TextInputLayout.FilledBox如下的自定义样式：

<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
   <item name="boxBackgroundColor">@android:color/transparent</item>
   <item name="boxStrokeWidth">0dp</item>
   <item name="boxStrokeWidthFocused">0dp</item>
   <item name="hintTextColor">#7d8b9f</item>
</style>

并且@drawable/edit_text_background是一个可绘制的选择器，用于根据默认和聚焦状态更改背景，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#f0f5fa"/>
            <stroke android:width="2dp" android:color="#b5c3f6"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#f0f5fa"/>
            <stroke android:width="0dp" android:color="#b5c3f6"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

结果将如下所示：