xamarin.forms Android Bottom Navigation bar

xamarin.forms Android Bottom Navigation bar

How do you do this in xamarin.forms, the common design bottom navigation bar in Android?

A third-party framework is used to achieve the bottom navigation effect:

Third party libraries: Naxam.bottomtabbedpage

GitHub Address: Https://github.com/naxam/bottomtabbedpage-xamarin-forms

First: Create maintabandroidpage inherit from Bottomtabbedpage

1 usingNaxam.Controls.Forms;2 usingSystem;3 usingSystem.Collections.Generic;4 usingSystem.Diagnostics;5 usingSystem.Linq;6 usingSystem.Text;7 usingSystem.Threading.Tasks;8 9 usingxamarin.forms;Ten usingXamarin.Forms.Xaml; One  A namespaceXFPractice.Pages.MainTab - { - [Xamlcompilation (xamlcompilationoptions.compile)] the      Public Partial classMaintabandroidpage:bottomtabbedpage -     { -          Publicmaintabandroidpage () -         { + InitializeComponent (); -Navigationpage.sethasnavigationbar ( This,true); +Navigationpage.sethasbackbutton ( This,false); A inittabpages (); at  -              This. Appearing + =maintabandroidpage_appearing; -              This. Currentpagechanged + =maintabandroidpage_currentpagechanged; -         } -  -         Private voidMaintabandroidpage_appearing (Objectsender, EventArgs e) in         { - Updatenavigationbar (); to         } +  -         Private voidMaintabandroidpage_currentpagechanged (Objectsender, System.EventArgs e) the         { * Updatenavigationbar (); $         }Panax Notoginseng  -         Private voidUpdatenavigationbar () the         { +Title =Currentpage.title; A         } the  +         Private voidinittabpages () -         { $              This. Children.add (NewMessagepage () {Title ="message", Icon ="Icon_chat" }); $              This. Children.add (NewContactspage () {Title ="Contacts", Icon ="icon_org" }); -              This. Children.add (NewWorkstagepage () {Title ="Workbench", Icon ="icon_table" }); -              This. Children.add (NewProfilepage () {Title ="I'm", Icon ="Icon_me" }); the         } - Wuyi  the     } -}

View Code

XAML Code:

<?xml version="1.0"encoding="Utf-8"? ><naxam:bottomtabbedpage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="Http://schemas.microsoft.com/winfx/2009/xaml"Xmlns:naxam="clr-namespace:naxam.bottomnavs.forms;assembly=naxam.bottomnavs.forms"x:class="XFPractice.Pages.MainTab.MainTabAndroidPage"> </naxam:BottomTabbedPage>

View Code

Just the above code is not enough to achieve the desired effect, we also need to add the following code in Mainactivity, and call in OnCreate:

voidSetupbottomtabs () {varStateList =NewAndroid.Content.Res.ColorStateList (New int[][] {                    New int[] {Android.Resource.Attribute.StateChecked},New int[] {Android.Resource.Attribute.StateEnabled}},New int[] {color.red,//SelectedColor.White//Normal                }); Bottomtabbedrenderer.backgroundcolor=NewColor (0x9c,0x27,0xb0); Bottomtabbedrenderer.fontsize=10f; Bottomtabbedrenderer.iconsize= -; Bottomtabbedrenderer.itemtextcolor=statelist; Bottomtabbedrenderer.itemicontintlist=statelist; //Bottomtabbedrenderer.typeface = Typeface.createfromasset (this.            Assets, "Architep.ttf"); //bottomtabbedrenderer.itembackgroundresource = Resource.Drawable.bnv_selector;Bottomtabbedrenderer.itemspacing =4; //bottomtabbedrenderer.itempadding = new Xamarin.Forms.Thickness (6);Bottomtabbedrenderer.bottombarheight = About; Bottomtabbedrenderer.itemalign=Itemalignflags.center; Bottomtabbedrenderer.shouldupdateselectedicon=true; Bottomtabbedrenderer.menuitemiconsetter= (MenuItem, Iconsource, selected) = {                variconized =Iconize.findiconforkey (Iconsource.file); if(iconized = =NULL)                {                    if(Selected = =true) Iconsource= Iconsource +"_sel";                    BottomTabbedRenderer.DefaultMenuItemIconSetter.Invoke (MenuItem, Iconsource, selected); return; }                vardrawable =NewIcondrawable ( This, iconized). Color (selected?) Color.Red:Color.White). SIZEDP ( -);            Menuitem.seticon (drawable);        }; }

View Code

Resource file:

This allows the Android bottom navigation bar to be implemented.

xamarin.forms Android Bottom Navigation bar