How to add a space between the Tabbar line and the icons in iOS using Xamarin Forms Shell?

Question

I have used ShellRenderer but I am unable to get the code working to add an extra space between the Tabbar line and the icons. Here is an image:

I need to increase the space between the gray line and Top of all icons. Here is the code that I have tried.


[assembly: ExportRenderer(typeof(Shell), typeof(CustomShellRenderer))]
namespace MyProject.iOS.CustomRenderers
{
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var renderer = base.CreateShellSectionRenderer(shellSection);
            if (renderer != null)
            {
                var a = (renderer as ShellSectionRenderer);
                (renderer as ShellSectionRenderer).NavigationBar.Translucent = false;
            }
            return renderer;
        }

        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)
        {
            var renderer = base.CreateShellItemRenderer(item);
            (renderer as ShellItemRenderer).TabBar.Translucent = false;
            (renderer as ShellItemRenderer).TabBar.ShadowImage = new UIImage();
            (renderer as ShellItemRenderer).TabBar.BackgroundImage = new UIImage();
            CGRect frame = (renderer as ShellItemRenderer).TabBar.Frame;
            UIView view = new UIView();
            view.BackgroundColor = UIColor.Yellow;
            view.Frame = new CGRect(frame.X, frame.Y, frame.Width, 10);
            (renderer as ShellItemRenderer).TabBar.AddSubview(view);
            return renderer;
        }
    }

score 2 · Accepted Answer · answered Jan 24 '20 at 02:31

You can add a little ImageInsets of barItem to make a space between the gray line and Top of all icons. You can't add a extra view because the space is fixed.

public class MyShellRenderer : ShellRenderer
{
    protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
    {
        var renderer = base.CreateShellSectionRenderer(shellSection);
        if (renderer != null)
        {
            (renderer as ShellSectionRenderer).NavigationBar.SetBackgroundImage(UIImage.FromFile("monkey.png"), UIBarMetrics.Default);
        }
        return renderer;
    }

    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new CustomTabbarAppearance();
    }
}

public class CustomTabbarAppearance : IShellTabBarAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(UITabBarController controller)
    {

    }

    public void UpdateLayout(UITabBarController controller)
    {

        UITabBar myTabBar = controller.TabBar;

        foreach (var barItem in myTabBar.Items)
        {
            barItem.ImageInsets = new UIEdgeInsets(8, 0, 0, 0);
            //barItem.TitlePositionAdjustment = new UIOffset(10, 0);
        }
    }
}

You can check my sample here.

How to add a space between the Tabbar line and the icons in iOS using Xamarin Forms Shell?

1 Answers1