如何在Xamarin.Forms中实现仅显示图标的无标题Tab Bar

嘿，别担心，刚开始用Xamarin.Forms Shell很容易遇到这类小问题！要实现只显示图标、隐藏Tab Bar标题的效果，有几种简单的方法，我一步步给你讲：

方法1：移除Title属性并调整Shell样式（快速实现） #

首先，你可以直接把每个<Tab>的Title属性设为空字符串，这样标题就不会显示了。然后我们可以通过Shell样式调整TabBar的高度和图标大小，让布局更美观：

修改你的TabBar代码： #

<TabBar>
    <Tab Icon="icon_user.png" Title="">
        <ShellContent ContentTemplate="{DataTemplate views:PersonalAreaPage}" />
    </Tab>
    <Tab Icon="icon_srqr.png" Title="">
        <ShellContent x:Name="homeItem" ContentTemplate="{DataTemplate views:HomePage}" />
    </Tab>
    <Tab Icon="icon_settings.png" Title="">
        <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}" />
    </Tab>
</TabBar>

添加Shell样式（在App.xaml中）： #

<Application.Resources>
    <ResourceDictionary>
        <!-- 调整TabBar整体高度 -->
        <Style TargetType="TabBar">
            <Setter Property="HeightRequest" Value="60" />
        </Style>
        <!-- 调整Tab图标的大小和外观 -->
        <Style TargetType="Tab">
            <Setter Property="Shell.IconHeight" Value="32" />
            <Setter Property="Shell.TabBarItemAppearance" Value="Active" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

方法2：自定义渲染器（解决平台特定的布局问题） #

如果方法1在某个平台（比如iOS）还是有多余的空白，或者你需要更精细的控制，可以用自定义渲染器来针对Android和iOS分别处理：

Android端自定义渲染器： #

在你的Android项目中创建以下类：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavAppearanceTracker();
        }
    }

    public class CustomBottomNavAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose() { }

        public void ResetAppearance(BottomNavigationView bottomView) { }

        public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
        {
            // 强制隐藏所有Tab的标题
            bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
        }
    }
}

iOS端自定义渲染器： #

在你的iOS项目中创建以下类：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourAppNamespace.iOS
{
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new CustomTabBarAppearanceTracker();
        }
    }

    public class CustomTabBarAppearanceTracker : IShellTabBarAppearanceTracker
    {
        public void Dispose() { }

        public void ResetAppearance(UITabBarController controller) { }

        public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            foreach (var tabItem in controller.TabBar.Items)
            {
                tabItem.Title = "";
                // 调整图标内边距，让图标居中显示
                tabItem.ImageInsets = new UIEdgeInsets(8, 0, -8, 0);
            }
        }

        public void UpdateLayout(UITabBarController controller) { }
    }
}

先试试方法1，大部分情况下它就能满足需求；如果遇到平台特定的布局问题，再用方法2的自定义渲染器来解决。

内容的提问来源于stack exchange，提问作者MauriceJr