Easiest way to modify screens for "x iPhone notch"
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
Easiest way to modify screens for "x iPhone notch"
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
Thanks,
David
Re: Easiest way to modify screens for "x iPhone notch"
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?
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?
-
- Posts: 746
- Joined: Sun Feb 04, 2007 11:01 pm
- Location: McKenna, WA
Re: Easiest way to modify screens for "x iPhone notch"
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?
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?
Tom
MacBook Pro OS Mojave 10.14
MacBook Pro OS Mojave 10.14
-
- Posts: 746
- Joined: Sun Feb 04, 2007 11:01 pm
- Location: McKenna, WA
Re: Easiest way to modify screens for "x iPhone notch"
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
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
Last edited by quailcreek on Wed Jan 02, 2019 2:46 am, edited 2 times in total.
Tom
MacBook Pro OS Mojave 10.14
MacBook Pro OS Mojave 10.14
Re: Easiest way to modify screens for "x iPhone notch"
Thanks so much for providing options to resolve this issue!
-
- Posts: 746
- Joined: Sun Feb 04, 2007 11:01 pm
- Location: McKenna, WA
Re: Easiest way to modify screens for "x iPhone notch"
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.
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.
Tom
MacBook Pro OS Mojave 10.14
MacBook Pro OS Mojave 10.14
Re: Easiest way to modify screens for "x iPhone notch"
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.
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.
Brian Milby
Script Tracker https://github.com/bwmilby/scriptTracker
Script Tracker https://github.com/bwmilby/scriptTracker
Re: Easiest way to modify screens for "x iPhone notch"
my stack size is 1024 x 768
I have included xphone splash screens
I using fullScreenMode - exact
Thanks for everyone's help,
David
I have included xphone splash screens
I using fullScreenMode - exact
Thanks for everyone's help,
David
-
- Posts: 746
- Joined: Sun Feb 04, 2007 11:01 pm
- Location: McKenna, WA
Re: Easiest way to modify screens for "x iPhone notch"
So you developed your app for the iPad in landscape?
Tom
MacBook Pro OS Mojave 10.14
MacBook Pro OS Mojave 10.14
Re: Easiest way to modify screens for "x iPhone notch"
I have apps in both Landscape and Portrait. For both iPhone and iPad.
-
- Posts: 746
- Joined: Sun Feb 04, 2007 11:01 pm
- Location: McKenna, WA
Re: Easiest way to modify screens for "x iPhone notch"
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.
Tom
MacBook Pro OS Mojave 10.14
MacBook Pro OS Mojave 10.14
Re: Easiest way to modify screens for "x iPhone notch"
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
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
-
- Posts: 746
- Joined: Sun Feb 04, 2007 11:01 pm
- Location: McKenna, WA
Re: Easiest way to modify screens for "x iPhone notch"
I don’t know how you have your cards layed out. You’re going to have to test the changes.
Tom
MacBook Pro OS Mojave 10.14
MacBook Pro OS Mojave 10.14
Re: Easiest way to modify screens for "x iPhone notch"
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.
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.
Brian Milby
Script Tracker https://github.com/bwmilby/scriptTracker
Script Tracker https://github.com/bwmilby/scriptTracker
Re: Easiest way to modify screens for "x iPhone notch"
To optimize the app on all iPhones, don't you have to distinguish between the "X" and "Non-X" iPhones?