如何使用Xamarin表单为Android创建底部工具栏

时间:2016-04-11 16:05:43

标签: android ios xamarin

我一直在研究两个Xamarin表单项目,并且都需要iOS和Android的底部工具栏。我一直在努力使用Xamarin表单为Android安装底部工具栏。我尝试为Android编写自定义TabbedRenderer但似乎无法找到正确的方法来覆盖以将选项卡推到底部。我还尝试在每个页面底部使用StackLayout作为选项卡,但结果看起来不太好 - 当切换选项卡时,选项卡会在页面的一部分加载时闪烁。

使用Xamarin表格编写底部工具栏是否有更好的解决方案,或者在不久的将来有一个“本机”底部工具栏附带Xamarin表格,因为Google现在正式接受底部导航并更新了Material Design规范。 ?

谢谢!

using System;
using Xamarin.Forms.Platform.Android;
using Android.App;
using Xamarin.Forms;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(ylbCross.Droid.CustomTabRenderer))]

namespace MyApp.Droid
{
    public class CustomTabRenderer : TabbedRenderer
    {
        private Activity _activity;

        protected override void OnElementChanged (ElementChangedEventArgs<TabbedPage> e)
        {

            base.OnElementChanged (e);

            _activity = this.Context as Activity;


        }

        public override void OnWindowFocusChanged(bool hasWindowFocus)
        {   
            ActionBar actionBar = _activity.ActionBar;

            if (actionBar.TabCount > 0)
            {
                ActionBar.Tab tabOne = actionBar.GetTabAt(0);
                tabOne.SetIcon (Resource.Drawable.home_Blue48);

                tabOne.TabSelected += (sender, e) => {
                    tabOne.SetIcon (Resource.Drawable.home_Blue);
                };
                tabOne.TabUnselected += (sender, e) => {
                    tabOne.SetIcon (Resource.Drawable.home_Grey);
                };

                ActionBar.Tab tabTwo = actionBar.GetTabAt(1);
                tabTwo.SetIcon (Resource.Drawable.QA_Grey);
                tabTwo.TabSelected += (sender, e) => {
                    tabTwo.SetIcon (Resource.Drawable.QA_Blue);
                };
                tabTwo.TabUnselected += (sender, e) => {
                    tabTwo.SetIcon (Resource.Drawable.QA_Grey);
                };

                ActionBar.Tab tabThree = actionBar.GetTabAt(2);
                tabThree.SetIcon(Resource.Drawable.consulting_Grey);
                tabThree.TabSelected += (sender, e) => {
                    tabThree.SetIcon (Resource.Drawable.consulting_Blue);
                };
                tabThree.TabUnselected +=   (sender, e) => {
                    tabThree.SetIcon (Resource.Drawable.consulting_Grey);
                }

                ActionBar.Tab tabFour = actionBar.GetTabAt(3);
                tabFour.SetIcon(Resource.Drawable.aboutMe_Grey);
                tabFour.TabSelected += (sender, e) => {
                    tabFour.SetIcon (Resource.Drawable.aboutMe_Blue);
                };
                tabFour.TabUnselected +=    (sender, e) => {
                    tabFour.SetIcon (Resource.Drawable.aboutMe_Grey);
                }

            }

            base.OnWindowFocusChanged(hasWindowFocus);
        }
    }
}

1 个答案:

答案 0 :(得分:0)

我认为这个问题是重复的。 你可以在这里找到解决方案:

Duplicated question answer (XF Bottom navigation bar)

总之,您应该使用第三方控件,或者如果您是一名优秀的设计师,您可以轻松创建自己的底栏。

本答案中提议的组件,使用Material Design 用于Android平台。 如果这个答案对你而言,请不要忘记将其标记为已回答。