Xamarin.Forms Android 底部導覽列

標籤：target   實現   png   https   href   ring   -name   ted   upd   

Xamarin.Forms Android 底部導覽列

在Android中常見設計底部導覽列，在Xamarin.Forms中如何?該效果呢？

這裡藉助第三方架構來實現底部導航效果：

第三方庫：Naxam.BottomTabbedPage

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

 

首先：建立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.MainTab13 {14     [XamlCompilation(XamlCompilationOptions.Compile)]15     public partial class MainTabAndroidPage : BottomTabbedPage16     {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

Xaml代碼：

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

僅僅是以上代碼還不足以達到我們期望的效果，還需要在MainActivity中添加如下代碼，並在OnCreate中調用：

void SetupBottomTabs()        {            var stateList = new Android.Content.Res.ColorStateList(                new int[][] {                    new int[] { Android.Resource.Attribute.StateChecked                },                new int[] { Android.Resource.Attribute.StateEnabled                }                },                new int[] {                    Color.Red, //Selected                    Color.White //Normal                });                        BottomTabbedRenderer.BackgroundColor = new Color(0x9C, 0x27, 0xB0);            BottomTabbedRenderer.FontSize = 10f;            BottomTabbedRenderer.IconSize = 24;            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 = 56;            BottomTabbedRenderer.ItemAlign = ItemAlignFlags.Center;            BottomTabbedRenderer.ShouldUpdateSelectedIcon = true;                        BottomTabbedRenderer.MenuItemIconSetter = (menuItem, iconSource, selected) => {                var iconized = Iconize.FindIconForKey(iconSource.File);                if (iconized == null)                {                    if (selected == true)                        iconSource = iconSource + "_sel";                    BottomTabbedRenderer.DefaultMenuItemIconSetter.Invoke(menuItem, iconSource, selected);                    return;                }                var drawable = new IconDrawable(this, iconized).Color(selected ? Color.Red : Color.White).SizeDp(30);                menuItem.SetIcon(drawable);            };        }

View Code

資源檔：

如此即可實現Android底部導覽列了。

 

Xamarin.Forms Android 底部導覽列