如何在Android上的Material3搜索栏上添加两个尾随图标?

huangapple go评论69阅读模式
英文:

How to add two trailing icons on Material3 Search Bar on Android?

问题

我想在我的Material 3搜索栏上添加两个尾随图标(其中一个是3个点的菜单图标)。

示例:
如何在Android上的Material3搜索栏上添加两个尾随图标?来源:GitHub

以及这个:
如何在Android上的Material3搜索栏上添加两个尾随图标?来源:Material 3

但我找不到任何方法来实现这个,也找不到Google的存储库或Material的任何文档中关于此的任何信息。在它们的指南中,应该有一种快速简便的方法来实现这个,不是吗?

我目前的代码成功显示菜单如下:

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.search.SearchBar
        android:id="@+id/searchBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/search_here"
        app:menu="@menu/explorer_menu"
        app:navigationIcon="@drawable/ic_logo" />
</com.google.android.material.appbar.AppBarLayout>

<com.google.android.material.search.SearchView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:closeIcon="@drawable/ic_close"
    app:layout_anchor="@id/searchBar">
    <!-- 搜索建议/结果放在这里(ScrollView、RecyclerView等)。 -->
</com.google.android.material.search.SearchView>

有什么想法吗?

英文:

I want to add two trailing icons (one of them being the 3 dots menu icon) on my Material 3 Search Bar.

Examples:
如何在Android上的Material3搜索栏上添加两个尾随图标?Source: GitHub

and this:
如何在Android上的Material3搜索栏上添加两个尾随图标?
Source: Material 3

But I can't find any way to do this nor any documentation anywhere in Google's repos or Material's regarding this. It's in their guides, it should had a quick and easy way to do it, no?

My code right now which successfully shows the menu is this:

   &lt;com.google.android.material.appbar.AppBarLayout
        android:id=&quot;@+id/appBar&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;wrap_content&quot;&gt;

        &lt;com.google.android.material.search.SearchBar
            android:id=&quot;@+id/searchBar&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:hint=&quot;@string/search_here&quot;
            app:menu=&quot;@menu/explorer_menu&quot;
            app:navigationIcon=&quot;@drawable/ic_logo&quot; /&gt;
    &lt;/com.google.android.material.appbar.AppBarLayout&gt;

    &lt;com.google.android.material.search.SearchView
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;
        app:closeIcon=&quot;@drawable/ic_close&quot;
        app:layout_anchor=&quot;@id/searchBar&quot;&gt;
        &lt;!-- Search suggestions/results go here (ScrollView, RecyclerView, etc.). --&gt;
    &lt;/com.google.android.material.search.SearchView&gt;

Any ideas?

答案1

得分: 3

要在搜索栏中添加尾随图标,您需要为其创建菜单。SearchBar组件是工具栏的子组件,因此您可以为其指定菜单值。
SearchBar没有特殊的“trailing-icon”字段,Google必须在其M3实现文档中添加该字段。

这是我项目中的示例:

searchbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/menu_sort"
        android:icon="@drawable/sort"
        android:title="@string/sort"
        app:showAsAction="always"/>
    <item android:id="@+id/menu_trend"
        android:icon="@drawable/trending"
        android:title="@string/trend"
        app:showAsAction="always"/>
    <item android:id="@+id/menu_options"
        android:icon="@drawable/options"
        android:title="@string/options"
        app:showAsAction="always"/>

</menu>

布局文件:

<com.google.android.material.search.SearchBar
                        android:id="@+id/search_bar"
                        android:hint="@string/search"
                        app:menu="@menu/searchbar_menu" />

结果是,您会得到一个搜索栏,总是显示三个图标在末尾。

为了更好地理解Android中的菜单,我建议您查看Android开发者网站上的文档。

英文:

In order to add trailing icons to search bar, you have to create menu for it. The SearchBar component is a child of a Toolbar, so you can specify menu value for it.
The SearchBar does not have special "trailing-icon" field and google has to add it in their M3 implementation documentation.

Here's the example from my project:

searchbar_menu.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;menu xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;&gt;
    &lt;item android:id=&quot;@+id/menu_sort&quot;
        android:icon=&quot;@drawable/sort&quot;
        android:title=&quot;@string/sort&quot;
        app:showAsAction=&quot;always&quot;/&gt;
    &lt;item android:id=&quot;@+id/menu_trend&quot;
        android:icon=&quot;@drawable/trending&quot;
        android:title=&quot;@string/trend&quot;
        app:showAsAction=&quot;always&quot;/&gt;
    &lt;item android:id=&quot;@+id/menu_options&quot;
        android:icon=&quot;@drawable/options&quot;
        android:title=&quot;@string/options&quot;
        app:showAsAction=&quot;always&quot;/&gt;

&lt;/menu&gt;

Layout file:

&lt;com.google.android.material.search.SearchBar
                        android:id=&quot;@+id/search_bar&quot;
                        android:hint=&quot;@string/search&quot;
                        app:menu=&quot;@menu/searchbar_menu&quot; /&gt;

As a result, you get a search bar with always showing three icons at the end.

In order to better understand menu in android, I'd suggest you to look for the documentation in android-developers website.

huangapple
  • 本文由 发表于 2023年6月19日 22:58:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76507850.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定