IOS Physical device safe area how

iOS
1

using MG 3.8.1 tried to use GraphicsDevice.Viewport.TitleSafeArea to get the area of the screen that does not get covered by things like the camera or the swipe bar, but this returns a rectangle that is the whole screen even on real devices. The simulator doesn’t have the cutouts so I would expect it there, but how do I know how to avoid placing things under the area where the camera is?

2

We also had issues with newer iPhone notches for our recent iOS game. We elected to just render the whole game “inside” of the safe area (leaving black around the notch), like so:

UIKit.UIWindow uiWindow = (UIKit.UIWindow)Program.game.Services.GetService(typeof(UIKit.UIWindow));
if (uiWindow != null)
{
	float iosDensity = (float)Microsoft.Maui.Devices.DeviceDisplay.MainDisplayInfo.Density;

	int top = (int)Math.Round(uiWindow.SafeAreaInsets.Top * iosDensity);
	int right = (int)Math.Round(uiWindow.SafeAreaInsets.Right * iosDensity);
	int bottom = (int)Math.Round(uiWindow.SafeAreaInsets.Bottom * iosDensity);
	int left = (int)Math.Round(uiWindow.SafeAreaInsets.Left * iosDensity);

	screenPos = new Point(left, top);
	screenSize = new Size(graphics.GraphicsDevice.Viewport.Width - left - right, graphics.GraphicsDevice.Viewport.Height - top - bottom);
}
else
{
	screenPos = new Point(0, 0);
	screenSize = new Size(graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height);
}

*requires Maui Essentials

It would be better if you handled elements that need to be visible (buttons, ui, etc) separately from the background, so the background could still render under the notch, but this is a simple approach that will avoid the notch issue without having to refactor anything else.

3

Worked like a charm again. I ended up using it to set the safe area rectangle like what was expected from the monogame property then using that to offset the intractable UI components while leaving everything else flow to the whole screen.

Thanks again, you rock.

also for anyone stumbling on this post in the future, to use Maui like in this example, add <UseMauiEssentials>true</UseMauiEssentials> to the property group in the csproj file.

<PropertyGroup>
    <TargetFramework>net6.0-ios</TargetFramework>
    ...
    <UseMauiEssentials>true</UseMauiEssentials>
</PropertyGroup>
1 Like