如何自定义搜索视图编辑文本? [英] how to customize searchview edittext?

问题描述

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

I want to customize my searchview edittext which expanded when I click on searchview icon to be like this image

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

And I tried the custom style to do that but I got this result in this image

问题:

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

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

How I got this result?

我定义了 searchViewStyle

I define 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>

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

I define searchview like this in my fragment layout

<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 定义了一个自定义的可绘制背景

I define a custom drawable background for 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 属性，如下所示.我相信，通过一些反复试验，您的其余要求应该很容易得到.谢谢.

While I do not clearly understand what your requirements are exactly, I would like to point out one thing though. For Applying a style to a SearchView we have to use the theme attribute, your code seems okay, maybe your changes are not being applied for now I believe. So try using the android:theme attribute for your style as follows. The rest of your requirements should easily come by to you with some trial and error I believe. Thanks.

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

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

Here is how I would recommend you to update your style to get as close as possible to your design.

<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 并去掉内边距和大小

And you can modify your drawable and get rid of the padding and size since you are using wrap_content in your layout

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

这篇关于如何自定义搜索视图编辑文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！