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

Question

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

是否有更好的解决方案来使用 Xamarin 表单编写底部工具栏，或者在不久的将来是否有 Xamarin 表单随附的“ native ”底部工具栏，因为 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);
        }
    }
}

Answer 1

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

Duplicated question answer (XF Bottom navigation bar)

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

此答案中建议的组件，使用 Material Design 用于 Android 平台。如果此答案适合您，请不要忘记标记为已回答。