Android修行手册 - 官方SearchView搭配Toolbar/样式/其他/开源项目

往期文章分享

• 点击跳转=>《导航贴》- Unity手册，系统实战学习
• 点击跳转=>《导航贴》- Android手册，重温移动开发

本文约6.6千字，新手阅读需要8分钟，复习需要3分钟 【收藏随时查阅不再迷路】

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣 ！！！
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎私我，交流群让学习不再孤单。

👉前提

这是小空坚持写的Android新手向系列，欢迎品尝。

大佬（√）

新手（√√√）

👉实践过程

😜搭配Toolbar

我们经常看到标题旁有个搜索，点击搜索后搜索框会覆盖标题，这通常是自定义View或者SearchView搭配Toolbar来实现的。通过menu进行设置的搜索的控件。会在Toolbar的右侧出现一个搜索的按钮（假装你听懂了）。

方式一

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@android:color/white" />
</RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12

Menu

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_searchview"
        android:title="写一个标题"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="always" />
</menu>
1
2
3
4
5
6
7
8

注意actionViewClass要看你项目使用 哪个SearchView，官方内置了好几个SearchView但是在不同的包下。

class SearchViewActivity : AppCompatActivity() {
    var mSearchView: SearchView? = null;
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search_view)
        setSupportActionBar(toolbar)
    }
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.my_menu, menu)
        val menuItem: MenuItem = menu!!.findItem(R.id.item_searchview)
        //通过MenuItem得到SearchView
        mSearchView = MenuItemCompat.getActionView(menuItem) as SearchView?
        mSearchView!!.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            override fun onQueryTextSubmit(query: String?): Boolean {
                Toast.makeText(this@SearchViewActivity, "点击搜索按钮时触发", Toast.LENGTH_SHORT).show()
                return false
            }
            override fun onQueryTextChange(newText: String?): Boolean {
                Toast.makeText(this@SearchViewActivity, "搜索内容改变时触发", Toast.LENGTH_SHORT).show()
                return false
            }
        })
        return super.onCreateOptionsMenu(menu)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

如果在android:showAsAction属性中加上collapseActionView属性，那么MenuItem的icon属性必须就要加上了，同时点开后的样式也不一样了，左侧会出现一个箭头，点击箭头退出搜索模式。

方式二

不用上面那么麻烦，因为【Toolbar】是ViewGroup，支持添加子View

布局

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbarTwo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@android:color/white">

        <androidx.appcompat.widget.SearchView
            android:id="@+id/activitySearchView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:background="@color/cardview_shadow_start_color"
            android:imeOptions="actionSearch"
            app:closeIcon="@drawable/icon_xinsui"
            app:iconifiedByDefault="true"
            app:queryHint="提示文本"
            app:searchIcon="@drawable/icon_xin" />
</androidx.appcompat.widget.Toolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search_view)
        setSupportActionBar(toolbarTwo)
    }
1
2
3
4
5

😜修改样式

通过源代码可知，SearchView根本就是个自定义view，而且她布局里面的控件都带有id，那么我们按照基本的查找控件就可以修改里面的样式啦。

除此之外还支持style中修改样式

<style name="Base.Widget.AppCompat.SearchView" parent="android:Widget">
        <item name="layout">@layout/abc_search_view</item>
        <item name="queryBackground">@drawable/abc_textfield_search_material</item>
        <item name="submitBackground">@drawable/abc_textfield_search_material</item>
        <item name="closeIcon">@drawable/abc_ic_clear_material</item>
        <item name="searchIcon">@drawable/abc_ic_search_api_material</item>
        <item name="searchHintIcon">@drawable/abc_ic_search_api_material</item>
        <item name="goIcon">@drawable/abc_ic_go_search_api_material</item>
        <item name="voiceIcon">@drawable/abc_ic_voice_search_api_material</item>
        <item name="commitIcon">@drawable/abc_ic_commit_search_api_mtrl_alpha</item>
        <item name="suggestionRowLayout">@layout/abc_search_dropdown_item_icons_2line</item>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

😜可能的问题

如果遇到自动获取焦点的问题，可以利用给父布局增加以下两个属性解决

android:focusable=“true”

android:focusableInTouchMode=“true”

但是当你点击SearchView获取焦点后，到别的activity再回来的时候，发现失效了，还是弹出键盘，则可以在生命周期onResum中给SearchView动态增加这俩属性。

😜开源项目

https://github.com/lapism/search start数：2.2k

https://github.com/MiguelCatalan/MaterialSearchView start数：3.8k

https://github.com/iammert/MultiSearchView start数：1.1k

https://github.com/sahildave/Search-View-Layout start数：1.1k

👉其他

📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。

温馨提示：点击下方卡片获取更多意想不到的资源。