From The Blog: iOS 11 update: icons and safe area APIs

Getting Started Announcements
#1

Now that iOS 11 has been officially released, there are several things you must do to prepare iOS apps for submission to Apple. Also, the upcoming  iPhone X creates some unique challenges when creating a user interface, so we’ve added some useful new APIs to help you adjust your UI.

Icons

Starting with iOS 11, Apple now requires that you include an Icon-1024.png file in your app package. However, current Corona-built apps cannot find that file correctly using the CFBundleIconFiles table. Thus, to make this work today and going forward, you must switch from using static icons to using the modern Images.xcassets package.

Starting with daily build 2017.3144, you can easily implement the Images.xcassets method — simply consult our Managing Xcode Assets guide for instructions.

Safe areas

The iPhone X creates a unique challenge for app developers. Between rounded corners and the sensor housing protruding into the screen, developers need a way to know where they can safely place critical UI elements so that they are fully visible and accessible to users. Toward this end, Apple has provided this helpful guide outlining what you need to do.

In short, you need to fill the entire screen, including areas outside the “safe area” (the darker region bounded with the red line in the illustration). Also note that the iPhone X has an extra-tall aspect ratio of 2.165:1 — surpassing even the 2:1 aspect ratio of the Samsung S8 — so for a Corona content area size of 320×480, you will need to fill a total area of 360×693 for the iPhone X screen and iPad screens.

Even more importantly, your app should not place important UI elements like buttons, scores, navigation elements, etc. outside of the “safe area” on the screen. In truth, the “safe area” is not a new concept with the iPhone X — for instance, TVs have overscan areas and some mobile devices utilize status bars and soft button rows where you shouldn’t be placing UI elements.

To address this, starting with daily build 2017.3135, we added several new properties and a new function which you can use to determine the safe zone on the screen. These additions to the display library include:

Please click through to the documentation for examples on how to use these.

Conclusion

In addition to the above features, we are preparing a new iPhone X skin for the Corona Simulator, to be released soon. In the meantime, you can start preparing your apps for the iPhone X, test them in the Xcode Simulator, and submit them to Apple using the iOS 11 SDK.

View the full article

#2

Ugh. Not looking forward to updating my games to work with this aspect ratio.

#3

Thank you for reacting so fast.

#4

Hi,

I made the changes to our project. The build was reviewed and approved. If I then build the project to my device, the icon is not visible. It shows the empty iOS icon. If I download the same version from the Apple Store, the icon is there?? Has I done something wrong? 

#5

That seems rather odd. Just to be sure if you download it from the store you get your icons?

Can you post your build.settings?

Rob

#6

Yes. If I download the app using promo code, the app has icon. 

-- -- For more information on build.settings see the Corona SDK Build Guide at: -- http://docs.coronalabs.com/guide/distribution/buildSettings/index.html -- settings = { splashScreen = { enable = false, --image = "ipadproportrait.png" }, orientation = { -- Supported values for orientation: -- portrait, portraitUpsideDown, landscapeLeft, landscapeRight default = "landscapeLeft", supported = { "landscapeLeft", "landscapeRight" }, }, excludeFiles = { -- Include only the necessary icon files on each platform iphone = { "Icon-\*dpi.png", }, android = { "pictures/icons/I\*.png", }, all = { "pictures/background/versio\*", }, }, -- -- iOS Section -- iphone = { xcassets = "Images.xcassets", plist = { ITSAppUsesNonExemptEncryption = false, UIStatusBarHidden = false, UIPrerenderedIcon = true, -- set to false for "shine" overlay UILaunchStoryboardName = "LaunchScreen", --UIApplicationExitsOnSuspend = true, -- uncomment to quit app on suspend --[[-- iOS app URL schemes: CFBundleURLTypes = { { CFBundleURLSchemes = { "fbXXXXXXXXX", -- replace XXXXXXXXX with your Facebook appId } } } --]] } }, -- -- Android Section -- android = { isGame = true, usesPermissions = { "android.permission.INTERNET", "android.permission.ACCESS\_NETWORK\_STATE", "android.permission.WRITE\_EXTERNAL\_STORAGE", "com.android.vending.BILLING", "com.android.vending.CHECK\_LICENSE", }, googlePlayGamesAppId = "xxxxxxxxxx", }, plugins = { ["plugin.bit"] = { publisherId = "com.coronalabs" }, -- ["plugin.unityads"] = -- { -- publisherId = "com.coronalabs", -- supportedPlatforms = { iphone=true, android=true } -- }, ["plugin.applovin"] = { publisherId = "com.coronalabs", supportedPlatforms = { iphone=true, android=true } }, ["plugin.gpgs"] = { publisherId = "com.coronalabs", supportedPlatforms = { android=true } }, ["CoronaProvider.gameNetwork.apple"] = { publisherId = "com.coronalabs", supportedPlatforms = { iphone=true } }, ["plugin.flurry.analytics"] = { publisherId = "com.coronalabs", supportedPlatforms = { iphone=true, android=true } }, ["plugin.google.iap.v3"] = { publisherId = "com.coronalabs", supportedPlatforms = { android=true } }, } }
#7

Hi, is it safe to use the new safe properties across all builds including android? Or should I differentiate in the code?

 

#8

I’ve tested the simulator on latest build (3156) and for iPhoneX sim the suggested method below return all zeroes

local topInset, leftInset, bottomInset, rightInset = display.getSafeAreaInsets()

we cannot submit to store with this issue.

#9

Android devices now support safe zones with a recent daily build.

Rob

#10

But the build does not return correct numbers on simulator. Its all zeroes. How can I test for iPhoneX?

#11

I apologize. I’ve been out of the office for a little while. This seems to be discussing using the save zone API’s for Android but now it’s talking about the iPhone X simulator (which I’ve not had a chance to even look at yet).  

Can you clarify what is/isn’t working as expected?  Android should include status bars in it’s safe zone calculations, but these are new API’s and we may have a few hiccup’s to iron out yet. What will help the most is specifics.

Rob

#12

Well, i’m currently concerned with ios, but both scenarios do not work. I wrote above the method returns zero values when testing with iphoneX settings on win simulator

#13

Can you post your code? Both the iOS iPhone X simulator and the Corona Simulator using the iPhone X skin are reporting numbers that are not 0 when they should be not zero and zero when they should.

Rob

#14

On windows?? That would be weird as i simply copied the sample code from the docs and ran it. I know dfrom another developer that on mac the code seems to work. But we develop on windows and only compile on mac before submissions

#15

I feel I’m missing something here. It’s probably a small language issue.  Can you clearly state what version of Corona you are using and what platform you are running it on and what skins are returning what are wrong values. Please provide as much detail as you can.

Rob

#16

Perhaps. Have you ran the code on Windows? From your answer it seems you are running the test on Mac.

Anyway, I’ll sum it up:

Corona Pro version

PC OS: Windows

Corona Simulator Skin: IPhoneX

Build: 3157

Code: local topInset, leftInset, bottomInset, rightInset = display.getSafeAreaInsets()

Result: topInset, leftInset, bottomInset, rightInset are all zeroes. 

Expected: topInset, leftInset, bottomInset, rightInset should not be zeroes.

#17

What about the icon problem described above (empty icon when building to the device, but icon is visible when installing using TestFlight or Promo Code)?

#18

@Aatos Media, I can’t reproduce this. iOS 11 requires you use a different way to deliver icons, but it appears you are doing so correctly. iOS likes to cache icons longer than they should. Have you tried on other devices?

@rune7 I saw that today’s daily build (3160) has a fix for the iPhone X skin on Windows?

Rob

#19

I deleted the old installation, restarted the device and installed the app. The icon was there now.

#20

I’ve just been adding support for this, and launched the game on my iPhone 7 plus. I noticed that the safe area doesn’t include the very top of the screen (I’m testing in landscape). In the simulator, it’s the whole screen.

Do you know if this is desired behaviour, or is something wrong?

Thanks,