在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;
        }
    }
}

结果