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

4,076 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第25天,点击查看活动详情

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

专注于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>

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>

注意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)
    }
}

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

image.png

方式二

不用上面那么麻烦,因为【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>
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search_view)
        setSupportActionBar(toolbarTwo)
    }

image.png

😜修改样式

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

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

image.png

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

😜可能的问题

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

android:focusable="true"

android:focusableInTouchMode="true"

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

😜开源项目

15.SearchView开源库1图1.png

github.com/lapism/sear…  start数:2.2k

15.SearchView开源库2图1.gif

github.com/MiguelCatal…  start数:3.8k

15.SearchView开源库3图1.gif

github.com/iammert/Mul…  start数:1.1k

15.SearchView开源库4图1.gif

github.com/sahildave/S…  start数:1.1k

📢作者:小空和小芝中的小空

📢转载说明-务必注明来源:芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。