Hi guys,
We all know the challenge of getting the layout right for various iOS screens. ”The notch” (camera area at the top) is especially annoying, since there’s no easy way of knowing if the user’s device has one or not, and how many pixels it is (there are 4 variants!).
In LC 9.6.3 iphoneDeviceModel was introduced. Where machine() just returns ”iphone”, iphoneDeviceModel() returns e.g. ”iPhone10,6” (=iPhone X) or ”iPad13,7” (=iPad Pro 11 inch).
But the Dictionary entry on iphoneDeviceModel just links to a Wikipedia page listing mammoth tables of Apple device data. There is no way of knowing what ”iPhone10,6” means without a decent lookup table.
So, I’ve made one! And a library to use it with! And a demo stack to test it with!
It will check the device code of the current device, and return an array with values for:
- notch margin
- portrait bottom margin
- landscape bottom margin
- (device model name - in the rare case that you'd need it)
You use these for determining the safe area your UI elements can use, when rearranging them in response to the resizeStack message.
Or e.g. how much taller the Header bar widget needs to be on a ”notch” device in order to look good.
It’s all here and free to get, use and modify as you need:
https://github.com/wheninspace/WISmobDeviceLib
The demo stack has the library in its stack script, and the full lookup array in a cProp, so that stack is all you need really.
Testing must be done by deploying to physical devices though, as iphoneDeviceModel() does not work in the iOS Simulator (or, it works, but just returns a code for the Simulator itself…).
Let me know if anything can be improved on (of course it can)!
The source for my data is this excellent website:
https://www.screensizes.app/ which has comprehensive screen info on every existing iOS device since the first iPhone.
And this list which has the device codes interpreted:
https://gist.github.com/adamawolf/30487 ... _types-txt
Cheers,
Andreas
iphoneDeviceModel lookup library
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- VIP Livecode Opensource Backer
- Posts: 133
- Joined: Tue Feb 23, 2010 10:53 pm
- Location: Saint Louis, Missouri USA
Re: iphoneDeviceModel lookup library
Andreas:
Your post contains tremendous information and the demo stack is very handy!
Thanks for the links to the web pages. They are excellent and will be very useful.
Your efforts are much appreciated!
Bob
Your post contains tremendous information and the demo stack is very handy!
Thanks for the links to the web pages. They are excellent and will be very useful.
Your efforts are much appreciated!
Bob
Re: iphoneDeviceModel lookup library
Thanks Andreas,
I'm sure all iOS developers here will appreciated it!
I know i'll find this useful when i finally get that far into my planned developments so thanks in advance!
Stam
I'm sure all iOS developers here will appreciated it!
I know i'll find this useful when i finally get that far into my planned developments so thanks in advance!
Stam
-
- VIP Livecode Opensource Backer
- Posts: 257
- Joined: Sat Aug 16, 2008 9:48 am
- Location: Stockholm, Sweden
- Contact:
Re: iphoneDeviceModel lookup library
Thanks Bob, thanks Stam, I'm happy if some people will find it useful.
Today I've updated the library with a minor correction (two iPhone 11 versions with notch that weren't included in the script constants).
I've also improved the demo stack a lot, so that it now works in the Simulator, if you indicate which device you will simulate, before deploying.
Two things to note:
1) Whenever Apple releases new iPhones/iPads, the lookup tables will need to be manually updated accordingly. I will keep mine updated as quick as I can, but if you copy the data into your own projects, so as not depend on external sources, you'll naturally need to to the same updating yourself.
2) Every iOS device has a 20 px status bar at the top, which you would always have to take into account in your layout setup. However, the size is the same regardless of device, and it can also be hidden. So that aspect you'll have to handle anyway. My library helps with the problematic variation of the margins needed when dealing with notch devices. The top margin (44-50 px depending on model) then includes the status bar. The margin will be needed even if you hide the status bar, as the notch is taller and cannot be removed...
Today I've updated the library with a minor correction (two iPhone 11 versions with notch that weren't included in the script constants).
I've also improved the demo stack a lot, so that it now works in the Simulator, if you indicate which device you will simulate, before deploying.
Two things to note:
1) Whenever Apple releases new iPhones/iPads, the lookup tables will need to be manually updated accordingly. I will keep mine updated as quick as I can, but if you copy the data into your own projects, so as not depend on external sources, you'll naturally need to to the same updating yourself.
2) Every iOS device has a 20 px status bar at the top, which you would always have to take into account in your layout setup. However, the size is the same regardless of device, and it can also be hidden. So that aspect you'll have to handle anyway. My library helps with the problematic variation of the margins needed when dealing with notch devices. The top margin (44-50 px depending on model) then includes the status bar. The margin will be needed even if you hide the status bar, as the notch is taller and cannot be removed...