Search code examples
xamarinxamarin.formsc#-4.0xamarin.iosxcode4

App showing white space at bottom of screen for iOS 13+ iPhones but it is fine with iOS 12 iPhones


The iOS app showing white space at bottom of screen for iOS version 13+ devices but it's fine with iOS 12 devices.

This is a Xamarin.Forms project and I used CustomTabbedPage which render with TabbedPageRenderer class which defined in Xamarin.iOS project.

Kindly suggest me good approach or solutions.

screenshot:

enter image description here

Code snippet:

using MyProject.Infrastructure.Controls;
using CoreGraphics;
using System;
using System.ComponentModel;
using System.Threading.Tasks;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(MyProject.iOS.Renderers.TabbedPageRenderer))]
namespace MyProject.iOS.Renderers
{
    public class TabbedPageRenderer : TabbedRenderer
    {
        private bool _disposed;
        private const int TabBarHeight = 49;
        private int systemVersion = 0;

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

            if (e.OldElement != null)
            {
                e.OldElement.PropertyChanged -= Element_PropertyChanged;
            }

            if (e.NewElement != null)
            {
                e.NewElement.PropertyChanged += Element_PropertyChanged;
            }
        }

        public override void ViewWillLayoutSubviews()
        {
            if (Element is CustomTabbedPage element)
            {
                OnTabBarHidden(!element.Visibility);
            }
        }

        private void Element_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == CustomTabbedPage.VisibilityProperty.PropertyName)
            {
                if (Element is CustomTabbedPage element)
                {
                    OnTabBarHidden(!element.Visibility);
                }
            }
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);
            _disposed = true;
        }

        private async void OnTabBarHidden(bool isHidden)
        {
            if (_disposed || Element == null || TabBar == null)
            {
                return;
            }

            await SetTabBarVisibility(isHidden);
        }

        private async Task SetTabBarVisibility(bool hide)
        {
            TabBar.Opaque = false;
            if (hide)
            {
                TabBar.Alpha = 0;
            }

            UpdateFrame(hide);

            // Show / Hide TabBar
            TabBar.Hidden = hide;
            RestoreFonts();

            // Animate appearing 
            if (!hide)
            {
                await UIView.AnimateAsync(1.0f, () => TabBar.Alpha = 1);
            }
            TabBar.Opaque = true;

            ResizeViewControllers();
            RestoreFonts();
        }

        private void UpdateFrame(bool isHidden)
        {
            CoreGraphics.CGRect tabFrame = TabBar.Frame;
            tabFrame.Height = isHidden ? 0 : TabBarHeight;
            TabBar.Frame = tabFrame;
        }

        private void RestoreFonts()
        {
            // Workaround to restore custom fonts:
            if (TabBar.Items != null)
            {
                foreach (UITabBarItem item in TabBar.Items)
                {
                    string text = item.Title;
                    item.Title = "";
                    item.Title = text;
                }
            }
        }

        private void ResizeViewControllers()
        {
            foreach (UIViewController child in ChildViewControllers)
            {
                child.View.SetNeedsLayout();
                child.View.SetNeedsDisplay();
            }
        }
    }
}

Solution

  • Resize the page's frame every time you set the TabBar.Hidden to ture/false:

    public override void ViewDidLayoutSubviews()
    {
        base.ViewDidLayoutSubviews();
        var frame = View.Frame;
        var tabBarFrame = TabBar.Frame;
        if ((Element as TabbedPageBottom).IsHide)
            {
                TabBar.Hidden = true;
                Page.ContainerArea = new Rectangle(0, 0, frame.Width, frame.Height);
            }
            else
            {
                TabBar.Hidden = false;
                Page.ContainerArea = new Rectangle(0, 0, frame.Width, frame.Height-tabBarFrame.Height);
            }
    }
    

    Refer: Tabbed Page TabBar leaving blank space when hidden.