iOS Tutorial iPhone X Safe Area

Discussion in 'iOS Tutorials' started by Erel, Jan 9, 2018.

  1. Erel

    Erel Administrator Staff Member Licensed User

    [​IMG]
    (image source: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)

    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:
    Code:
    Sub Page1_Resize (Width As Float, Height As Float)
       
    Dim r As Rect = Page1.SafeAreaInsets
       pnlRoot.SetLayoutAnimated(
    01, 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:
    [​IMG]

    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.
     

    Attached Files:

    Last edited: Jan 9, 2018
    martin24 and jahswani like this.
  2. sorex

    sorex Expert Licensed User

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

    Erel Administrator Staff Member Licensed User

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

    The correct resizing code is:
    Code:
    pnlRoot.SetLayoutAnimated(01, r.Left, r.Top, Width - r.Right - r.Left, Height - r.Bottom - r.Top)
     
  4. Amin Ismail

    Amin Ismail Member Licensed 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: Mar 9, 2018
  5. MikeH

    MikeH Well-Known Member Licensed User

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

    Amin Ismail Member Licensed 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
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    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.

    No. It depends on the layout controller used and the orientation.
     
  8. Amin Ismail

    Amin Ismail Member Licensed 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:

    Code:
    Private Sub Page1_Resize(Width As Int, Height As Int)
        
    If gmap.IsInitialized Then gmap.SetLayoutAnimated(0100, 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
     
Loading...