如何在 iOS 上的 .NET MAUI 中增加 TabBar 菜单项的字体大小？

Question

我正在使用 .NET MAUI Shell Tabbar，并且我正在尝试增加专门在 iOS 平台上的 TabBar 菜单项的字体大小。您能否为此提供示例代码片段？

我感谢任何可以帮助我解决此问题的建议或示例代码。

Answer 1

对于 iOS，我们必须为标签栏外观完全编写代码。因此，让我们重写 SetAppearance 方法。

首先，在Platform/iOS中，创建一个CustomShellHandler.cs，

class CustomShellHandler : ShellRenderer
{
    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new CustomShellTabBarAppearanceTracker();
    }
}

class CustomShellTabBarAppearanceTracker : ShellTabBarAppearanceTracker
{
    UIColor _defaultBarTint;
    UIColor _defaultTint;
    UIColor _defaultUnselectedTint;
    UITabBarAppearance _tabBarAppearance;
    public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
        //base.SetAppearance(controller, appearance);
        IShellAppearanceElement appearanceElement = appearance;
        var backgroundColor = appearanceElement.EffectiveTabBarBackgroundColor;
        var foregroundColor = appearanceElement.EffectiveTabBarForegroundColor; // Currently unused
        var disabledColor = appearanceElement.EffectiveTabBarDisabledColor; // Unused on iOS
        var unselectedColor = appearanceElement.EffectiveTabBarUnselectedColor;
        var titleColor = appearanceElement.EffectiveTabBarTitleColor;

        var tabBar = controller.TabBar;

        if (_defaultTint == null)
        {
            _defaultBarTint = tabBar.BarTintColor;
            _defaultTint = tabBar.TintColor;
            _defaultUnselectedTint = tabBar.UnselectedItemTintColor;
        }
        
        if (OperatingSystem.IsIOSVersionAtLeast(15) || OperatingSystem.IsTvOSVersionAtLeast(15))
            UpdateiOS15TabBarAppearance(controller, appearance);
        else
            UpdateTabBarAppearance(controller, appearance);
        
    }


    void UpdateiOS15TabBarAppearance(UITabBarController controller, ShellAppearance appearance)
    {
        IShellAppearanceElement appearanceElement = appearance;

        var backgroundColor = appearanceElement.EffectiveTabBarBackgroundColor;
        var foregroundColor = appearanceElement.EffectiveTabBarForegroundColor;
        var unselectedColor = appearanceElement.EffectiveTabBarUnselectedColor;
        var titleColor = appearanceElement.EffectiveTabBarTitleColor;

        controller.TabBar.UpdateiOS15TabBarAppearance(
                ref _tabBarAppearance,
                null,
                null,
                foregroundColor ?? titleColor,
                unselectedColor,
                backgroundColor,
                titleColor ?? foregroundColor,
                unselectedColor);
    }

    void UpdateTabBarAppearance(UITabBarController controller, ShellAppearance appearance)
    {
        IShellAppearanceElement appearanceElement = appearance;
        var backgroundColor = appearanceElement.EffectiveTabBarBackgroundColor;
        var foregroundColor = appearanceElement.EffectiveTabBarForegroundColor;
        var unselectedColor = appearanceElement.EffectiveTabBarUnselectedColor;
        var titleColor = appearanceElement.EffectiveTabBarTitleColor;

        var tabBar = controller.TabBar;



        if (backgroundColor is not null && backgroundColor.IsNotDefault())
            tabBar.BarTintColor = backgroundColor.ToPlatform();

        if (unselectedColor is not null && unselectedColor.IsNotDefault())
        {
            tabBar.UnselectedItemTintColor = unselectedColor.ToPlatform();
            UITabBarItem.Appearance.SetTitleTextAttributes(new UIStringAttributes { ForegroundColor = unselectedColor.ToPlatform() }, UIControlState.Normal);
        }

        if (titleColor is not null && titleColor.IsNotDefault() ||
            foregroundColor is not null && foregroundColor.IsNotDefault())
        {
            tabBar.TintColor = (foregroundColor ?? titleColor).ToPlatform();
            UITabBarItem.Appearance.SetTitleTextAttributes(new UIStringAttributes { ForegroundColor = (titleColor ?? foregroundColor).ToPlatform() }, UIControlState.Selected);
        }
    }   
}

第二，在Platform/iOS中，创建一个TabbedViewExtensions.cs，

internal static class TabbedViewExtensions
{
    [System.Runtime.Versioning.SupportedOSPlatform("ios15.0")]
    [System.Runtime.Versioning.SupportedOSPlatform("tvos15.0")]
    internal static void UpdateiOS15TabBarAppearance(
        this UITabBar tabBar,
        ref UITabBarAppearance _tabBarAppearance,
        UIColor? defaultBarColor,
        UIColor? defaultBarTextColor,
        Color? selectedTabColor,
        Color? unselectedTabColor,
        Color? barBackgroundColor,
        Color? selectedBarTextColor,
        Color? unSelectedBarTextColor)
    {
        if (_tabBarAppearance == null)
        {
            _tabBarAppearance = new UITabBarAppearance();
            _tabBarAppearance.ConfigureWithDefaultBackground();
        }

        var effectiveBarColor = (barBackgroundColor == null) ? defaultBarColor : barBackgroundColor.ToPlatform();
        // Set BarBackgroundColor
        if (effectiveBarColor != null)
        {
            _tabBarAppearance.BackgroundColor = effectiveBarColor;
        }

        // Set BarTextColor

        var effectiveSelectedBarTextColor = (selectedBarTextColor == null) ? defaultBarTextColor : selectedBarTextColor.ToPlatform();
        var effectiveUnselectedBarTextColor = (unSelectedBarTextColor == null) ? defaultBarTextColor : unSelectedBarTextColor.ToPlatform();

        // Update colors for all variations of the appearance to also make it work for iPads, etc. which use different layouts for the tabbar
        // Also, set ParagraphStyle explicitly. This seems to be an iOS bug. If we don't do this, tab titles will be truncat...

        // Set SelectedTabColor
        if (selectedTabColor is not null)
        {
            var foregroundColor = selectedTabColor.ToPlatform();
            var titleColor = effectiveSelectedBarTextColor ?? foregroundColor;

            _tabBarAppearance.StackedLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { Font=UIFont.SystemFontOfSize(16f),ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.StackedLayoutAppearance.Selected.IconColor = foregroundColor;

            _tabBarAppearance.InlineLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.InlineLayoutAppearance.Selected.IconColor = foregroundColor;

            _tabBarAppearance.CompactInlineLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.CompactInlineLayoutAppearance.Selected.IconColor = foregroundColor;
        }
        else
        {
            var foregroundColor = UITabBar.Appearance.TintColor;
            var titleColor = effectiveSelectedBarTextColor ?? foregroundColor;
            _tabBarAppearance.StackedLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.StackedLayoutAppearance.Selected.IconColor = foregroundColor;

            _tabBarAppearance.InlineLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.InlineLayoutAppearance.Selected.IconColor = foregroundColor;

            _tabBarAppearance.CompactInlineLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.CompactInlineLayoutAppearance.Selected.IconColor = foregroundColor;
        }

        // Set UnselectedTabColor
        if (unselectedTabColor is not null)
        {
            var foregroundColor = unselectedTabColor.ToPlatform();
            var titleColor = effectiveUnselectedBarTextColor ?? foregroundColor;
            _tabBarAppearance.StackedLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.StackedLayoutAppearance.Normal.IconColor = foregroundColor;

            _tabBarAppearance.InlineLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.InlineLayoutAppearance.Normal.IconColor = foregroundColor;

            _tabBarAppearance.CompactInlineLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.CompactInlineLayoutAppearance.Normal.IconColor = foregroundColor;
        }
        else
        {
            var foreground = UITabBar.Appearance.TintColor;
            var titleColor = effectiveUnselectedBarTextColor ?? foreground;
            _tabBarAppearance.StackedLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.StackedLayoutAppearance.Normal.IconColor = foreground;

            _tabBarAppearance.InlineLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.InlineLayoutAppearance.Normal.IconColor = foreground;

            _tabBarAppearance.CompactInlineLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { Font = UIFont.SystemFontOfSize(16f), ForegroundColor = titleColor, ParagraphStyle = NSParagraphStyle.Default };
            _tabBarAppearance.CompactInlineLayoutAppearance.Normal.IconColor = foreground;
        }

        // Set the TabBarAppearance
        tabBar.StandardAppearance = tabBar.ScrollEdgeAppearance = _tabBarAppearance;
    }
}

这是很多代码。但这与源代码几乎相同，我只是做了一些更改。所以只需复制它即可。您可以在这里查看源代码， TabbedViewExtensions、SafeShellTabBarAppearanceTracker

---

这就是我们设置systemfontsize:16后的效果，

这是之前的效果，

希望有帮助！