如何自定义搜索视图编辑文本？

问题描述

我想自定义我的搜索视图编辑文本，当我点击搜索视图图标时，它会展开像这张图片

我尝试了自定义样式来做到这一点，但我在这张图片中得到了这个结果

问题：

1. edittext 开头有一个蓝色竖条，我需要将其删除并使其仅出现在搜索查询中，并且在查询文本之后我还想更改此竖条的颜色
2. 我需要添加一个带有特定填充的白色搜索图标，当前搜索查询结果屏幕中的白色图标会消失

我是如何得到这个结果的？

我定义了 searchViewStyle

   <style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
        <item name="searchIcon">@drawable/ic_baseline_dark_search_24</item>
        <item name="closeIcon">@null</item>
        <item name="goIcon">@drawable/ic_baseline_dark_search_24</item>
        <item name="commitIcon">@drawable/ic_baseline_dark_search_24</item>
        <item name="android:editTextColor">@color/white</item>
        <item name="android:textColorHint">@color/white</item>
        <item name="android:textColorHighlight">@color/red</item>
        <item name="queryBackground">@drawable/radius_drawable</item>
        <item name="searchHintIcon">@drawable/ic_baseline_search_24</item>
        <item name="queryHint">"search_hint"</item>
    </style>

我在片段布局中定义了这样的搜索视图

<androidx.appcompat.widget.SearchView
android:id="@+id/searchView"
style="@style/SearchViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">

</androidx.appcompat.widget.SearchView>

我为 searchview 定义了一个自定义的可绘制背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="18dp"
        />
    <solid
        android:color="#4F4F4F"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
</shape>

解决方法

虽然我不清楚您的要求究竟是什么，但我想指出一件事。 对于将样式应用于 SearchView 我们必须使用主题属性，您的代码似乎没问题，我相信您的更改目前尚未应用。因此，请尝试为您的样式使用 android:theme 属性，如下所示。我相信，通过一些反复试验，您的其余要求应该很容易得到。谢谢。

<androidx.appcompat.widget.SearchView
android:id="@+id/searchView"
android:theme="@style/SearchViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">

以下是我建议您更新风格以尽可能接近您的设计的方法。

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
        <item name="searchIcon">@drawable/ic_baseline_dark_search_24</item>
        <item name="queryBackground">@android:color/transparent</item>
        <item name="queryHint">"search_hint"</item>
        <item name="iconifiedByDefault">false</item>
        <item name="android:textColorHint">@color/white</item>
        <item name="android:background">@drawable/radius_drawable</item>
    </style>

由于您在布局中使用了 wrap_content，因此您可以修改 drawable 并去掉内边距和大小

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#4F4F4F" />
    <corners android:radius="18dp" />
</shape>