Easiest way to modify screens for "x iPhone notch"

[DR White]

I have 5 apps in iPhone App store from the last couple of years. I am getting more and more negative comments about difficulty in navigating because of the notch at the top of the new iPhone X. I was hoping that apple would remove it by now, but of course it has not. What are some work around options?

Thanks,

David

[bogs]

Keep in mind I don't dev for mobile before the bricks start flying but couldn't you move the (text/button/field/label/whatever) down 50-100 pixels (or whatever the size of the notch is) ? I realize that may not be a beautiful solution, so my 2nd idea is maybe not the best either.

That would be to put part of your control system to either side of the notch. Excuse the 'ascii' sketch, but something like -

----------\_______/--------------
{graphic}...........[control] |
________________________ |
rest of your program below|
this area.............................|

Something like that?

[quailcreek]

One of the problems is determining which iPhoneX your app is running on.
We're having a discussion about that here:
viewtopic.php?f=49&t=30679

Once you have the screen size it's pretty simple, albeit time consuming, to write the script to reposition the controls.

The iPhone X and Xs are the same size and the Xs Max and Xr are the same size. Currently there is only an iPhone X splash screen choice in the iOS standalone settings. I have requested LC add the Xs Max/Xr choice. They will be added in 9.0.3 rc1

Here's the bug report:
https://quality.livecode.com/show_bug.cgi?id=21767

I've been working on this for some time now and I have not been able to find a combination of splash screen and fullScreenMode which provides a workable solution for scaling apps to the iPhoneX screens.

I have been developing my apps using the 6 Plus screen size (414x736) because the middle of the screen is an even number. Then, using fullScreenMode set to exactFit, my apps all scale correctly on all Android and iPhones except the iPhoneX. If an app is developed using the iPhone 5 screen size (320x568) the app will scale automatically, without using fullScreenMode, for all iPhones except the iPhone X.

I'm preparing to write an enhancement request to have the machine() function return the iPhone type not just "iPhone". That would be a more reliable way of determining which iPhone your app is running on. I suspect the Apple may have this locked out.

To further my research on this, I have a question for iOS developers. What screen size are you using to develop your apps and why and dose it work on iPhoneX?

[quailcreek]

Here's the enhancement request for machine() to return the model of the iPhone. I requested a new function rather than changing machine() because that wouldn't be backward compatible.

https://quality.livecode.com/show_bug.cgi?id=21769

The request to add iPhone Xs Max and Xr splash screen.

https://quality.livecode.com/show_bug.cgi?id=21767

Bug report regarding the iPhone X scaling problem.

https://quality.livecode.com/show_bug.cgi?id=21771

[DR White]

Thanks so much for providing options to resolve this issue!

[quailcreek]

Dr White,
What size is the stack on your apps?
Did you include an iPhone X splash screen?
Are you using fullScreenMode and if so which one?

Maybe I can point you in the right direction.

[bwmilby]

In order to scale and reposition, you will need to do some math. I’ll need to dig up the list thread on a scale demo stack that I built. The stack will remain at the size as developed but the coordinate system will need to be adjusted to get things visually where you want them. In ShowAll, the top left point will only be 0,0 on the same size device as the dev stack.

Due to the height of the X screen you will not be able to get anything to show at the top without manual positioning unless you accept a good bit of cropping on the long sides. I don’t think this is a bug in the resize/fullScreenModes that are built into LC. Once the proper splash is in place, then you can work the issue for the larger screens. You can hack that if you want to push an app with a correct size. Until then the device will do its own scaling to adjust from the closest splash to actual on top of the LC scaling.

I’ve actually changed my position somewhat and think that in many cases a resize handler is actually the best option.

[DR White]

my stack size is 1024 x 768
I have included xphone splash screens
I using fullScreenMode - exact

Thanks for everyone's help,

David

[quailcreek]

So you developed your app for the iPad in landscape?

[DR White]

I have apps in both Landscape and Portrait. For both iPhone and iPad.

[quailcreek]

The only thing I can suggest right now is to try using fullScreenMode set to showAll on the iPhoneX. exactFit with a splash screen included causes the screen to stretch. I have attached screen captures.

[DR White]

Tom,

Your solution looks Great, but won't I have to re-do all my graphics that are currently laid out on my 768 x 1024 stack? Also, on the non-Xphone won't it have extra background at the top and bottom (like your bottom image)?

Thanks,

David

[quailcreek]

I don’t know how you have your cards layed out. You’re going to have to test the changes.

[bwmilby]

I think some amount of design work or resize handler will be required. The aspect ratio is very different on the taller phones so there will need to be additional blank space in the UI.

Using showAll (as below) you can design a background image that will have your desired content outside of the stack rect though. Your navigation bars would just not be at the extreme top/bottom of the phone and Apple may not like that.

[DR White]

To optimize the app on all iPhones, don't you have to distinguish between the "X" and "Non-X" iPhones?