Search code examples
c#iosxamarinxamarin.formscustom-renderer

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


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: enter image description here

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


Solution

  • 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.