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

Question

我想自定义我的 searchview 编辑文本，当我点击 searchview 图标时，它会扩展为像这张图片

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

问题：

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>

Answer 1

虽然我不清楚您的具体要求是什么，但我想指出一件事。 对于将样式应用于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>

你可以修改你的drawable并去掉填充和大小，因为你在布局中使用wrap_content

<?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>