如何在 Xamarin.Forms 中隐藏标签栏？

Question

最近几天我在 iOS 上的 Xamarin.Forms 中使用 TabbedPage 苦苦挣扎。我找到了一些类似的解决方案： https://forums.xamarin.com/discussion/20901/hide-tab-bar-on-push

但是，它们都不能很好地工作。我还尝试将TabbedRenderer 子类化并将TabBar 高度设置为0。它可以工作，但是如果我在NavigationPage.Pushed 事件处理程序中隐藏TabBar，则会出现一些延迟，例如TableView 底部有空白区域。

如果我尝试覆盖 NavigationRenderer 并在 PushViewController/PopViewController 方法中隐藏/显示选项卡栏，它有时会失败。例如，如果我快速来回导航，则不会调用方法 PopViewController，NavigationStack 已损坏且 Tab Bar 未恢复。

我认为唯一好的解决方案是让这个属性工作：UIViewController.HidesBottomBarWhenPushed。但是，我不知道该怎么做，因为在渲染器中设置/覆盖它不起作用。

有人成功地显示和隐藏 TabBar 了吗？

Answer 1

我设法实现了一个解决方案，该解决方案在隐藏TabBar 后解决了空格问题。您可以在this article 中阅读有关它的更多详细信息。

为了解决这个问题，我们只需要布局所有ChildViewControllers。这是我自定义TabbedPage 及其TabbedPageRenderer 的示例实现。

HideableTabbedPage.cs：

using System;
using Xamarin.Forms;

namespace HideTabBar.Controls
{
    public class HideableTabbedPage : TabbedPage
    {
        public static readonly BindableProperty IsHiddenProperty =
            BindableProperty.Create(nameof(IsHidden), typeof(bool), typeof(HideableTabbedPage), false);

        public bool IsHidden
        {
            get { return (bool)GetValue(IsHiddenProperty); }
            set { SetValue(IsHiddenProperty, value); }
        }
    }
}

HideableTabbedPageRenderer.cs：

using System;
using System.ComponentModel;
using System.Threading.Tasks;
using HideTabBar.Controls;
using HideTabBar.iOS.CustomRenderer;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(HideableTabbedPage), typeof(HideableTabbedPageRenderer))]
namespace HideTabBar.iOS.CustomRenderer
{
    public class HideableTabbedPageRenderer : TabbedRenderer
    {
        private bool disposed;
        private const int TabBarHeight = 49;

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {
                this.Tabbed.PropertyChanged += Tabbed_PropertyChanged;
            }
        }

        private void Tabbed_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == HideableTabbedPage.IsHiddenProperty.PropertyName)
            {
                this.OnTabBarHidden((this.Element as HideableTabbedPage).IsHidden);
            }
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);
            this.disposed = true;
        }

        private async void OnTabBarHidden(bool isHidden)
        {
            if (this.disposed || this.Element == null || this.TabBar == null)
            {
                return;
            }

            await this.SetTabBarVisibility(isHidden);
        }

        private async Task SetTabBarVisibility(bool hide)
        {
            this.TabBar.Opaque = false;
            if (hide)
            {
                this.TabBar.Alpha = 0;
            }

            this.UpdateFrame(hide);

            // Show / Hide TabBar
            this.TabBar.Hidden = hide;
            this.RestoreFonts();

            // Animate appearing 
            if (!hide)
            {
                await UIView.AnimateAsync(0.2f, () => this.TabBar.Alpha = 1);
            }
            this.TabBar.Opaque = true;

            this.ResizeViewControllers();
            this.RestoreFonts();
        }

        private void UpdateFrame(bool isHidden)
        {
            var tabFrame = this.TabBar.Frame;
            tabFrame.Height = isHidden ? 0 : TabBarHeight;
            this.TabBar.Frame = tabFrame;
        }

        private void RestoreFonts()
        {
            // Workaround to restore custom fonts:

            foreach (var item in this.TabBar.Items)
            {
                var text = item.Title;
                item.Title = "";
                item.Title = text;
            }
        }

        private void ResizeViewControllers()
        {
            foreach (var child in this.ChildViewControllers)
            {
                child.View.SetNeedsLayout();
                child.View.SetNeedsDisplay();
            }
        }
    }
}  

最终结果：

Answer 2

有一种解决方案不需要任何渲染，并且适用于 Android 和 iOS。

将TabbedPage 包装在NavigationPage 中，这样您的应用结构就变成了

• 导航页（根）
  • 点击页面
    • 导航页
      • ContentPage（带标签栏）
  • ContentPage（无标签栏）

在 TabbedPage 上，您必须隐藏“根”NavigationPage 的导航栏，否则您有 2 个导航栏。

<TabbedPage
    ...
    HasNavigationBar="False"> 

如果你使用'root'NavigationPage推送页面，标签栏是隐藏的，底部没有空格。

请参阅我的示例： https://github.com/Jfcobuss/HideTabbarExample/tree/master/HideTabbarExample

Answer 3

我尝试过的：

• 创建 ContentPage 的子类并在其中创建 BindableProperty（如 HidesBottomBarWhenPushed）。我在PageRenderer中设置了ViewController.hidesBottomBarWhenPushed，但它不起作用，虽然我可以得到这个属性的值。

• 在 PageRenderer 的初始构造函数中设置this.hidesBottomBarWhenPushed，仍然没有运气。

我认为hidesBottomBarWhenPushed 一定有问题，我们不能通过这种方式隐藏标签栏。作为一种临时且简单的解决方法，我在 PageRenderer 中更改了 TabBarController.TabBar 的可见性

class PageiOS : PageRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);
        if (this.NavigationController != null && this.TabBarController != null)
        {
            bool isRootVC = this.NavigationController.ViewControllers.Length == 1;
            ParentViewController.TabBarController.TabBar.Hidden = !isRootVC;
        }
    }
}

它的行为就像你上面所说的那样，底部有一些延迟和空白。我禁用了 push 和 pop 的动画，问题就消失了。

测试：

Answer 4

我确实设法使用HidesBottomBarWhenPushed 属性以更“本机”的方式获得了预期的结果。如果你看一下导航是如何为 iOS 实现的，你会注意到，在将新的视图控制器推入导航堆栈 it gets wrapped in a parent view controller 内的 CreateViewControllerForPage 方法之前。它让我有机会拦截尚未推送到导航堆栈的已创建视图控制器并设置HidesBottomBarWhenPushed 属性。为此，我创建了一个从ContentPage 派生的空类：

public class NoTabBarPage : ContentPage { }

所以现在从NoTabBarPage 派生的每个页面都没有底部标签栏。

还有一个可以让一切正常工作的渲染器：

[assembly: ExportRenderer(typeof(NoTabBarPage), typeof(NoTabBarPageRenderer))]
namespace HideTabBar.iOS.Renderers
{
    public class NoTabBarPageRenderer : PageRenderer
    {
        public override void DidMoveToParentViewController(UIViewController parent)
        {
            base.DidMoveToParentViewController(parent);

            parent.HidesBottomBarWhenPushed = true;
        }

        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();

            if (View != null && View.Superview != null && View.Frame.Height != View.Superview.Frame.Height)
            {
                View.Frame = View.Superview.Frame;
                Element.Layout(View.Frame.ToRectangle());
            }
        }
    }
}

像往常一样，Xamarin.Forms 不能完美无缺，结果证明，子视图控制器没有拉伸到父视图控制器的框架。我必须在ViewDidLayoutSubviews 中手动修复。

还要注意，每个新的视图控制器在带有隐藏标签栏的视图控制器之后推送到导航堆栈也没有标签栏。所以在我的例子中，每个“详细信息”页面都来自NoTabBarPage。

Answer 5

当我需要在屏幕上绘制标签栏之前隐藏标签栏时，我遇到了一个问题。

Wojciech Kulik 的解决方案帮助了我，但它在导航到标签页时开始闪烁。

下面的代码解决了我的问题。希望对您有所帮助。 把它放在你的 TabbedRenderer 派生类中

public override void ViewWillLayoutSubviews()
{
    OnTabBarHidden(true); // Hide before the page appear
}