Easiest way to modify screens for "x iPhone notch"

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

DR White
Posts: 491
Joined: Fri Aug 23, 2013 12:29 pm
Location: Virginia, USA

Easiest way to modify screens for "x iPhone notch"

Post by DR White » Mon Dec 31, 2018 2:00 pm

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
Posts: 4096
Joined: Sat Feb 25, 2017 10:45 pm

Re: Easiest way to modify screens for "x iPhone notch"

Post by bogs » Mon Dec 31, 2018 5:02 pm

Keep in mind I don't dev for mobile before the bricks start flying :D 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?
Image

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm
Location: McKenna, WA

Re: Easiest way to modify screens for "x iPhone notch"

Post by quailcreek » Mon Dec 31, 2018 11:33 pm

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?
Tom
MacBook Pro OS Mojave 10.14

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm
Location: McKenna, WA

Re: Easiest way to modify screens for "x iPhone notch"

Post by quailcreek » Mon Dec 31, 2018 11:53 pm

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
Last edited by quailcreek on Wed Jan 02, 2019 2:46 am, edited 2 times in total.
Tom
MacBook Pro OS Mojave 10.14

DR White
Posts: 491
Joined: Fri Aug 23, 2013 12:29 pm
Location: Virginia, USA

Re: Easiest way to modify screens for "x iPhone notch"

Post by DR White » Tue Jan 01, 2019 12:07 am

Thanks so much for providing options to resolve this issue!

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm
Location: McKenna, WA

Re: Easiest way to modify screens for "x iPhone notch"

Post by quailcreek » Wed Jan 02, 2019 1:26 am

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.
Tom
MacBook Pro OS Mojave 10.14

bwmilby
Posts: 283
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Easiest way to modify screens for "x iPhone notch"

Post by bwmilby » Wed Jan 02, 2019 3:32 pm

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.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

DR White
Posts: 491
Joined: Fri Aug 23, 2013 12:29 pm
Location: Virginia, USA

Re: Easiest way to modify screens for "x iPhone notch"

Post by DR White » Thu Jan 03, 2019 11:28 am

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

Thanks for everyone's help,

David

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm
Location: McKenna, WA

Re: Easiest way to modify screens for "x iPhone notch"

Post by quailcreek » Sat Jan 05, 2019 12:10 am

So you developed your app for the iPad in landscape?
Tom
MacBook Pro OS Mojave 10.14

DR White
Posts: 491
Joined: Fri Aug 23, 2013 12:29 pm
Location: Virginia, USA

Re: Easiest way to modify screens for "x iPhone notch"

Post by DR White » Sat Jan 05, 2019 1:10 pm

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

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm
Location: McKenna, WA

Re: Easiest way to modify screens for "x iPhone notch"

Post by quailcreek » Sun Jan 06, 2019 12:39 am

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.

iPhone 6_05.png
iPhone 6_06.png
Tom
MacBook Pro OS Mojave 10.14

DR White
Posts: 491
Joined: Fri Aug 23, 2013 12:29 pm
Location: Virginia, USA

Re: Easiest way to modify screens for "x iPhone notch"

Post by DR White » Sun Jan 06, 2019 8:12 pm

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
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm
Location: McKenna, WA

Re: Easiest way to modify screens for "x iPhone notch"

Post by quailcreek » Sun Jan 06, 2019 10:43 pm

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

bwmilby
Posts: 283
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Easiest way to modify screens for "x iPhone notch"

Post by bwmilby » Mon Jan 07, 2019 3:37 pm

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.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

DR White
Posts: 491
Joined: Fri Aug 23, 2013 12:29 pm
Location: Virginia, USA

Re: Easiest way to modify screens for "x iPhone notch"

Post by DR White » Tue Jan 08, 2019 12:52 pm

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

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”