如何正确地设计com.google.android.material.textfield.TextInputLayout的样式？

Question

我们有一个品牌的应用程序，有许多不同的风格，最近切换到材料组件。从那时起，所有的TextInputLayouts突然都有了这个丑陋的灰色背景

​

​

我在https://material.io/develop/android/components/text-input-layout/上阅读了谷歌文档，发现直接在boxBackgroundColor布局中使用时，它工作得很好，如下所示：

        <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/edit_gsm_groupname_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ** app:boxBackgroundColor="?attr/theme_backColor" **
        android:layout_alignBottom="@+id/edit_gsm_icon"
        android:layout_toEndOf="@+id/edit_gsm_icon">

由于应用程序的大小和使用的输入域的数量，在我们的每个布局中都放入这一行并不是一个真正可行的选择。

所以我试着通过样式来解决它，我们已经有几十个活跃的。

我在AlertTheme和AppTheme中尝试过，如下所示：

    <style name="baseAppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ... lots of settings...

    <!--Custom animations-->
    <item name="colorPrimaryDark">?attr/theme_branding_01</item>
    <item name="colorPrimary">?attr/theme_branding_02</item>
    <item name="colorPrimaryLight">?attr/theme_branding_05</item>
    <item name="colorAccent">?attr/theme_branding_03</item>

    <!--Control coloring-->
    <item name="android:colorBackground">?attr/theme_branding_14</item>
    <item name="android:colorForeground">?attr/theme_branding_11</item>
    <item name="colorControlNormal">?attr/theme_branding_11</item>
    <item name="colorControlActivated">?attr/colorAccent</item>
    <item name="android:textColor">@color/base_active_inactive_text_colors</item>
    <item name="android:editTextColor">?attr/theme_branding_11</item>
    <item name="android:textColorHint">?attr/colorAccent</item>
    ** <item name="boxBackgroundColor">?attr/theme_branding_14</item>  **


    <!--System properties-->
    <item name="android:windowBackground">?attr/theme_branding_14</item>
    <item name="android:textColorPrimary">?attr/theme_branding_14</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">?attr/colorPrimaryDark</item>
    <item name="materialAlertDialogTheme">@style/baseAlertDialogTheme</item>
</style>

<style name="baseAlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">

    <!--Control coloring-->
    <item name="android:windowBackground">?attr/theme_branding_14</item>
    <item name="android:colorBackground">?attr/theme_branding_14</item>
    <item name="android:colorForeground">?attr/theme_branding_11</item>
    <item name="colorControlNormal">?attr/theme_branding_11</item>
    <item name="colorControlActivated">?attr/colorAccent</item>
    <item name="android:textColor">?attr/theme_branding_11</item>
    <item name="android:editTextColor">?attr/theme_branding_11</item>
    <item name="android:textColorHint">?attr/colorAccent</item>
    ** <item name="boxBackgroundColor">?attr/theme_branding_14</item>  **

    <!--Alert dialog colors-->
    <item name="android:textColorPrimary">?attr/theme_branding_11</item>
    <item name="android:background">?attr/theme_branding_14</item>

    <!--Alert button colors-->
    ... button styles ...
    <item name="android:buttonBarPositiveButtonStyle">@style/baseAlertDialogButton</item>

</style>

但不知何故，当通过样式设置时，boxBackgroundColor似乎没有效果。我发现这个问题Material TextInputLayout styles are not working说，这在预览模式下不起作用，但我试图将其推送到设备上-它在运行时也不起作用。

一个很好的解决方案--我怎样才能摆脱灰色的背景？它应该具有与旧TextInputLayout相同的正常背景颜色。

提前谢谢，干杯，格里斯

Answer 1

你不能在应用程序主题中使用boxBackgroundColor。

相反，您可以使用textInputStyle属性全局定义应用程序主题中的TextInputLayout所使用的样式：

<style name="baseAppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ...
    <item name="textInputStyle">@style/myFilledBox</item>
</style>

通过以下方式：

<style name="myFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
   <item name="boxBackgroundColor">@color/filled_background_color_selector</item>
</style>

Answer 2

即使我遇到了类似的问题，我也以下面描述的方式使用了textinputlayout，这很好用。

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/enterEmailTextLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/enteredEmailEditText"
            style="@style/Nunito_Sans_Roman"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:backgroundTint="@color/white_100"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
          />
    </com.google.android.material.textfield.TextInputLayout>

如果它适合您的需求，您可以尝试使用它。希望这能有所帮助