iPhone X notch in screen

I just watched the Apple keynote that launched the iPhone X. It appeared that app content flows around the notch (and video has a bit missing for the notch). It looks like it could be an issue if you have GUI elements across the top of the screen (as I do). Are they going to go missing in the notch?

 

Maybe we'll have to custom design our UI's to account for it and the rounded corners.

 

You’ll also need to consider the area at the bottom of the screen for the home screen gesture indicator in both portrait and landscape orientations. Apple has posted Human Interface Guidelines for iPhone X, which recommends adapting your app’s UI to a “safe area” on the screen.

 

Pre-existing apps will have black bars in non-safe parts of the screen.
You will have to rebuild with new Xcode and re-submit it to the app store to get access to full screen. You should be able to experiment with that in Simulator.

 

So I'm going to have to layout the top of the screen differently to account for this device, and it looks like I will have to totally change my game at the bottom because you drag pieces from near the bottom.

 

There go all the screen-corner-pixel hidden debug menus

 

It would be great if Unity added an Player Setting option to clip the screen rect to exclude the "horns" on the iPhone X.

A quick and dirty manual fix for landscape only apps is to edit the UnityAppController.mm file in the Xcode project, replace the line:

Code (csharp):

1.     _window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen].bounds];

with:

Code (csharp):

1.     CGRect winSize = [UIScreen mainScreen].bounds;
2.     if (winSize.size.width/winSize.size.height > 2) {
3.         winSize.size.width -= 32;
4.         winSize.origin.x = 32;
5.     }
6.     _window = [[UIWindow alloc] initWithFrame: winSize];

Although this does misalign the splash screen and first scene, which might be an issue for some.

 

Yeah... although... they didn't really bother when they showed examples in the keynote.

 

That is a good idea. It would save tons of developer's time tweaking their UI's just for iPhone X.

 

It's not just the horns (we can live with the status bar in our portrait view), but the swipe indicator as well.
Watching the video explains the problems.
https://developer.apple.com/videos/play/fall2017/801/

What we really need is a way for Unity to feed us the "Safe Area" of the screen via an API call that we can then set RectTransforms in the UI to and do our best to try to accommodate the spacing as best we can in the app. Apple... I love you and hate you. I REALLY hate that swipe indicator overlapping all of my applications. I really wish they would have just put the home button on the side.

 

I wonder what happens to the status bar in landscape orientation.

 

I do too, based on what I've been able to find out, there no longer is a landscape status bar in the iPhone X simulator.

 

What aspect ratio will the safe area be for existing apps? 16:9?

 

and will it be the same aspect ratio in portrait and landscape? Or will it change like this...

 

The notch on the iPhone X has been the subject of a great deal of debate even before the keynote.

 

Maybe use those "notch sides" to place UI elements like a pause button or something else?

 

@Mantas-Puida Can you tell me the aspect ratio of the safe area for existing Unity apps please?

 

Hi all ... if this is helpful to anyone, I've been able to work out the exact pixel values for the safe area for iPhone X using Xcode 9.0, assuming you don't use native UI Kit views. So this is for landscape orientation:

iPhone X overall dimensions
2436 x 1125 pixels

Overall safe area
2172 x 1062 pixels

Left & right insets (accounts for the notch and curved corners, plus a margin)
132 pixels each

Bottom inset (accounts for the bottom nav bar)
63 pixels

Top inset
zero pixels

 

using my previous post you could work out the ratio from that.

 

Hi @Mantas-Puida =) I was just wondering if you know roughly when the device generation enum might be updated with the latest iPhone models, particularly the X to help make X only UI tweaks. I can pipe in my own detection if need be, but if it's expected in an upcoming patch version that'd be great to know, thanks! =)

 

If anyone wants to pipe in their own solution, you could use the good old uidevice-extenision:
https://stackoverflow.com/questions...evice-make-and-model-on-ios/11197770#11197770

New model codes are apparently this, they are untested though obviously... so take care to research further if you're relying on them:
iPhone10,1 - iPhone 8 CDMA
iPhone10,4 - iPhone 8 GSM
iPhone10,2 - iPhone 8 Plus CDMA
iPhone10,5 - iPhone 8 Plus GSM
iPhone10,3 - iPhone X CDMA
iPhone10,6 - iPhone X GSM

 

That tells us the safe area of the device, but not necessarily the safe area that existing Unity apps will use. It would be a bit crazy for all existing Unity apps to use 2172 x 1062 pixels when in landscape!

 

@Jde When you're saying existing apps, do you mean apps that have not been built using the latest iOS SDK? Sorry my info was in relation to apps built with the latest SDK. Are you more wondering what the letterboxed area will be if you've not built using the latest SDK? using the term 'safe area' confused me because this has just become the new way to describe the area that we're not meant to add anything interactive outside of or show any UI that gets cut off on the notch or rounded corners otherwise your app is likely to be rejected.

I just did a quick test to try and find out the letterboxed area for apps that have not been prepared to support the X. I created a new project using single app template. Changed the launch storyboard to use the older launch image asset catalogue and deliberately did not add anything to support the new iPhone X, this would simulate an old app that has not been prepared for the X. After running the app and seeing the black letterboxing and printing out the UIScreen.main.bounds I'm getting width of 536@3x and 320@3x. So resolution of 1704 x 960 which is pretty close to 16:9. But that seems like a lower resolution than I expected, which suggests that there's could be some hardware upscaling going on when run on the X. Adding the default launch.storybaord back in ie. so that the app is appearing to support the X, then the screen bounds prints at the expected X res of 812@3x and 375@3x.

 

@Jde Update: Adding to my previous post. So in my hasty test, I'd only added a single image to the old style launch assets catalogue which happened to be an iPhone5 sized launch image. So that's why the app was running 536@3x and 320@3x... ie. iPhone 5 runs at 536@2x and 320@2x and the results I posted above for 1704x960 res is probably what happens if you have really old iOS app that hasn't been updated to even support iPhone 6 or 7. So for a much better test I've add launch images for every resolution / iOS generation except for the X, and now the view is printing values of 667@3x and 375@3x. This is looking much better, so again this is pretty much a 16:9 ratio at 2001x1125 pixels for the letterboxed area, and it also matches the resolution difference that are in apples guidelines where they mention how the X is 145@3x taller/wider than 6-8 non-plus models. https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

 

Thanks for that Jason! That's very useful info. I was assuming it would be 16:9 so thanks for confirming.

 

No worries

 

Any idea how to fix in Unity way UGUI for the notch?

 

Take a look at the last post, that might help. https://forum.unity.com/threads/iphone-8-8plus-x-support.498078/

 

hi - is there a way to force the "black bars in non-safe parts" with Xcode 9 and Unity 5.6.4p1 please?

 

I do know that if you’re using a launch asset catalogue, simply built excluding iPhone X launch images it will run in letterboxes mode. But if you’re using a storyboard/xib launch asset I’m not sure how you specify or control device support, by default when building using Xcode 9.1 this method would run in on the full screen of X. Without looking in to it further I’m sure there must be a way to either set a property or provide a list of exclusions on what devices are supported by the launch storyboard/xib.

 

i build it with latest xcode version, and run it on simulator, but i get black in non-safe areas again... what i must do! i use 2017.2.0f3

 

You need to use launch assets sized for the iphone x (portrait and landscape) and listed in your launch asset catalogue.. OR.. you need to use a launch XIB/Storyboard ie. in Unity using one of the options like Relative/Constant sized splash/launch image.

 

do you answer my question?!

 

Yes.. but sorry I should check. Are you wanting to 'have' black bars? or are you wanting to support the iPhone X? if you want to support the X you need to follow my suggestion ^

 

Everyone should be aware that you most definitely should be building with Xcode 9.1 or newer for ensured X support.

 

i use latest xcode, install it today, and i don't want black bars. and i don't really understand your suggestion. would you please tell it more clear?

 

No worries. Ok so what setting do you use in the iOS Player Settings for iPhone Launch screen type? Do you use None?

 

If you use None, then I'm guessing you're relying on the Legacy launch images, and you will need to change this setting so you're using a launch xib/storyboard... OR... you will need to modify the legacy launch asset catalogue that's referenced in xcode so that it includes iPhone X launch assets.

 

So for example... you will need to modify the file in the xcode project: LaunchImage.launchImage/Contents.json to include some entries for the iPhone X launch assets:

Code (CSharp):

1. {
2.             "orientation" : "portrait",
3.             "idiom" : "iphone",
4.             "extent" : "full-screen",
5.             "filename" : "Default-Portrait-812h@3x.png",
6.             "minimum-system-version" : "11.0",
7.             "subtype" : "2436h",
8.             "scale" : "3x"
9.         },
10.         {
11.             "orientation" : "landscape",
12.             "idiom" : "iphone",
13.             "extent" : "full-screen",
14.             "filename" : "Default-Landscape-812h@3x.png",
15.             "minimum-system-version" : "11.0",
16.             "subtype" : "2436h",
17.             "scale" : "3x"
18.         }

 

The more recommended way of supporting the iPhone X is to use a storyboard option which will make your app more future proof. But ^ this is considered the old school way of doing it, and you probably won't even find that code example anywhere on the iOS developer guidelines unless it's been added recently. I had to work that out the hard way by following conventions and testing in the simulator.

 

Thanks man, its perfect answer, i use storyboard and it works thanks again, i find the link for this too:
https://oleb.net/blog/2014/08/replacing-launch-images-with-storyboards/

 

No worries =)

 

and a question about iPhone-X in unity, i use this code to find out if its iphone X or not:
if(SystemInfo.deviceModel == "iPhone10,3" || SystemInfo.deviceModel == "iPhone10,6")...
you think it works?

 

Latest versions of Unity have this now: Device.generation == DeviceGeneration.iPhoneX

Another way could be the res. It's not recommended, but if this code only runs on iOS then there's no other devices at the moment with that resolution. if ( (Screen.width == 2436 && Screen.height == 1125) || Device.generation == DeviceGeneration.iPhoneX ){

 

If was thinking to implement the safe areas by using a panel as a parent of all UI elements.
Normally, the panel is set to: stretch and left top right bottom to: 0,0,0,0, so it won't do anything. But if the device is an X, I will adjust the size of the panel by script, so that it leaves some safe area. This is theoretically.

 

That is great idea. Plus Unity have recently added an API to return the safe areas. It'd be a good idea to setup a UI framework that reads the values from these API methods, you could set some UI Layout Elements or some other kind of container UI elements to reflect the safe areas and then the rest of your UI can anchor off them. I'm most certainly going to be looking at this setup on my next project. Nice suggestion! =)

 

It tried it, even though I don't have an X to test it, it does seem to work. As long as

Code (CSharp):

1.  if ( (Screen.width == 2436 && Screen.height == 1125)

works

all in all I have this script attached to a panel (works only in landscape I think):

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.iOS;
5.  
6.  
7. public class iPhoneXFix : MonoBehaviour {
8.  
9.     // Use this for initialization
10.     void Start () {
11.         if ((Screen.width == 2436 && Screen.height == 1125)) {
12.             Debug.Log ("iPhone X detected!");
13.             // [ left - bottom ]
14.             gameObject.GetComponent<RectTransform>().offsetMin = new Vector2(20f, 10f);
15.             // [ right - top ]
16.             gameObject.GetComponent<RectTransform>().offsetMax = new Vector2(-20f, 0f);
17.         }
18.     }
19. }
20.  

 

What are the apis added? I do not find them.
Unity 2017.2.0p2

 

I already found what I was looking for !!
Screen.safeArea

 

Ah great, but how do you use that with a UI in Unity?