Xamarin.Forms：修改TabbedPage标签栏的图标与文字大小

嘿，我明白你现在的困扰——TabbedPage默认的标签图标和文字确实有点占空间，直接在子页面设置HeightRequest和WidthRequest其实起不到作用，因为这些属性管的是页面本身的尺寸，不是标签栏的样式。咱们来一步步解决这个问题：

方法1：针对传统TabbedPage使用自定义渲染器 #

因为TabbedPage的标签样式是由平台原生控件控制的，所以需要针对Android和iOS分别写自定义渲染器来调整尺寸。

Android平台 #

创建自定义渲染器类，修改底部导航栏的图标和文字大小：

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace TabbedApp.Droid
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

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

            if (ViewGroup != null && ViewGroup.ChildCount > 0)
            {
                var bottomNavigationView = ViewGroup.GetChildAt(0) as BottomNavigationView;
                if (bottomNavigationView != null)
                {
                    // 设置图标大小（这里用24dp，你可以按需调整）
                    bottomNavigationView.ItemIconSize = (int)Context.Resources.GetDimension(Resource.Dimension.tab_icon_size);
                    // 设置文字大小
                    var labelSize = Context.Resources.GetDimension(Resource.Dimension.tab_label_size);
                    bottomNavigationView.SetTextSize(Android.Util.ComplexUnitType.Dip, (float)labelSize);
                }
            }
        }
    }
}

接着在Android项目的Resources/values/dimens.xml里添加自定义尺寸：

<dimen name="tab_icon_size">24dp</dimen>
<dimen name="tab_label_size">12sp</dimen>

iOS平台 #

同样创建自定义渲染器来调整图标和文字：

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace TabbedApp.iOS
{
    public class CustomTabbedPageRenderer : TabbedRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            if (TabBar?.Items == null) return;

            foreach (var item in TabBar.Items)
            {
                // 调整图标大小（24x24，按需修改）
                item.Image = item.Image?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                item.Image = ResizeImage(item.Image, new CGSize(24, 24));
                // 调整选中状态的图标大小
                item.SelectedImage = item.SelectedImage?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                item.SelectedImage = ResizeImage(item.SelectedImage, new CGSize(24, 24));
                // 设置文字大小
                item.SetTitleTextAttributes(new UITextAttributes
                {
                    Font = UIFont.SystemFontOfSize(12)
                }, UIControlState.Normal);
                item.SetTitleTextAttributes(new UITextAttributes
                {
                    Font = UIFont.SystemFontOfSize(12)
                }, UIControlState.Selected);
            }
        }

        private UIImage ResizeImage(UIImage image, CGSize targetSize)
        {
            UIGraphics.BeginImageContextWithOptions(targetSize, false, UIScreen.MainScreen.Scale);
            image.Draw(new CGRect(CGPoint.Empty, targetSize));
            var newImage = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();
            return newImage;
        }
    }
}

方法2：使用Xamarin.Forms Shell（更简洁推荐） #

如果你的项目可以迁移到Shell，设置TabBar样式会简单很多，直接在AppShell.xaml里配置：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:TabbedApp"
       x:Class="TabbedApp.AppShell">

    <Shell.Resources>
        <Style x:Key="TabBarItemStyle" TargetType="TabBarItem">
            <!-- 设置图标大小 -->
            <Setter Property="IconWidthRequest" Value="24" />
            <Setter Property="IconHeightRequest" Value="24" />
            <!-- 设置文字大小 -->
            <Setter Property="FontSize" Value="12" />
        </Style>
    </Shell.Resources>

    <TabBar Style="{StaticResource TabBarItemStyle}">
        <Tab Icon="dairy" Title="Dairy">
            <ShellContent ContentTemplate="{DataTemplate local:DairyTabs}" />
        </Tab>
        <Tab Icon="kid" Title="MyKid">
            <ShellContent ContentTemplate="{DataTemplate local:Mykid}" />
        </Tab>
    </TabBar>

</Shell>

重要提示 #

你原来的XAML代码里，直接在local:DairyTabs上设置HeightRequest和WidthRequest是无效的，这些属性控制的是页面本身的尺寸，和标签栏的图标完全没关系哦。

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