面临在 xamarin.forms 中为 IOS 自定义选项卡式页面的问题

Question

我想为底部标签创建这种设计

我在 Xamarin.Forms 中工作，并且在 iOS 中遇到了设计问题。我使用 TabbedPage 如下：

<TabbedPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Inika.Views.BottomBar.BottomBarPages"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    android:TabbedPage.BarItemColor="#A9A9A9"
    android:TabbedPage.BarSelectedItemColor="Black">
</TabbedPage>

对于这种设计，我创建了“TabbedRenderer”

public class TabbedPageRender_Global : TabbedRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);
        if (TabBar == null) return;
        if (TabBar.Items == null) return;

        var tabs = Element as TabbedPage;

        //For selected Items
        UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes()
        {
            TextColor = UIColor.FromRGB(255, 255, 255)
        },
        UIControlState.Selected);
        UITabBar.Appearance.SelectedImageTintColor = UIColor.FromRGB(255, 255, 255);

        CGSize size = new CGSize(TabBar.Frame.Width / TabBar.Items.Length, TabBar.Frame.Height);
        UITabBar.Appearance.SelectionIndicatorImage = imageWithColor(size);

        //For unselected Items
        TabBar.UnselectedItemTintColor = UIColor.Gray;

        base.ViewWillAppear(animated);
    }

    public UIImage imageWithColor(CGSize size)
    {
        CGRect rect = new CGRect(0 , 0, size.Width, size.Height);
        UIGraphics.BeginImageContext(size);

        using (CGContext context = UIGraphics.GetCurrentContext())
        {
            context.SetFillColor(UIColor.Black.CGColor);
            context.FillRect(rect);
        }

        UIImage image = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();

        return image;
    }
}

iPad 截图

它在 iPhone 上看起来很正常，但在所有 iPad 上，它看起来像下图

它从一开始就留下了一些空间。

CGRect rect = new CGRect(0 , 0, size.Width, size.Height);

我该怎么办？请建议我一些解决方法。

这是 IOS 在 iPad 设备中的本机行为吗？

Answer 1

UITraitCollection 与问题有关，虽然我不知道具体细节，并且允许屏幕旋转引入了额外的挑战。以下似乎适用于 iPhone/iPad（也可以处理旋转）：

public class CustomTabbedPageRenderer1 : TabbedRenderer
{
    private readonly UITraitCollection traitCollectionTablet = UITraitCollection.FromUserInterfaceIdiom(UIUserInterfaceIdiom.Phone);
    private readonly UITraitCollection traitCollectionPhone = UITraitCollection.FromHorizontalSizeClass(UIUserInterfaceSizeClass.Regular);

    private CGSize lastSelectionIndicatorImageSize;

    public override UITraitCollection TraitCollection
    {
        get
        {
            switch (Device.Idiom)
            {
                case TargetIdiom.Tablet:
                    return this.traitCollectionTablet;
                case TargetIdiom.Phone:
                    return this.traitCollectionPhone;
                default:
                    return base.TraitCollection;
            }
        }
    }

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

        if (this.lastSelectionIndicatorImageSize.Height != this.TabBar.Frame.Height ||
            this.lastSelectionIndicatorImageSize.Width != this.TabBar.Frame.Width / this.TabBar.Items.Length)
        {
            this.lastSelectionIndicatorImageSize = new CGSize(this.TabBar.Frame.Width / this.TabBar.Items.Length, this.TabBar.Frame.Height);
            this.SetSelectionIndicatorImage(this.lastSelectionIndicatorImageSize);
        }
    }

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

        if (e.NewElement != null)
        {
            //For selected Items
            UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes { TextColor = UIColor.White }, UIControlState.Selected);
            UITabBar.Appearance.SelectedImageTintColor = UIColor.White;

            //For unselected Items
            this.TabBar.UnselectedItemTintColor = UIColor.Gray;
        }
    }

    private void SetSelectionIndicatorImage(CGSize size)
    {
        CGRect rect = new CGRect(0, 0, size.Width, size.Height);
        UIGraphics.BeginImageContext(size);

        using (CGContext context = UIGraphics.GetCurrentContext())
        {
            context.SetFillColor(UIColor.Black.CGColor);
            context.FillRect(rect);
        }

        UIImage image = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();

        using (image)
        {
            this.TabBar.SelectionIndicatorImage = image;
        }
    }
}

结果