How do you access the top tab/toolbar for iOS on Shell pages?

Question

I have been trying to set the gravity / positioning options for the top tab/toolbar (the layout that appears when you set two ShellContents to a Tab). This has worked on Android, as the Android Shell renderer exposes both CreateBottomNavViewAppearanceTracker and CreateTabLayoutAppearanceTracker.

However, the iOS Shell renderer only exposes CreateTabBarAppearanceTracker in regards to tabs which only deals with (at least from what I understand) the bottom tab (higher hierarchically than ShellContent tabs).

I have tried to subclass ShellItemRenderer, but I couldn't find any properties related to what I wanted.

How it appears on Android:

Answer 1

I have found the solution to access the the top tab/toolbar for iOS on Shell pages. You need a subclass of ShellSectionRootHeader, which is itself a subclass of UICollectionViewController which is the native type that renders the top tab bar on iOS. Once you have that subclass, you can then override the GetCell method to get each individual item in the top tab bar and modify them. But in order to get to that point, you need to subclass and instantiate 2 more renderers beyond the ShellRenderer.

Here is the sample Renderer code in iOS :

[assembly: ExportRenderer(typeof(Shell), typeof(CustomShellRenderer))]
namespace Xaminals.iOS
{
    public class CustomShellRenderer: ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var shellSectionRenderer = new CustomShellSectionRenderer(this);
            return shellSectionRenderer;
        }
    }
    public class CustomShellSectionRenderer : ShellSectionRenderer
    {

        public CustomShellSectionRenderer(IShellContext context) : base(context)
        { }

        protected override IShellSectionRootRenderer CreateShellSectionRootRenderer(ShellSection shellSection, IShellContext shellContext)
        {
            var renderer = new CustomShellSectionRootRenderer(shellSection, shellContext);

            return renderer;
        }
    }

    public class CustomShellSectionRootRenderer : ShellSectionRootRenderer
    {
        public CustomShellSectionRootRenderer(ShellSection section, IShellContext context) : base(section, context)
        { }

        protected override IShellSectionRootHeader CreateShellSectionRootHeader(IShellContext shellContext)
        {
            var renderer = new CustomShellSectionRootHeader(shellContext);
            return renderer;
        }
    }

    public class CustomShellSectionRootHeader : ShellSectionRootHeader
    {
        public CustomShellSectionRootHeader(IShellContext context) : base(context)
        {
            
        }

        public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = base.GetCell(collectionView, indexPath) as ShellSectionHeaderCell;

            // Set desired font here 
            //cell.Label.Font = UIFont.ItalicSystemFontOfSize(11);

            var layout = new UICollectionViewFlowLayout();
            layout.MinimumInteritemSpacing = UIScreen.MainScreen.Bounds.Size.Width / 8;
            layout.SectionInset = new UIEdgeInsets(top: 0, left: UIScreen.MainScreen.Bounds.Size.Width/4, bottom: 0, right: 0);

            collectionView.CollectionViewLayout = layout;

            return cell;
        }
    }

    public class CustomUICollectionViewFlowLayout : UICollectionViewFlowLayout
    {
        public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
        {
            return base.LayoutAttributesForElementsInRect(rect);

        }

    }
}

The effect: