iOS Tutorial iPhone X Safe Area

As you can see in the above image, the screen area near the top and bottom are considered unsafe. Meaning that you shouldn't put anything important on these areas as they are less accessible or partially hidden.

You can use the new Page.SafeAreaInsets property to find the four required offsets and adjust the content layout.

Page.SafeAreaInsets returns a Rect object. Don't treat it as a rectangle. Treat it as a set of four offsets:

Sub Page1_Resize (Width As Float, Height As Float)
   Dim r As Rect = Page1.SafeAreaInsets
   pnlRoot.SetLayoutAnimated(0, 1, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)
End Sub

The four values will be 0 for devices other than iPhone X.

A simple way to handle it is with a "main" layout that includes a panel named pnlRoot. This panel will be resized with this code.
The actual content layout is loaded to this panel.

The result is:

The pink background is set in the main layout.

As the offsets returned are 0 for other devices, the panel will cover the whole available area.

 

[sorex]

will the red area expand to just under the curves above "Page" for full screen apps?

 

[Erel]

Yes. Note that there was a bug in the previous example code. It was updated.

The correct resizing code is:

pnlRoot.SetLayoutAnimated(0, 1, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)

 

[aminoacid]

Would this be a good way to also detect if we are running on an iphone X?

If r.top+r.bottom+r.left+r.right<>0 then Log("This is an iphone X")

 

[MikeH]

Would this be a good way to also detect if we are running on an iphone X?

If r.top+r.bottom+r.left+r.right=0 then Log("This is an iphone X")

I think I just used: If r.top > 0 then .... in Rolly Bomb

 

[aminoacid]

I logged "r" and this is what I got running it in the iphone X simulator on a MAC:

Landscape 812x375: r.top=0, r.bottom=21, r.left=44, r.right=44
Portrait 375x768: r.top=0, r.bottom=34, r.left=0, r.right=0

Does not quite sense since one would expect r.top to be greater than 0

 

[Erel]

Would this be a good way to also detect if we are running on an iphone X?

The nice thing about SafeAreaInsets is that you don't need to treat iPhone X in any special way. It works correctly on all devices.

Does not quite sense since one would expect r.top to be greater than 0

No. It depends on the layout controller used and the orientation.

 

[aminoacid]

Actually, I used SafeAreaInsets to detect an iPhone X and move 2 buttons (on a Google Map) slightly upwards which were covering the Home Indicator bar at the bottom in Portrait Mode. I also wanted the Google Map to fill the entire screen and not just the safe area. It worked great. Here is the code I used:

Private Sub Page1_Resize(Width As Int, Height As Int)
    If gmap.IsInitialized Then gmap.SetLayoutAnimated(0, 1, 0, 0, Width, Height)
    Dim r As Rect = Page1.SafeAreaInsets
    If r.Bottom+r.Left+r.Right+r.Top <> 0 Then            'if iPhone X
        If Height=768 Then                                'in Portrait mode
            btnSettings.Top=btnSettings.Top-10            'Move the buttons up to clear Home Indicator
            btnDistress.Top=btnDistress.Top-10
        End If
    End If
End Sub