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

魁首哥

作者

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

本篇内容主要讲解“怎么为Xamarin.Forms的导航栏增加搜索功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么为Xamarin.Forms的导航栏增加搜索功能”吧!

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

<ContentPage.ToolbarItems><ToolbarItem/><ToolbarItem/></ContentPage.ToolbarItems>

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

真机效果演示:

实现思路:

1.添加用于搜索通知的接口 : ISearchPage
2.自定义搜索的渲染器 : SearchPageRender
3.添加Menu/Item Xml文件: mainmenu.xml
4.添加 Nuget：Plugin.CurrentActivity
5.给需要添加搜索功能的页面实现 (1)的接口
6.为自定义搜索渲染器添加支持该功能的页面
7.启动项初始化 : CrossCurrentActivity.Current.Init(this, savedInstanceState)

添加搜索通知接口

publicinterfaceISearchPage{voidOnSearchBarTextChanged(stringtext);}

自定义渲染器

在Android项目中创建 CustomRender文件夹定义 SearchPageRender

SearchPageRender代码

publicclassSearchPageRender:PageRenderer{publicSearchPageRender(Contextcontext):base(context){}protectedoverridevoidOnAttachedToWindow(){base.OnAttachedToWindow();if(ElementisISearchPage&&ElementisPagepage&&page.ParentisNavigationPagenavigationPage){//Workaroundtore-addtheSearchViewwhennavigatingbacktoanISearchPage,becauseXamarin.FormsautomaticallyremovesitnavigationPage.Popped+=HandleNavigationPagePopped;navigationPage.PoppedToRoot+=HandleNavigationPagePopped;}}//AddingtheSearchBarinOnSizeChangedensurestheSearchBarisre-addedafterthedeviceisrotated,becauseXamarin.FormsautomaticallyremovesitprotectedoverridevoidOnSizeChanged(intw,inth,intoldw,intoldh){base.OnSizeChanged(w,h,oldw,oldh);if(ElementisISearchPage&&ElementisPagepage&&page.ParentisNavigationPagenavigationPage&&navigationPage.CurrentPageisISearchPage){AddSearchToToolbar(page.Title);}}protectedoverridevoidDispose(booldisposing){if(GetToolbar()isAndroid.Support.V7.Widget.ToolbartoolBar)toolBar.Menu?.RemoveItem(Resource.Menu.mainmenu);base.Dispose(disposing);}//Workaroundtore-addtheSearchViewwhennavigatingbacktoanISearchPage,becauseXamarin.FormsautomaticallyremovesitvoidHandleNavigationPagePopped(objectsender,NavigationEventArgse){if(senderisNavigationPagenavigationPage&&navigationPage.CurrentPageisISearchPage){AddSearchToToolbar(navigationPage.CurrentPage.Title);}}voidAddSearchToToolbar(stringpageTitle){if(GetToolbar()isAndroid.Support.V7.Widget.ToolbartoolBar&&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>()isAndroid.Support.V7.Widget.SearchViewsearchView){searchView.QueryTextChange+=SearchView_QueryTextChange;searchView.ImeOptions=(int)ImeAction.Search;searchView.InputType=(int)InputTypes.TextVariationFilter;searchView.MaxWidth=int.MaxValue;}}}privatevoidSearchView_QueryTextChange(objectsender,Android.Support.V7.Widget.SearchView.QueryTextChangeEventArgse){if(ElementisISearchPagesearchPage)searchPage.OnSearchBarTextChanged(e.NewText);}privatestaticAndroid.Support.V7.Widget.ToolbarGetToolbar()=>(CrossCurrentActivity.Current?.ActivityasMainActivity)?.FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);}

添加Xml文件引用SearchView

创建mainmenu.xml

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

mainmenu.xml

<?xmlversion="1.0"encoding="utf-8"?><menuxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><itemandroid: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>