17 September 2013
Tutorial: Getting Started with iOS 7
At the keynote Apple event on September 10, 2013, the company not only unveiled their newest iPhones, but they formally announced iOS 7, the latest version of the operating system which drives all Apple mobile devices. It’s scheduled to roll out to the public on Wednesday, September 18 (tomorrow!) and it brings with it a few things that Corona developers should be aware of.
First and foremost, your existing iOS 6.1 and earlier apps should run without any problems. There are, however, a few things that your Corona-built apps must have to behave properly on iOS 7.
App Icons
In iOS 7, Apple has added a few new icon sizes, effectively increased by a few pixels in each of the core usage cases. Of course, you should still support iOS 6.1 and earlier, so the previous icon sizes remain valid and necessary. The questions that arise in regards to iOS icons include:
- What size(s) are the required icon image files?
- How must I name these icon image files?
- Does each icon image file need to be named exactly and specifically?
- Do they have to be listed in the build.settings file, and if so, where?
Let’s answer these questions now. Since iOS 3.2, Apple has used a plist in the bundle information called CFBundleIconFiles. This is an array of strings equating to the names of the icons used in your app. For the most part, the naming scheme is fairly flexible, which creates some confusion about exactly how the icons should be named.
To keep this simple for Corona developers, you need to add 4 new required icons and 2 new recommended icons, for a total of 6 new image files. Remember to place these files inside your core project folder, not inside a subfolder.
Icon Purpose | Recommended Name | Size | Required |
iPhone/iPod | Icon-60.png | 60×60 | Yes |
iPhone/iPod (Retina) | [email protected] | 120×120 | Yes |
iPad 1/2, iPad Mini | Icon-76.png | 76×76 | Yes |
iPad 3/4 (Retina) | [email protected] | 152×152 | Yes |
Spotlight/Settings | Icon-Small-40.png | 40×40 | Recommended |
Spotlight/Settings (Retina) | [email protected] | 80×80 | Recommended |
To minimize changes in your code, we recommend keeping the existing icon file names that you use today, then simply add these new ones to the mix. Your new build.settings file would then contain:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
settings = { iphone = { plist = { CFBundleIconFiles = { "Icon.png", "Icon-Small-40.png", "Icon-60.png", "Icon-72.png", "Icon-76.png", "Icon-Small-50.png", "Icon-Small.png", }, } }, } |
Please refer to our Project Build Settings guide for a complete list of the required icon sizes. Many of you may not be including the smaller settings/spotlight search icons.
NOTE: Although this is an iOS-related post, we’ve also added a quick Android update as of Daily Build #1206. Specifically, the new Android xxhdpi.png icon is now supported in Corona, so you should include it if you’re publishing to Android. This new icon size is 144×144 pixels in size — conveniently the same as the iOS [email protected] file.
Styling Apps For iOS 7
Perhaps the biggest change in iOS 7 is a completely new look and feel. Apple has “flattened” the interface considerably, steering away from that “real world” look known as skeuomorphic. In other words, buttons don’t need to look like physical buttons to be functional. If you’re a fan of skeuomorphic designs, like a compass app that looks like an actual compass, iOS 7 may not appeal to you visually. However, for those who hate skeuomorphic design (a calendar app doesn’t really need a “spiral binding” after all), Apple has sided with the “less UI is more” team.
In the world of games, this is probably going to have very little impact on your development. However, in the business and utility world, there is a strong, industry-wide movement to flatten designs and move away from skeuomorphism.
For developers using Corona’s current widget library, set to the default iOS theme, you know that the widgets resemble the native widgets in iOS 6.1 and earlier. Now, for those who are eager to begin styling their apps for iOS 7, we have added an iOS 7 widget theme as of Daily Build #1206. To use it, simply include this line of code after you require the widget library:
1 2 |
local widget = require( "widget" ) widget.setTheme( "widget_theme_ios7" ) |
One current exception is the picker wheel widget. Native iOS 7 uses some 2.5D visualizations wherein the top and bottom of the wheel is skewed slightly to provide a sense of depth. We’ll add this to the Corona picker wheel widget when Graphics 2.0 is officially released, but for now your picker wheels will appear flat.
Fonts
The new font for iOS 7, in most cases, is Helvetica Neue Light. If you want to build apps that match iOS 7 in typography, you’ll probably want to use this font as well, for example:
1 2 3 4 5 6 7 8 9 |
local myButton = widget.newButton{ left = display.contentCenterX - 100, top = 360, label = "Send Message", width = 200, height = 48, font = "HelveticaNeue-Light", onEvent = onButtonEvent } |
Fortunately, this font is included in both iOS 6 and iOS 7, as well as on OS X. If you want a bolder version, just use “HelveticaNeue”. If you need a template for iOS 7 imagery, an Adobe Photoshop PSD of graphical elements is located here — just make sure that you read and understand the legal usage terms that accompany this download. Finally, a good article that describes Apple’s requirements and recommendations is located here.
Building for iOS 7
Public Build #1202 can only build for iOS 6.1 and earlier, but Daily Builds after that have an additional dialog option called iOS SDK which we include at any time there are two versions of the iOS SDK to build for. As of Daily Build #1203, choosing iOS 7 will build against the “iOS 7 Gold Master seed.” This means that you can submit builds to Apple using this option. Daily Build #1203 – #1206 lists this as a “Beta” but it is the GM seed, not one of the Beta versions.
While we are using the iOS 7 GM seed SDK, it’s still in testing mode. We are working out the last few details before we enable app submission against the iOS 7 target. However, you should be testing against it, and there are a few other software requirements before you can do so:
- Building for iOS 7 requires XCode 5. Apple made XCode 5 available today in the Mac App Store as a free download. This will install over top of your existing Xcode 4.x installation.
- You must be running OS-X Mountain Lion (10.8) or later to run XCode 5.
If you have been running the XCode 5 developer preview, but you need to revert back to building with 4.x or if you want to use the XCode 5 GM Seed, you’ll need to specify so using the following command line (Terminal) command:
1 |
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer |
In Summary
iOS 7 brings a fresh new look to iOS, while at the same time introducing many new features and UI improvements. As a Corona developer, you can build for iOS 7 now and begin implementing the new widget theme as well. Get started today by downloading Daily Build #1206, available to Corona SDK Pro subscribers.
J. A. Whye
Posted at 14:34h, 17 SeptemberGreat news!
One quick question — how soon can we expect to see the iOS7 theme files in the github version of the widget library?
Brian Berg
Posted at 15:16h, 17 SeptemberIn the table presented in the article, it shows “Icon-Small-40.png” as the recommended name for both the 40×40 and 80×80 icons. Then in the build.settings example it lists them as “Icon-40.png”, “[email protected]”. Which way should it be?
Rob Miracle
Posted at 15:20h, 17 SeptemberThe build.settings is correct.
Kyle
Posted at 19:37h, 17 SeptemberThanks for detailing these changes.
When building for the App Store with 2013.1207 I’m prompted that “Distribution Code Signing Identities are not allowed with Beta SDKs” targeting iOS 7 using Xcode 5 GM. Am I missing something?
Also, is there already an API for specifying light vs. dark status bar content?
Rob Miracle
Posted at 15:07h, 18 SeptemberHi Kyle. I’ll bring this up with the engineers and see what’s going on with the signing issue. I’ve not seen any thing added for controlling the status bar content yet.
dingo
Posted at 23:54h, 17 Septemberso for enterprise users… we set the build target to 7.0, and keep the deployment target at 4.3?
Walter
Posted at 15:17h, 18 SeptemberWe recommend you keep the Base SDK at 6.1 (not 7.0). That way you minimize hitting several bugs introduced in iOS 7.
As context, when you set the base SDK to iOS 6.1, an iOS 7 device will recognize the app’s base SDK and (more or less) do things the iOS 6 way. On the other hand, when you set the base SDK to iOS 7, then you are telling the device that your app is aware of iOS 7 bugs/behavioral changes, so assume your app can handle it. We’re investigating workarounds for the latter case.
dingo
Posted at 22:54h, 18 Septemberthanks walter! so this means, as soon as there are workarounds for the bugs in ios 7.0 we can use it as base sdk. until then, we should go for 6.1.
Dave Baxter
Posted at 01:09h, 18 SeptemberIf we build for iOS7, will our app require iOS7 to work ?
If not then is it still 5.1 or later ?
Dave
Rob Miracle
Posted at 15:05h, 18 SeptemberI don’t think Corona has baked in any iOS7 features yet, so iOS 6 and 5 devices should still be able to run your app. Once we start exploiting iOS 7 only features, then of course those will need iOS 7 to actually work.
Doug Davies
Posted at 14:13h, 18 SeptemberAwesome! Thanks for providing this.
Nicolas Michaud
Posted at 11:45h, 19 SeptemberDo you plan to support the ability to set the color of the statusbar ? IOS 7 support this neat feature to match the status bar with the app.
Thanks
Nick
lessmsios
Posted at 12:40h, 19 SeptemberOne of the “every app should do” items is:
Adopt Dynamic Type. In iOS 7, users can adjust the text size they see in apps. When you adopt Dynamic Type, you get text that responds appropriately to user-specified size changes.
It would be so GREAT if Corona supported this!
Rob Miracle
Posted at 15:56h, 19 SeptemberHi Lessmsios. This is a good suggestion. Can you go to http://feedback.coronalabs.com and add the request there and vote it up. And anyone else reading this, if you want to support dynamic type, vote it up too!
Borja Pérez
Posted at 12:52h, 19 SeptemberHow can we change the appearance of the statusbar when building for iOS 7? I’m only able to display a black statusbar but I wanted it to be white to fit better my app’s colour scheme. How can I do that?
Rob Miracle
Posted at 16:02h, 19 SeptemberHi Nicolas and Borja. You do it with:
display.setStatusBar(display.DefaultStatusBar) — will result in white text
display.setStatusBar(display.DarkStatusBar) — will result in black text
This will work in the next daily build 1210.
Nathan
Posted at 20:20h, 04 JanuaryHi Rob,
I know this is a very old comment, but it doesn’t seem to work anymore – display.setStatusBar(display.DefaultStatusBar) still leaves the characters in black?
Thank,
Nathan.
Clark Olmsted
Posted at 14:40h, 19 SeptemberWill Apple start rejecting apps that are not built against the iOS7 SDK? And if so it is something we need to worry about if submitting in the next few weeks?
Rob Miracle
Posted at 16:03h, 19 SeptemberI doubt they will in the next few weeks. They tend to support an OS for a couple of builds, so people could in theory still be submitting 5.x based apps.
lessmsios
Posted at 17:47h, 19 SeptemberUsing build 2013.1209 I am also getting the error “Distribution Code Signing Identities are not allowed with Beta SDKs”. I never had the Xcode 5 beta installed but installed the release version of Xcode 5 today.
Since the only option in the iOS SDK (for 7) is “7.0 beta” does this mean no Corona Pro user can build for version 7.0 distribution right now? YIKES!
Rob Miracle
Posted at 17:53h, 19 SeptemberWe’ve updated the post. Basically even though building for iOS 7 in Corona is using the GM SDK, we are waiting for a little bit to do some more internal testing before we open iOS 7 up for distribution. We are holding the beta flag on it for a while longer. You will notice that in 1209, tomorrow’s 1210 and possibly a few more, that we are addressing some iOS 7 related bugs. We will let you know when you can submit for iOS7. In the mean time, if you need to submit, use the iOS 6.1 option.
Dave Baxter
Posted at 05:56h, 20 SeptemberJust plugged a iOS7 phone into my Laptop as I wanted to test my latest game on it. But you need xCode 5 to install the app, xCode 4 just says it can’t be used with this version of iOS.
So for anyone (like me) who can’t have xCode 5, don’t upgrade your devices to iOS7 as you won’t be able to test with them.
Dave
Rob Miracle
Posted at 14:47h, 20 SeptemberGood warning Dave!
Julius Bangert
Posted at 12:59h, 20 SeptemberIs there an error in the build.settings example above?
Should it say
“Icon-Small-40.png”,
“[email protected]”,
instead of:
“Icon-Small-50.png”,
“[email protected]”,
Rob Miracle
Posted at 15:29h, 20 SeptemberHi Julius. Thanks for the catch. Actually, the Icon-Small-50.png and it’s @2x sibling are the Spotlight Search/Settings Icon for the iPads. Like any of the “Small” icons, they are optional but recommended.
Technically, the name of the file really doesn’t matter, so Icon-40.png would have worked, but I’ve update the post to be consistent with the table above it and with the other “Small” icons.
Marcus
Posted at 01:56h, 21 SeptemberThere doesn’t seem to be a change with the look and feel of the tab bar in the new widget theme for iOS 7.
Rob Miracle
Posted at 15:13h, 23 SeptemberThe widget theme only affects things like switches and sliders and such (and the picker wheel). The tabBar is a widget you provide your own graphics for, so you have to change them. There is no magic way for us to know what your tabBar background image is and what it looks like. Buttons are in a similar situation. If you’re providing your own graphics for it, we can’t really change it. The big change with widget.newButton is it now supports the idea of a text only button.
I’ve been working on a couple of apps converting them to the iOS 7 look and for the tabBar specifically, I took the 3 slices that make up the selected tab and made them transparent, using the default and over button graphics to color the selected tab icon. Then I took the tabBarbackground image and just made it white.
Emerson Hsieh
Posted at 16:57h, 21 SeptemberJust a question, if I want my app to work in both iOS 6 and 7, do I have to build two separate builds for iOS 6.1 and 7 and submit to the App Store separately, or can I just build for iOS 6.1 and submit to the App Store and hopefully it’ll work on iOS 7 devices? Thanks
Rob Miracle
Posted at 17:04h, 21 SeptemberYour iOS 6.1 apps should run fine on iOS 7. At some point Apple will want to see the iOS 7 icons and of course encourage you to build against the iOS 7 SDK.
greg
Posted at 00:05h, 25 SeptemberI’ve just downloaded version 2013.1214 and I don’t see a bulid with ios6 vs ios7 option. Also I note in the release notes it says “iOS – Switch to building with iOS7 by default”
I assume we’re all effectively building on IOS7 now irrespective?
Rob Miracle
Posted at 16:35h, 25 SeptemberThe iOS 7 SDK is backwards compatible with the iOS6 and iOS5 SDKs, but yea, the iOS 7 one is live.
Eduardo Schnell s Schuhli
Posted at 14:43h, 26 SeptemberDoes anybody experienced a black screen when launching the app?
The app compiles ok but when launching it, after the splash screen, goes to a black screen.
xcode 4.7 – corona 1202 – FINE
xcode 4.7 – corona 1216 – BLACK SCREEN
xcode 5.0 – corona 1202 – FINE
xcode 5.0 – corona 1216 – BLACK SCREEN
am I missing something?
br,
Edu
Rob Miracle
Posted at 14:09h, 27 SeptemberHi Eduardo. Before we can help you for certain, you need to provide some content from your device’s console log. If you don’t know how to get that, please read the blog post: http://www.coronalabs.com/blog/2013/07/09/tutorial-basic-debugging/
Given the time frame you are mentioning, this is likely due to some changes in the new Transitions 2.0 library but until we know about what’s going on in your code all we can do is speculate. Please post this problem with the results of your console log in the forums, where we can better facilitate communications with you. Blog comments are great for simple questions/answers, but when we need to have some back and forth, the forums are better for that.
Thanks
Rob
Katherine
Posted at 03:23h, 19 FebruaryThere is a problem with the build. Changing x position of the button doesn’t actually work. I also see a space. It’s like the battery indicator was also moved 40px lower. WHY?
Kind of dissuades me from buying PRO. I was once a PRO user.
Rob Miracle
Posted at 17:19h, 19 FebruaryHi Katherine. Are you referring to the widget.newButton example above. It’s positioned based on a Top and Left scheme and it’s possible because I did that, it’s not using the equivalent of a center reference point.
I would suggest you open a forum post, with some sample code, and let us know what version of Corona SDK you’re using and then we will have a better chance of helping you there.
Rob