Inspiring

Question

Apps needs to support the notch

Forum|Forum|7 years ago
February 15, 2018
5 replies
3003 views

All new iPhone apps will be required to support the notch in April - Neowin

I share this news with Adobe AIR Developers team.

They can be interested by it as April is coming fast, and they have to implement this function in the next AIR version..

Development

This topic has been closed for replies.

Colin Holgate

Inspiring

I just finished an app update where one of the things we did was to support iPhone X better. I did at first use the Simulator (I want to write an article on how to get Simulator to test AIR apps on iPhone X!), but then I got a real iPhone X. That made testing quicker, as well as clearly seeing the notch.

Aside from having to create extra width on a lot of the graphics, I had the problem of placement of buttons. Up until iPhone X (and S8/S9), I was able to rely on there being no devices wider than 16:9, and so my left side buttons (this is for a landscape app) could be placed at where the left edge of a 16:9 screen would be. For iPhone X that had two problems; the button wouldn't be as far left as it could be, and in the case of a vertically centered button it would be under the notch.

Here is how I know the ratio of the screen:

var screenwidth:Number = Math.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

var screenheight:Number = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

var screenratio:Number = screenheight / screenwidth;

I then set the left arrow button to the bottom of the screen if it's a screen as wide as iPhone X:

if(screenratio<(.562)) left_arrow.y = 455;

So, in working this way I don't have to worry about the screen size, just its ratio. It does mean that Android phones that are as wide as iPhone X (none of them are yet) would have the button sat somewhere to avoid a notch that isn't there, but it looks fine anyway.

I'm pretty sure an Android phone maker will start having notches one day!

Lars Laborious

Legend

Colin, did you ever try the Capabilities.os on a real iPhone X? Also it would be really great if you wrote that article on how to use the Simulator to test AIR apps on iPhone X

Colin Holgate

Inspiring

I just tried (I checked the screen height too):

Without correct splash screen: iPhone OS 11.4.1 iPhone10,6 960

With correct splash screen: iPhone OS 11.4.1 iPhone10,6 2436

IGZN

Inspiring

Currently I'm using the display size to detect if it's an iPhoneX. 2436px is the height (or 812pt if you consider contentScaleFactor). All my apps look good on iPhoneX, basically you need some additional padding at the sides for the notch and the home button

Frédéric C.

Inspiring

I'd be very interested in a recapitulation of the best ways to handle this with Air please.

Especially:

- How to detect we are running on an iPhone X (capabilities or screen resolution?)

- What is the exact name of the splash screen to be packaged with the app?

pravishtis

Adobe Employee

Hi,

-Can you please check once with Capabilities.os (Capabilities - Adobe ActionScript® 3 (AS3 ) API Reference) to check for iPhone X.

-Splash screens for iPhone X need to be named as - Default-812h@3x~iphone.png(Portrait) and Default-Landscape-812h@3x~iphone.png(Landscape). For more details, please refer Launch Images on iOS with Adobe AIR.

Thanks,

Pravishti | Adobe AIR Engineering

Frédéric C.

Inspiring

Thank you all for the tips!

I'd like to detect the iPhone model without having to use an ANE, if possible.

I checked the Capabilities.os string, with the following code:

public function isiPhoneX():Boolean

{

var os:String;

os = Capabilities.os;

if (os.indexOf("iPhone10,3") > -1 || os.indexOf("iPhone10,6") > -1)

{

return (true);

}

else

{

return (false);

}

However, on the iPhone X simulator, the "os" string is "iPhone OS 11 x86_64". Is it because of the simulator? If I use the code above on a real device, will it work? Thank you very much!

C

chaky

Inspiring

What exactly Adobe needs to implement to support the notch on the iPhone X? That has nothing to do with Adobe. Your application needs to support it, not Adobe.