TextInputLayout框颜色

Question

使用下面的xml元素，我可以正确地将TextInputLayout框涂成白色，但那只是在单击它之后。初始颜色仍为默认颜色。

     <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintTextColor="@color/colorWhite"
        app:boxStrokeColor="@color/colorWhite"
        app:boxBackgroundColor="@color/colorPrimaryLight">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionSearch"
            android:inputType="textAutoComplete"
            android:outlineAmbientShadowColor="@color/colorWhite"
            android:textColor="@color/colorWhite"
            android:maxLines="1" />

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

有没有一种方法可以使框和提示文本的颜色不仅在实际给予TextInput焦点后才适用？

Answer 1

在res/color/text_input_box_STROK.xml中创建Selector，如下所示：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fcc" android:state_focused="true"/>
    <item android:color="#cfc" android:state_hovered="true"/>
    <item android:color="#ccf"/>
</selector>

然后在你的styles.xml中放入：

<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
    <item name="boxStrokeWidth">2dp</item>
</style>

最后，在TextInputLayout中使用该样式

<com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextColor="@color/colorWhite"
    app:boxStrokeColor="@color/colorWhite"
    app:boxBackgroundColor="@color/colorPrimaryLight">
    ........
</com.google.android.material.textfield.TextInputLayout>

在color.xml中添加text_input_box_color

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>

有关更多细节，请查看here

Answer 2

要更改TextInputLayout中的颜色，只需使用如下内容：

  <style name="OutlinedBoxColor" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <!-- border color in OutlinedBox
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>

    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">@color/singleColor</item>
    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/.....</item>
  </style>

当TextInputLayout被聚焦和未被聚焦时的结果

​

您应该对这些颜色使用颜色选择器：

对于boxStrokeColor

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

对于android:textColorHint

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>