英文:
How to add two trailing icons on Material3 Search Bar on Android?
问题
我想在我的Material 3搜索栏上添加两个尾随图标(其中一个是3个点的菜单图标)。
示例:
来源:GitHub
以及这个:
来源: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:
Source: GitHub
and this:
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:
<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">
<!-- Search suggestions/results go here (ScrollView, RecyclerView, etc.). -->
</com.google.android.material.search.SearchView>
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
<?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>
Layout file:
<com.google.android.material.search.SearchBar
android:id="@+id/search_bar"
android:hint="@string/search"
app:menu="@menu/searchbar_menu" />
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论