iOS TabbarController overlays content

Question

I have a TabBarController in which I display different pages. The problem is, that the TabBar at the bottom of the pages does not restrict the size of the Content inside the tab, but rather overlays it. Is there a way to change this behavior. Some more information:

I use Xamarin.iOS but to initiate the TabBarController (With Storyboard) but the content of the tabs are Xamarin Forms ContentPages. (Native Xamarin Forms)
Here a picture of my problem

EDIT 1 Here is the code I use to initialize the XF ContentPage:

namespace Happimeter.iOS
{
    public partial class SurveyViewController : UINavigationController
    {
        public SurveyViewController (IntPtr handle) : base (handle)
        {
            //InitializeSurveyView is a XF ContentPage
            var formsPage = new InitializeSurveyView();
            var startSurveyVc = formsPage.CreateViewController();
            PushViewController(startSurveyVc, true);
            startSurveyVc.Title = formsPage.Title;

            //some code omitted for brevity

            NavigationBar.TintColor = UIColor.White;
        }
    }
}

I assign the viewController to the tabBarController within the Storyboard. See below:

Main.storyboard:

<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="49e-Tb-3d3" useSafeAreas="YES">
<device id="retina4_7" orientation="portrait">
    <adaptation id="fullscreen"/>
</device>
<dependencies>
    <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
    <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
    <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    <capability name="Safe area layout guides" minToolsVersion="9.0"/>
</dependencies>
<customFonts key="customFonts">
    <array key="HelveticaNeue.ttc">
        <string>HelveticaNeue</string>
    </array>
</customFonts>
<scenes>
    <!--About-->
    <!--Tab Bar Controller-->
    <scene sceneID="yl2-sM-qoP">
        <objects>
            <tabBarController storyboardIdentifier="tabViewController" id="49e-Tb-3d3" customClass="TabBarController" sceneMemberID="viewController">
                <nil key="simulatedBottomBarMetrics"/>
                <tabBar key="tabBar" contentMode="scaleToFill" id="W28-zg-YXA" clipsSubviews="YES">
                    <rect key="frame" x="0.0" y="618" width="375" height="49"/>
                    <autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMinY="YES"/>
                    <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="custom" customColorSpace="sRGB"/>
                </tabBar>
                <connections>
                    <segue id="83046" destination="82960" kind="relationship" relationship="viewControllers"/>
                    <segue id="91417" destination="91401" kind="relationship" relationship="viewControllers"/>
                    <segue id="96651" destination="96631" kind="relationship" relationship="viewControllers"/>
                    <segue id="100501" destination="95834" kind="relationship" relationship="viewControllers"/>
                </connections>
            </tabBarController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="HuB-VB-40B" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="0.0" y="0.0"/>
    </scene>
    <!--Browse-->
    <!--About-->
    <!--Items-->
    <!--Title-->
    <!--New Item-->
    <!--Login View Controller-->
    <!--Login View Controller-->
    <!--Login View Controller-->
    <!--View Controller-->
    <scene sceneID="82959">
        <objects>
            <navigationController id="82960" sceneMemberID="viewController" customClass="SurveyViewController">
                <navigationBar key="navigationBar" contentMode="scaleToFill" id="82962" translucent="NO">
                    <rect key="frame" x="0.0" y="20" width="375" height="44"/>
                    <autoresizingMask key="autoresizingMask"/>
                    <color key="barTintColor" colorSpace="calibratedRGB" red="0.18823529411764706" green="0.47843137254901963" blue="0.91764705882352937" alpha="1"/>
                    <textAttributes key="titleTextAttributes">
                        <color key="textColor" colorSpace="calibratedWhite" white="1" alpha="1"/>
                    </textAttributes>
                </navigationBar>
                <connections/>
                <tabBarItem key="tabBarItem" title="Item" id="83045"/>
                <simulatedTabBarMetrics key="simulatedBottomBarMetrics"/>
            </navigationController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="82963" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="-495" y="794"/>
    </scene>
    <scene sceneID="91400">
        <objects>
            <navigationController id="91401" sceneMemberID="viewController" customClass="MoodOverviewViewController">
                <navigationBar key="navigationBar" contentMode="scaleToFill" id="91403" translucent="NO">
                    <rect key="frame" x="0.0" y="20" width="375" height="44"/>
                    <autoresizingMask key="autoresizingMask"/>
                    <color key="barTintColor" colorSpace="calibratedRGB" red="0.18823529411764706" green="0.47843137254901963" blue="0.91764705882352937" alpha="1"/>
                    <textAttributes key="titleTextAttributes">
                        <color key="textColor" colorSpace="calibratedWhite" white="1" alpha="1"/>
                    </textAttributes>
                </navigationBar>
                <connections/>
                <tabBarItem key="tabBarItem" title="Item" id="91402"/>
                <simulatedTabBarMetrics key="simulatedBottomBarMetrics"/>
            </navigationController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="91404" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="726" y="-1558"/>
    </scene>
    <scene sceneID="95833">
        <objects>
            <navigationController id="95834" sceneMemberID="viewController" customClass="SettingsPageViewController">
                <navigationBar key="navigationBar" contentMode="scaleToFill" id="95836" translucent="NO">
                    <rect key="frame" x="0.0" y="20" width="375" height="44"/>
                    <autoresizingMask key="autoresizingMask"/>
                    <color key="barTintColor" colorSpace="calibratedRGB" red="0.18823529411764706" green="0.47843137254901963" blue="0.91764705882352937" alpha="1"/>
                    <textAttributes key="titleTextAttributes">
                        <color key="textColor" colorSpace="calibratedWhite" white="1" alpha="1"/>
                    </textAttributes>
                </navigationBar>
                <connections/>
                <tabBarItem key="tabBarItem" title="Item" id="95835"/>
                <simulatedTabBarMetrics key="simulatedBottomBarMetrics"/>
            </navigationController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="95837" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="959" y="-809"/>
    </scene>
    <scene sceneID="96630">
        <objects>
            <navigationController id="96631" sceneMemberID="viewController" customClass="BluetoothPageViewController">
                <navigationBar key="navigationBar" contentMode="scaleToFill" id="96633" translucent="NO">
                    <rect key="frame" x="0.0" y="20" width="375" height="44"/>
                    <autoresizingMask key="autoresizingMask"/>
                    <color key="barTintColor" colorSpace="calibratedRGB" red="0.18823529411764706" green="0.47843137254901963" blue="0.91764705882352937" alpha="1"/>
                    <textAttributes key="titleTextAttributes">
                        <color key="textColor" colorSpace="calibratedWhite" white="1" alpha="1"/>
                    </textAttributes>
                </navigationBar>
                <connections/>
                <tabBarItem key="tabBarItem" title="Item" id="96632"/>
                <simulatedTabBarMetrics key="simulatedBottomBarMetrics"/>
            </navigationController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="96634" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="1350" y="-809"/>
    </scene>
    <scene sceneID="97944">
        <objects>
            <navigationController id="97945" sceneMemberID="viewController" customClass="SignInViewController" storyboardIdentifier="SignInViewController">
                <navigationBar key="navigationBar" contentMode="scaleToFill" id="97947" translucent="NO">
                    <rect key="frame" x="0.0" y="20" width="375" height="44"/>
                    <autoresizingMask key="autoresizingMask"/>
                    <color key="barTintColor" colorSpace="calibratedRGB" red="0.18823529411764706" green="0.47843137254901963" blue="0.91764705882352937" alpha="1"/>
                    <textAttributes key="titleTextAttributes">
                        <color key="textColor" colorSpace="calibratedWhite" white="1" alpha="1"/>
                    </textAttributes>
                </navigationBar>
                <connections/>
                <tabBarItem key="tabBarItem" title="Item" id="97946"/>
                <simulatedTabBarMetrics key="simulatedBottomBarMetrics"/>
            </navigationController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="97948" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="2905" y="-16"/>
    </scene>
</scenes>
<resources>
    <image name="First" width="32" height="30"/>
    <image name="HappimeterLogo" width="261" height="48"/>
    <image name="Second" width="32" height="30"/>
    <image name="XamarinLogo" width="220" height="51"/>
    <image name="happinessfactory" width="202" height="114"/>
</resources>

Are you making use of ["safe area" layout guides?](https://stackoverflow.com/questions/44492404/safe-area-of-xcode-9) — MadProgrammer, Apr 07 '18 at 23:43
It was turned off, I turned it on. Unfortunately the effect is still the same. Anyway, thanks for your suggestion — user2074945, Apr 07 '18 at 23:50
So clearly the XF ContentPage is not taking into consideration the TabBar height when rendering. Could you update your post showing how you are embedding the XF ContentPage? — pinedax, Apr 08 '18 at 22:46
@user2074945 Please share some code about how you set the TabBarController's subViews with Xamarin Forms ContentPages. — Ax1le, Apr 09 '18 at 07:22
Thanks for your comments. I edited the question providing the code I use initialize the contentpage and assign it to the tabbarController — user2074945, Apr 09 '18 at 19:12
Likely duplicate of this question: https://stackoverflow.com/questions/21850831/constraint-to-bottom-layout-guide-with-tabbar-issue?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — TomSwift, Apr 09 '18 at 23:19
@TomSwift thanks for the suggestion. I followed the instructions in the post you linked, however it did not solve the issue. Thus I assume the issue to be caused by Xamarin Forms or xamarin.iOS — user2074945, Apr 09 '18 at 23:51

score 0 · Accepted Answer · answered Sep 05 '18 at 14:37

0

public partial class TabBarController : UITabBarController
{
    public TabBarController(IntPtr handle) : base(handle)
    {
        //this does the trick!
        TabBar.Translucent = false;
    }
}

answered Sep 05 '18 at 14:37

user2074945

537
2
8
22

score 0 · Answer 2 · answered Jan 12 '21 at 15:19

0

This works for me:

class TabBarController: UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()
    
    tabBar.isTranslucent = false
}

answered Jan 12 '21 at 15:19

Roman

860
14
14

iOS TabbarController overlays content

2 Answers2