TextInputLayout 背景颜色主题介绍

效果展示

主题介绍

简介

TextInputLayout 是 Material Design 库中的一个控件，一般用于输入一个文本，同时提供了输入文本的框和标签两个部分。本主题针对 TextInputLayout 控件的背景颜色进行定制，使得输入框更加突出。

主题特点

背景颜色

原始的 TextInputLayout 控件的背景一般为白色，本主题将其变更为浅灰色，增加了控件的可见性和辨识度，提高用户体验。

光标颜色

将光标颜色的默认值改为深灰色，更符合浅灰色背景的搭配，使得光标更加显眼。

错误颜色

当输入内容不符合要求时，TextInputLayout 会自动提示错误信息，本主题将错误信息的颜色改成红色，更加醒目。

实现方式

本主题在 styles.xml 文件中定义了一个新的主题叫做 TextInputLayoutWithBackground，其中改变了 TextInputLayout 控件的背景颜色、光标颜色和错误信息颜色：

<style name="TextInputLayoutWithBackground" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:background">@drawable/text_input_layout_bg</item>
    <item name="android:textColorHint">@color/text_input_layout_hint_color</item>
    <item name="android:textColor">@color/text_input_layout_text_color</item>
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="boxBackgroundColor">#00FFFFFF</item>
    <item name="boxCornerRadiusBottomEnd">4dp</item>
    <item name="boxCornerRadiusBottomStart">4dp</item>
    <item name="boxCornerRadiusTopEnd">4dp</item>
    <item name="boxCornerRadiusTopStart">4dp</item>
    <item name="colorControlActivated">@color/text_input_layout_text_color</item>
    <item name="colorControlHighlight">@color/text_input_layout_text_color</item>
    <item name="colorControlNormal">#AAA9A9</item>
</style>

• android:background：修改控件的背景为自定义的 drawable 文件，具体实现方式如下所示。
• android:textColorHint：修改输入框的提示文字颜色为自定义颜色。
• android:textColor：修改输入框内文字颜色为自定义颜色。
• boxStrokeColor：修改输入框边框颜色为自定义颜色。
• boxStrokeWidth：修改输入框边框的宽度。
• boxBackgroundColor：修改输入框未获得焦点时的背景颜色为透明。
• boxCornerRadiusBottomEnd、boxCornerRadiusBottomStart、boxCornerRadiusTopEnd、boxCornerRadiusTopStart：设置输入框四个角的圆角半径。
• colorControlActivated：修改光标颜色为自定义颜色。
• colorControlHighlight：修改点击输入框时光标的颜色为自定义颜色。
• colorControlNormal：修改输入框前面图标的颜色。

同时，需要在 drawable 目录下创建一个 text_input_layout_bg.xml 文件，定义控件的背景，具体实现方式如下所示：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/text_input_layout_bg_color"/>
    <corners android:radius="4dp"/>
</shape>

该文件会将控件的背景设置成填充浅灰色，四个角设置成圆角矩形。

引用方式

在布局文件中引用此主题的方式如下所示：

<com.google.android.material.textfield.TextInputLayout
    ……
    style="@style/TextInputLayoutWithBackground">
    <com.google.android.material.textfield.TextInputEditText
        ……
        />
</com.google.android.material.textfield.TextInputLayout>

需要注意的是，这里引用的样式名称必须要与 styles.xml 中定义的样式名称相同，否则不会生效。

结尾

以上就是 TextInputLayout 背景颜色主题的介绍。这个主题相对来说在样式定制上并不是特别复杂，但它突出了 Material Design 控件的一个设计特性——灵活性，通过对不同控件的颜色等属性进行二次定制，可以有效提高应用界面的美观性以及用户体验。