I build web, mobile and desktop apps, produce screencasts, write ebooks, and provide pairing and training

How to refresh your RubyMotion app for iOS 7 in 30 minutes or less

Oct 09, 2013 - Elliott Draper

With iOS 7 now launched, and with one of the highest adoption rates ever seen amongst mobile phone owners (estimates put it at around 200 million inside the first few days, compared with 100 million in a similar timeframe for iOS 6), it’s a great time to upgrade any apps you might have built to really look snazzy on the wildly revamped OS. Your apps will work of course, regardless of whether you take the time to update them, but if you want them to fit in with the much improved user interface, there are a few quick wins available.

Upgrading RubyMotion

You’ll need to make sure you’re running the latest RubyMotion, and make sure your app is building with it (if you’ve locked into a previous version before in your Rakefile, either lock in to the latest version, or remove the version to use the latest one you have installed, after running the update). Now the nice thing is that with Xcode 5, iOS 7 SDK, and RubyMotion 2.8+ installed, rebuilding your app will let you see your app running with the iOS 7 style UI on the iOS 7 simulator. If you’re using default controls such as navigation controllers, tab bars, and table views etc, your app will get a nice visual upgrade, that is completely backwards compatible (i.e. still uses the familiar old styles) on iOS 6 and previous.

New shiny

Having iOS 7 skins for default controls is all well and good, and puts you above a vast majority of apps that for whatever reason will never see another update (an app has to be rebuilt with the iOS 7 SDK and re-submitted, even if there are no other changes, to get the new default look for iOS 7, otherwise it’ll look like an iOS 6 blast from the past!). But what about nice new features, like the status bar colour tinting? With a small little snippet, you can get the super sweet colour way tinting that effortlessly melts into the status bar, and which serves two distinct purposes. The first is that the visual effect gives your app the feel of having more real estate and room to play with, as there isn’t an abrupt cut-off for the status bar any longer. The second is that it can help to reinforce branding, with your app or company colours now nailed to the mast for the header of their phones screen, with no status bar looming over everything else. Here is how we go about doing that:

For an app that has the root view controller set to a UINavigationController, then from within our AppDelegate we need to add the following:

  def application(application, didFinishLaunchingWithOptions:launchOptions)
    ...

    @window.rootViewController.navigationBar.barTintColor = UIColor.colorWithRed(0.64, green: 0.64, blue: 0.64, alpha: 1.0)
    @window.rootViewController.navigationBar.translucent = true
    @window.rootViewController.navigationBar.tintColor = UIColor.blackColor

    ...
    @window.makeKeyAndVisible
    true
  end

Now obviously you can substitute your own colors in, but essentially we’ve picked a nice color for the status bar heading, and we’ve set translucent to true to let us see the shadow of things passing through underneath it, which is a nice effect. Lastly we set the tint color to black so that the icons in the status bar look right with our color, but again you can find a pair that matches with your colors and branding.

I’m testing this out on our app AlbumAlert, and you can see that when you fire it up, you end up with something like this:

iOS 7

So that all works fine, however I imagine at this point that you probably don’t want to support iOS 7 solely. You may in time make that switch, or at least offer features that depend upon iOS 7, but if you’re using mainly default UI controls, you can easily ensure you still support iOS 6 and previous too. Let’s see what the situation is with our changes on iOS 6 by running our app with the 6.1 simulator (you will need to make sure it’s installed from within the Xcode Downloads section if you’re having issues, as well as any other simulators you want to test with). To fire up a specific simulator version:

  rake target=6.1

Replace 6.1 with whatever version you want to test with - after it builds and runs, you’ll see however that we have an error:

  Terminating app due to uncaught exception 'NoMethodError', reason: ' 315:in `application:didFinishLaunchingWithOptions:':
   undefined method `barTintColor=' for #<UINavigationBar:0xab390c0> (NoMethodError)

This is because the barTintColor method is new to iOS 7 - so how do we ensure we do one thing for our UI in iOS 7, and stick to the older way of doing things for past versions? We can query the version number of the OS in this particular case, which changes our code as follows:

  if UIDevice.currentDevice.systemVersion.floatValue >= 7.0
    @window.rootViewController.navigationBar.barTintColor = UIColor.colorWithRed(0.64, green: 0.64, blue: 0.64, alpha: 1.0)
    @window.rootViewController.navigationBar.translucent = true
    @window.rootViewController.navigationBar.tintColor = UIColor.blackColor
  else
    @window.rootViewController.navigationBar.tintColor = UIColor.colorWithRed(0.64, green: 0.64, blue: 0.64, alpha: 1.0)
    @window.rootViewController.navigationBar.translucent = false
  end

Here we are using our specific color as the tintColor for pre-iOS 7 versions, which will keep our color branding, but isn’t quite as snazzy as the new iOS 7 UI. We’re then only setting barTintColor when the version is 7.0 or greater. For other feature differences you may find specific flags you can check to determine if the feature is available, rather than relying on the overall OS version number, but in this case it’s an easy check to make to differentiate between iOS 7, and previous OS versions.

Now if we fire up our app in 6.1 it’ll look as follows:

iOS 6

You can re-test in iOS 7 too to ensure it still has our nice new snazzy style navigation bar, which it does. And that’s it! We’re taking advantage of a new design feature to make our app feel more at home on iOS 7, while maintaining backwards compatibility for users on older versions of the OS.

Final thoughts

This is just a quick peek at the low hanging fruit on offer, where you can spend maybe 30 minutes on each RubyMotion iOS app you have, re-submit them all for approval, and take advantage of the wave of iOS 7 app updates happening as users update their devices. Instead of being left behind and reminding your users of a forgotten user interface, you can be at the forefront of Apple’s new interface revolution.

Remember, if you need any help with your RubyMotion app, we’re available by the hour, or by the week, and can take your app to the next level. Contact us today to find out how, or read more about why we like RubyMotion so much.




Check out our macOS apps, AppTrack and WordTarget.

If you're looking for bespoke development for your own apps, using Ruby on Rails, RubyMotion, React Native or Unity, you can hire @ejdraper - visit ejdraper.com to learn more.


blog comments powered by Disqus
Back to blog
 

Building Mac OS X apps with RubyMotion

Learn how to build Mac apps with using Ruby with this ebook, currently in early access, and with the finished version coming soon.


Purchase