iOS Tutorial iPhone X Safe Area

SS-2018-01-09_10.41.31.png


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:
B4X:
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:
SS-2018-01-09_10.51.06.png


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.
 

Attachments

  • iPhoneX.zip
    4 KB · Views: 718
Last edited:

sorex

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

aminoacid

Active Member
Licensed User
Longtime User
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")
 
Last edited:

MikeH

Well-Known Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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

B4X founder
Staff member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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:

B4X:
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
 
Top