为Xamarin.Forms的导航栏增加搜索功能

程序员文章站 2022-03-13 18:50:59

在使用navigationpage导航的时候, 我们可以给里面添加一些功能按钮, 如下所示:

    <contentpage.toolbaritems>
        <toolbaritem/>
        <toolbaritem/>
    </contentpage.toolbaritems>

但是如果需要给这个控件添加一些其他的控件的时候, 则无法满足我们的需求, 这个时候, 我们就需要使用页面渲染器(page renderer)。

真机效果演示:

为Xamarin.Forms的导航栏增加搜索功能

实现思路:

1.添加用于搜索通知的接口 : isearchpage
2.自定义搜索的渲染器 : searchpagerender
3.添加menu/item xml文件: mainmenu.xml
4.添加 nuget：plugin.currentactivity
5.给需要添加搜索功能的页面实现 (1)的接口
6.为自定义搜索渲染器添加支持该功能的页面
7.启动项初始化 : crosscurrentactivity.current.init(this, savedinstancestate)

添加搜索通知接口

    public interface isearchpage
    {
        void onsearchbartextchanged(string text);
    }

自定义渲染器

在android项目中创建 customrender文件夹定义 searchpagerender

为Xamarin.Forms的导航栏增加搜索功能

searchpagerender代码

     public class searchpagerender : pagerenderer
    {
        public searchpagerender(context context) : base(context)
        {

        }

        protected override void onattachedtowindow()
        {
            base.onattachedtowindow();

            if (element is isearchpage
                && element is page page
                && page.parent is navigationpage navigationpage)
            {
                //workaround to re-add the searchview when navigating back to an isearchpage, because xamarin.forms automatically removes it
                navigationpage.popped += handlenavigationpagepopped;
                navigationpage.poppedtoroot += handlenavigationpagepopped;
            }
        }

        //adding the searchbar in onsizechanged ensures the searchbar is re-added after the device is rotated, because xamarin.forms automatically removes it
        protected override void onsizechanged(int w, int h, int oldw, int oldh)
        {
            base.onsizechanged(w, h, oldw, oldh);

            if (element is isearchpage && element is page page && page.parent is navigationpage navigationpage && navigationpage.currentpage is isearchpage)
            {
                addsearchtotoolbar(page.title);
            }
        }

        protected override void dispose(bool disposing)
        {
            if (gettoolbar() is android.support.v7.widget.toolbar toolbar)
                toolbar.menu?.removeitem(resource.menu.mainmenu);

            base.dispose(disposing);
        }

        //workaround to re-add the searchview when navigating back to an isearchpage, because xamarin.forms automatically removes it
        void handlenavigationpagepopped(object sender, navigationeventargs e)
        {
            if (sender is navigationpage navigationpage
                && navigationpage.currentpage is isearchpage)
            {
                addsearchtotoolbar(navigationpage.currentpage.title);
            }
        }

        void addsearchtotoolbar(string pagetitle)
        {
            if (gettoolbar() is android.support.v7.widget.toolbar toolbar
            && toolbar.menu?.finditem(resource.id.action_search)?.actionview?.
            javacast<android.support.v7.widget.searchview>().gettype()
            != typeof(android.support.v7.widget.searchview))
            {
                toolbar.title = pagetitle;
                toolbar.inflatemenu(resource.menu.mainmenu);

                if (toolbar.menu?.finditem(resource.id.action_search)?.actionview?.
                    javacast<android.support.v7.widget.searchview>() is
                     android.support.v7.widget.searchview searchview)
                {
                    searchview.querytextchange += searchview_querytextchange;
                    searchview.imeoptions = (int)imeaction.search;
                    searchview.inputtype = (int)inputtypes.textvariationfilter;
                    searchview.maxwidth = int.maxvalue;
                }
            }
        }

        private void searchview_querytextchange(object sender, android.support.v7.widget.searchview.querytextchangeeventargs e)
        {
            if (element is isearchpage searchpage)
                searchpage.onsearchbartextchanged(e.newtext);
        }

        private static android.support.v7.widget.toolbar gettoolbar() => (crosscurrentactivity.current?.activity as mainactivity)?.findviewbyid<android.support.v7.widget.toolbar>(resource.id.toolbar);
    }

添加xml文件引用searchview

创建mainmenu.xml

在android的resources文件夹中, 创建menu文件夹创建mainmenu.xml文件, 如下:

为Xamarin.Forms的导航栏增加搜索功能

mainmenu.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/action_search"
		  android:title="search"
		  android:icon="@android:drawable/ic_menu_search"
		  app:showasaction="always|collapseactionview"
		  app:actionviewclass="android.support.v7.widget.searchview"/>
</menu>