[iOS] best way for Notch detection and notch position

sipahiro

Hello, I'm currently using the code below for notch detection for iOS. I just wonder if this is the best way for the job. Furthermore, my game is in full screeen landscape mode. The reason for notch detection is that I could offset some UI items. As the player could rotate the mobile, the notch may either be on left or right hand side. I just couldn't figure out a way to detect device directions...Is it something possible to achieve? Thanks in advance!

public static function isIPhoneXVariant():Boolean { var longSide:int = MathUtil.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY); return SystemUtil.isIOS && (longSide == 1792 || longSide == 2436 || longSide == 2688); }

htmiel

For a landscape app, this works for me:

if(Starling.current.nativeStage.orientation == "rotatedLeft"){
	notchLocation = "right"
} else {
	notchLocation = "left"
}

If you don't use Starling, you can replace Starling.current.nativeStage with stage

sipahiro

htmiel Thanks so much! I do use Starling and that's exactly what I'm looking for. I will give it a try!

htmiel

And since there are not too many iOS devices, I keep a list of all models, and include properties for: notch, rounded corners, and notch size.

iPad Pro (12.9in, 2nd) has rounded corners, while iPad Pro (10.5in) does not have rounded corners (in case your UI is affected by rounded corners).

iPhone X has a 90 pixel notch, while iPhone XR has a 66 pixel notch.

ma

Hi,

I highly recommend you consider using the "safe area" insets rather than keeping a list of notch heights. These insets will account for corners etc and be symmetric on the device. Apple guidelines actually state the ui content should be symmetric so if you get a pedantic review they could fault you on it:

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

There is a good video on it below as to why the ui elements should be in this symmetric safe area (to do with muscle memory):

https://developer.apple.com/videos/play/tech-talks/801/?time=546

htmiel

ma That sounds great, but how can the "safe area" be detected in AS3?

ma

I use our Application ANE to get them:

var cutout:DisplayCutout = Application.service.display.getDisplayCutout();

This contains the 4 safe inset dimensions:

safeInsetBottom
safeInsetLeft
safeInsetRight
safeInsetTop

https://distriqt.github.io/ANE-Application/u.Display%20-%20Cutouts