在Android中常见设计底部导航栏,在Xamarin.Forms中如何实现该效果呢?

这里借助第三方框架来实现底部导航效果:

第三方库:Naxam.BottomTabbedPage

GitHub地址:https://github.com/naxam/bottomtabbedpage-xamarin-forms

Xamarin.Forms Android 底部导航栏   Xamarin.Forms Android 底部导航栏

首先:创建MainTabAndroidPage继承于BottomTabbedPage

 1 using Naxam.Controls.Forms;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Diagnostics;
 5 using System.Linq;
 6 using System.Text;
 7 using System.Threading.Tasks;
 8 
 9 using Xamarin.Forms;
10 using Xamarin.Forms.Xaml;
11 
12 namespace XFPractice.Pages.MainTab
13 {
14     [XamlCompilation(XamlCompilationOptions.Compile)]
15     public partial class MainTabAndroidPage : BottomTabbedPage
16     {
17         public MainTabAndroidPage()
18         {
19             InitializeComponent();
20             NavigationPage.SetHasNavigationBar(this, true);
21             NavigationPage.SetHasBackButton(this,false);
22             InitTabPages();
23 
24             this.Appearing += MainTabAndroidPage_Appearing;
25             this.CurrentPageChanged += MainTabAndroidPage_CurrentPageChanged;
26         }
27 
28         private void MainTabAndroidPage_Appearing(object sender, EventArgs e)
29         {
30             UpdateNavigationBar();
31         }
32 
33         private void MainTabAndroidPage_CurrentPageChanged(object sender, System.EventArgs e)
34         {
35             UpdateNavigationBar();
36         }
37 
38         private void UpdateNavigationBar()
39         {
40             Title = CurrentPage.Title;
41         }
42 
43         private void InitTabPages()
44         {
45             this.Children.Add(new MessagePage() { Title = "消息", Icon = "icon_chat" });
46             this.Children.Add(new ContactsPage() { Title = "通讯录", Icon = "icon_org" });
47             this.Children.Add(new WorkStagePage() { Title = "工作台", Icon = "icon_table" });
48             this.Children.Add(new ProfilePage() { Title = "", Icon = "icon_me" });
49         }
50 
51 
52     }
53 }
View Code

相关文章: