iOS17下Xamarin.Forms TabbedPage标签图标显示不全问题求助

问题描述 #

应用采用TabbedPage展示4个页面：

• 在iPhone12 Pro/iOS16.6.1设备上，标签图标及文字显示正常；
• 在iPhone14 Pro/iOS17.1.2、iPhone15 Pro Max/iOS17.1.2设备上，标签栏高度低于iOS16设备，且整体下移，导致标签按钮的第二行文字无法显示，图标也存在显示不全的情况。

由于iPhone12 Pro与iPhone14 Pro均为6.1英寸，推测问题仅出现在iOS17系统中，当前使用Xamarin.Forms版本为V5.0.0.2612。

相关代码 #

MyPage.xaml #

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:me="clr-namespace:MyProject;assembly=MyProject"    
             x:Class="MyProject.MyPage">
</TabbedPage>

MyPage.xaml.cs #

#define iOS
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
using Xamarin.Forms.Xaml;

namespace MyProject
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MyPage : Xamarin.Forms.TabbedPage
    {
        public MyPage()
        {
            InitializeComponent();
#if iOS
#else
            this.On<Xamarin.Forms.PlatformConfiguration.Android>().SetIsSwipePagingEnabled(false);
#endif
            this.Children.Add(new TestAPage());
            this.Children.Add(new TestBPage());
            this.Children.Add(new TestCPage());
            this.Children.Add(new TestDPage());
        }
    }
}

修复方案 #

这个问题是Xamarin.Forms 5版本对iOS17 TabBar的适配bug，以下是几种可行的修复方式：

• 升级Xamarin.Forms版本
  微软在Xamarin.Forms 5的后续补丁版本中修复了iOS17的TabBar布局问题，建议直接升级到最新的5.x稳定版本（如5.0.0.2674及以上），官方已针对该系统版本的适配问题做了针对性修复。

• 自定义iOS渲染器调整TabBar布局
  若暂时无法升级版本，可通过自定义渲染器强制修正TabBar的高度和内容偏移：

  using UIKit;
  using Xamarin.Forms;
  using Xamarin.Forms.Platform.iOS;
  
  [assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
  namespace MyProject.iOS.Renderers
  {
      public class CustomTabbedPageRenderer : TabbedRenderer
      {
          public override void ViewWillLayoutSubviews()
          {
              base.ViewWillLayoutSubviews();
              // 仅针对iOS17及以上版本处理
              if (UIDevice.CurrentDevice.CheckSystemVersion(17, 0))
              {
                  // 调整TabBar高度，适配iOS17的布局变化
                  TabBar.Frame = new CoreGraphics.CGRect(TabBar.Frame.X, View.Frame.Height - 83, TabBar.Frame.Width, 83);
                  // 调整标签文字和图标的偏移，确保完整显示
                  foreach (var tabItem in TabBar.Items)
                  {
                      tabItem.TitlePositionAdjustment = new UIOffset(0, -2);
                      tabItem.ImageInsets = new UIEdgeInsets(6, 0, -6, 0);
                  }
              }
          }
      }
  }
  

  上述代码需添加到iOS项目中，可根据实际显示效果微调高度和偏移值。

• 设置TabbedPage底部内边距
  在TabbedPage的构造函数中，针对iOS17系统添加底部内边距调整：

  public MyPage()
  {
      InitializeComponent();
  

#if iOS
// 适配iOS17的安全区域和布局
if (DeviceInfo.Version.Major >= 17)
{
this.On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
this.Padding = new Thickness(0, 0, 0, 20);
}
#endif
this.Children.Add(new TestAPage());
this.Children.Add(new TestBPage());
this.Children.Add(new TestCPage());
this.Children.Add(new TestDPage());
}

内容的提问来源于stack exchange，提问作者Hannah.C