Tutorial: Getting Started with iOS 7

Tutorial: Getting Started with iOS 7

ios7-w-borderAt 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:

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:

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:

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:

  1. 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.
  2. 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:

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.

Tags:
, ,
Rob Miracle
[email protected]

Rob is the Developer Relations Manager for Corona Labs. Besides being passionate about helping other developers make great games using Corona, he is also enjoys making games in his spare time. Rob has been coding games since 1979 from personal computers to mainframes. He has over 16 years professional experience in the gaming industry.

35 Comments
  • J. A. Whye
    Posted at 14:34h, 17 September

    Great 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 September

    In 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 September

      The build.settings is correct.

  • Kyle
    Posted at 19:37h, 17 September

    Thanks 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 September

      Hi 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 September

    so 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 September

      We 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 September

        thanks 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 September

    If 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 September

      I 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 September

    Awesome! Thanks for providing this.

  • Nicolas Michaud
    Posted at 11:45h, 19 September

    Do 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 September

    One 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 September

      Hi 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 September

    How 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 September

      Hi 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 January

        Hi 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 September

    Will 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 September

      I 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 September

    Using 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 September

      We’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 September

    Just 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 September

      Good warning Dave!

  • Julius Bangert
    Posted at 12:59h, 20 September

    Is 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 September

      Hi 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 September

    There 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 September

      The 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 September

    Just 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 September

      Your 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 September

    I’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 September

      The 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 September

    Does 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 September

      Hi 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 February

    There 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 February

      Hi 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