Xamarin.forms: [Bug, iOS] Tabbed Page TabBar leaving blank space when hidden.

Created on 4 Nov 2019  路  4Comments  路  Source: xamarin/Xamarin.Forms

Description

When using a Tabbed Page custom renderer, a blank space will be left where the Tab Bar was when the TabBar.Hidden property is set to true.
Also, the TabBar frame's height is being reset somewhere between ViewWillAppear and ViewDidAppear.
TabBar height can be forced to 0 by overriding the View property and setting the TabBar frame height to 0.

Steps to Reproduce

  1. Create a Tabbed Page Custom Renderer.
  2. Set the TabBar.Hidden property to true in the constructor.
  3. Set the TabBar.Frame height to 0 in the ViewWillAppear method.

Expected Behavior

Tab Bar is not visible, page stretches to fill now empty space.

Actual Behavior

Tab Bar is hidden, page does not stretch leaving a blank space where the Tab Bar was.

Basic Information

  • Version with issue: 4.2.0.709249
  • IDE: Visual Studio 2019
  • Platform Target Frameworks:

    • iOS: 13.1

  • Nuget Packages:
  • Affected Devices: iPhone 8 Plus, iPhone 11 Pro

Screenshots

image

Reproduction Link

https://github.com/Nathan-Coit/XamarinHideTabbarTest/tree/master/TabBarTestApp

2 good first issue hackathon help wanted inactive iOS 馃崕 bug up-for-grabs

Most helpful comment

Page Page => Element as Page;
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);
}
}
I tried and it works

All 4 comments

In ViewDidLayoutSubviews for the TabbedRenderer, it looks like it's taking the TabBar's frame into account even if the TabBar is hidden (and a hidden TabBar apparently still has height).

In ViewDidLayoutSubviews for the TabbedRenderer, it looks like it's taking the TabBar's frame into account even if the TabBar is hidden (and a hidden TabBar apparently still has height).

I have try to set
private void UpdateFrame(bool isHidden)
{
var tabFrame = this.TabBar.Frame;
tabFrame.Height = isHidden ? -100 : TabBarHeight;
this.TabBar.Frame = tabFrame;
}

But it still white space

Page Page => Element as Page;
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);
}
}
I tried and it works

Hi, any news on this issue? Unfortunately solution above doesnt work for me.

Was this page helpful?
0 / 5 - 0 ratings