[iOS]; How to leave space for top and bottom status bar

Question

I found that hiding the status bar (at least on latest iPhones) does not make much sense since the space on top is partially consumed e.g. by the camera.

Similar issue at the bottom: there is a 'swipe bar' where some space should be left for.

Hence my question: what's the correct way to leave the right amount of space for the status bar on top of the iPhone screen and the 'swipe bar' at the bottom of an iPhone screen?

Thanks in advance

Answer 1

Indeed, making sure that app content isn't obscured by the 'notch' or the bottom swipe area on current-generation iPhones (and some newer Android devices as well) is an important consideration.

Uno Platform handles this using the VisibleBoundsPadding behavior. You can attach this behavior to any compatible container (eg a Panel or Border) and the content of the container will be padded such that stays within the 'safe' area of the screen.

In general you should place all 'content' in your application (eg text, images, interactive elements) within the VisibleBoundsPadding area, but some visual elements eg a full-screen backdrop might go outside of it.

You can place VisibleBoundsPadding anywhere you wish in your app (including multiple locations), though generally it makes sense to place it on or near a root element. It will adjust automatically to rotations and other layout updates.

Here's a simple example:

<Page x:Class="UnoTestbed20.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoTestbed20"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:toolkit="using:Uno.UI.Toolkit"
      mc:Ignorable="d">

    <Grid Background="LightBlue" toolkit:VisibleBoundsPadding.PaddingMask="All">
        <Border Background="LightYellow">
            <TextBlock Text="Hello, world!"
                       Margin="20"
                       FontSize="30" />
        </Border>
    </Grid>
</Page>

And the resulting display on an iPhone 11: