How to Update Your App for iOS 7

原文：http://www.raywenderlich.com/49316/how-to-update-your-app-for-ios-7

Note from Ray: This is an abbreviated version of a chapter fromiOS 7 by Tutorials that we are releasing as part of the iOS 7 Feast. We hope you enjoy!

If you have an app on the App Store that doesn’t yet take full advantage of iOS 7’s new look and feel, then you may find it quickly disregarded by new and old customers alike.

Texture-rich apps with hyper realistic-looking designs simply do not fit in well with the new aesthetic. The changes are more than skin deep; there are also important differences in how users expect apps to work on iOS 7, not just how they look. If you want your apps to fit in, you need to join the revolution and update your app for iOS 7.

In this tutorial, you’ll take an app that was written for iOS 6 — filled with lush, richly detailed textures — and update it to the new minimalistic design language of iOS 7. You’ll deal with the technical aspects involved in moving to the latest version of the SDK, and you’ll also consider the impact of the various design changes.

Getting started

In this tutorial, you will take an app called Treasure Hunt that was designed for iOS 6, and update it for iOS 7.

Treasure Hunt is a social app for sharing treasure maps, so that users can engage in solving riddles and finding hidden treasures together. It’s a bit like geocaching — a fun outdoor activity in which those taking part use their mobile devices to hide and find containers, known as geocaches, all over the world — but instead of GPS coordinates, it uses the age-old tradition of hand-drawn treasure maps.

This is what the app looks like on iOS 6.1:

The app is not just for finding historical treasure, such as the gold that Captain William Kidd is supposed to have buried in the late 1600’s. People can upload any kind of treasure map they like; it’s great for birthday parties, Easter egg hunts, or any other activity where the fun lies in unraveling obscure clues to unearth some kind of hidden treasure, whether that is mountains of gold or just a bar of candy. If only they had this app in The Da Vinci Code!

Note: If the above description makes you want to put the app on your phone and head out to find some gold, then you’re going to be disappointed. It’s only a sample project and the included treasure maps aren’t real. Sorry, treasure hunters!

If this were a real app, it would have to connect to a server to download the shared maps and coordinate the social activities. That’s outside of the scope for this tutorial, so the app simply fakes the connection to the server.

The important thing, however, is that Treasure Hunt demonstrates a lot of the issues that you’ll come across transitioning your apps to iOS 7 — and more importantly the solutions!

Download the starter project with the source code for the iOS 6 version of the app. If you want to see how Treasure Hunt worked in iOS 6, the best way is to open it in Xcode 4.6 (if you still have it installed). This will build the app against the iOS 6.1 SDK and run it on the iOS 6 simulator, giving you the most accurate view of what it looked like running in iOS 6.

If you open the app in Xcode 5, then it will build against the iOS 7 SDK instead and certain things may not work the way you’d expect — which is exactly the sort of thing that you’re going to fix in this tutorial.

If you don’t have Xcode 4.6 installed anymore, don’t worry — you don’t need it except if you’re curious about how the app used to work before iOS 7. You just might notice some strangeness with the app when you run it in Xcode 5, but you’ll be fixing that soon! ☺

Why bother?

If you already have an app on the App Store and it’s doing well, then why should you bother to update it for iOS 7? Well, that decision depends on a few things. If your app already has a design not too dissimilar from iOS 7, then there may be no need to rush. You can simply tweak the UI a little bit in your next update. But if your app has a skeuomorphic design filled to the brim with heavily detailed, oversaturated textures, such as Treasure Hunt, then you may want to consider the following points:

• The new subtle, unassuming and less brash UI of iOS 7 makes many existing apps look and feel out-of-place. Chances are that your UI needs a complete design overhaul in order to feel at home on iOS 7. Design is like fashion; if your app doesn’t follow the latest trends, your users are going to start looking elsewhere for apps that appear up-to-date.
• Even if you don’t want to update the look of your user interface, certain standard UIKit elements such as alert views, action sheets, and the on-screen keyboard now appear in the new style, which might well clash with your existing style.
• Apps compiled against the iOS 6 SDK on Xcode 4.6 run in a special emulation mode on iOS 7 that tries to preserve the old look. But as soon as you switch to Xcode 5 and build against the iOS 7 SDK, things will start to go awry in your app. The new SDK makes many changes to the metrics and visuals of the standard UI elements. You need to fix these issues anyway, so you may as well think about switching altogether.
• iOS 7 introduces new accessibility features such as Dynamic Type, which lets the user determine how big the text on the screen should be. If your app doesn’t support this, users will start looking for alternatives that do.
• If your app uses custom gestures, they might conflict with the new system-wide gestures for summoning Control Center or swiping back on navigation controllers. You may need to tweak your gestures so they can co-exist on iOS 7.
• Apple as a company cares deeply about the future — and iOS 6 clearly represents the past. If you want to be noticed by Apple, then iOS 7 is where you need to be. It’s unlikely that the App Store will feature any apps that do not fully embrace iOS 7 and all it has to offer. Moving to iOS 7 will greatly increase your chances of App Store success.
• The icons are different. You need a new 120×120 pixel icon that has a different corner radius. So at the very least, make sure to update your icon!

Switching to iOS 7 can be a lot of work, especially if you have a completely custom UI. Embrace the change; if you don’t, you run the risk of your app becoming irrelevant — sooner than later. Your apps deserve better than that.

Back to the drawing board

One of the main themes of iOS 7 is deference; that the interface should get out of the way of the user. Apple has made it very clear that apps should focus on their content. For Treasure Hunt, the content is the treasure maps. If you have a photo manipulation app, the content is the photos. If your app is for note taking, the content is the notes. Content is king on iOS 7; UI elements should never compete with the content for the user’s attention.

As you consider the transition of your app to iOS 7, it might be useful to rethink your app and consider what is really important to your app and what isn’t. Does the user experience still make sense in an iOS 7 world? Maybe now is a good time to change the navigational structure of your app, to combine two separate screens into one, or to use gestures to directly manipulate your content rather than through buttons and sliders.

Many of the standard apps — Calendar and Photos, for example — now use a zooming paradigm for navigating through the content. You zoom in from the year to the month to the week to the day, often literally, using attractive but contextually relevant animations. When you launch an app, the app icon appears to zoom into the launch image. Conversely, closing an app invokes a zoom-out animation. Zooming is a big idea on iOS 7 and if your app can take advantage of it, you should plan to adopt the new paradigm.

The changes to the Treasure Hunt app of this chapter won’t be that extensive. There will be many small tweaks in the UI, but the organization of most of the screens will remain largely the same. As you’re looking to transition your own apps, you might take this as an opportunity to not just patch up the graphics, but also to dramatically increase the user experience.

First steps in Xcode 5

Note: Before you open your own projects in Xcode 5, it’s essential to make a backup copy first. Xcode 5 will make some format changes to your storyboard files, making it impossible to edit them in the previous version of Xcode, should you want to go back at some point. Of course, if you’re using version control, this is less of an issue. Just make sure you commit your latest changes first.

Open the Treasure Hunt starter project in Xcode 5. The project should open without any issues. Press ⌘+B to build the app (that’s the cmd key on your keyboard together with the B key). You should see no warnings or error messages.

Time to take a look at the app in iOS 7. Run the app using the iPhone Retina (4-inch) simulator. Choose the simulator using the scheme picker box at the top of the Xcode window:

The app looks a bit worse for wear now:

There are some obvious problems here:

• In the main screen of the app, the + bar icon is blue and the Edit label doesn’t fit the bar button shape. The background of the table view cell with the torn paper is not transparent but opaque white. The selected tab bar icon is also blue, which doesn’t sit well with the wooden motif.
• The Edit Map screen has a solid black bar where the status bar used to be, and the rest of its layout looks untidy.
• The third screen, known as the Map Detail screen, does have a status bar but it overlaps the actual map image making it hard to see. The toolbar doesn’t look very good either; its shadow image is now a dark strip on top of the map, and the colors of the labels render them illegible.

The app has several more screens, and they all suffer from similar problems. What’s worse, the richly textured design of the app no longer fits in well with the overall aesthetic of iOS 7. All other iOS 7 apps use a subtle, minimal design. This clashes with the heavy wood texture used in Treasure Hunt.

The following image of the Clue Sheet popup that lets users add clues and comments to a treasure map illustrates this mismatch between visual styles:

The new look of the on-screen keyboard conflicts directly with the tattered paper texture of the Clue Sheet. This just isn’t very nice to look at.

Going iOS 7 only

To simplify the transition to iOS 7, let’s assume the app is now iOS 7-only. The look-and-feel of iOS 7 is so different from its predecessors that it will be tricky to make your apps look good and be backward compatible. (In the full chapter in the book you will see how you can make the app also run on iOS 6.)

To force the app to be iOS 7-only, you have to set the iOS Deployment Target to 7.0. You may be familiar with doing this in Xcode 4, but there’s a new way to set this in Xcode 5 because it combines several settings screens into the one area.

Click the TreasureHunt icon at the top to switch from the Target settings to the Project settings. A project can contain multiple targets. The settings you change at the project level filter down to all targets unless you override them on a per-target basis:

Change iOS Deployment Target from 6.1 to 7.0.

Press ⌘+B to build the app again. Xcode will now give several warning messages:

Apparently the app is using an API that’s been deprecated in iOS 7. You’ll take care of that later on. Other than that, there are no compilation problems, so you’re still in pretty good shape.

Not so fast! This doesn’t mean the app update is now ready for submission to the App Store. There are plenty of small UI problems to fix, as you saw earlier.

You’ll now go through the app and fix these issues one by one. When you do this, it’s easiest to remove all the custom graphics and strip the app down to its bare essentials. This allows you to focus on the more important problems first. Once everything works properly, then you can then add the graphics back in.

For Treasure Hunt, removing the custom graphics is simple. All the appearance customizations for the iOS 6 version of the app are performed in code and a single flag enables or disables them.

Open TreasureHunt-Prefix.pch and change the following line:

#define CUSTOM_APPEARANCE 1

to this:

#define CUSTOM_APPEARANCE 0

Build and run your app to see the difference:

This already looks more like an iOS 7 app, but it still has plenty of UI issues. Also, turning off the custom appearance means the app has lost most of its charm. Those wooden textures may be considered overkill in this new design style, but they did give the app tons of personality. This chapter will show you how to retain some of that charm even in a minimal, texture-barren world.

Notice that all the compiler warnings have now disappeared — bar one. Most of them were related to the UIAppearance API. The app no longer uses this API; you removed that dependency with the#define statement earlier. If you use UIAppearance in your own apps then be forewarned; many of the things that you were able to do with it are now deprecated or work slightly differently.

Note: When you switched the Deployment Target to iOS 7, the non-Retina iPhone simulators were removed from the scheme picker. This means you cannot test your iOS 7 apps on a non-Retina iPhone simulator. This sounds draconian, but it makes sense since there aren’t any low-resolution iPhone or iPod touch models (iPhone 3GS or earlier) that can run iOS 7. All iPhones that can run iOS 7 have Retina screens.

Does this mean you no longer need to supply non-Retina images for you app? It depends. If your app is for the iPad (or universal) then you still need to provide 1x versions of the graphics to support the iPad 2 and iPad mini.

Remember that the iPad can run any non-universal iPhone app in a special emulation mode. As of iOS 7 this emulation mode always uses the Retina graphics. So if your app is iPhone-only then yes, you no longer need 1x graphics. (Designers rejoice!)

If you do decide to leave out the 1x artwork for the iPhone version of your app, make sure your Retina images still adhere to the Retina @2x.png naming rules or UIKit won’t apply the proper scaling to them.

Fixing the table views

My Maps is considered the main screen of the app, as it’s the first one the user comes across; it makes sense to start your iOS 7 rework here. This screen shows the treasure maps that the local user created and shared with other Treasure Hunt users.

The My Maps screen — with the lush textures removed — looks like the following:

It doesn’t look too bad, but there are a few small details that could be improved. Let’s start with the table view. The text in the table view cells isn’t supposed to be that bold. One of the most important changes that Apple made in iOS 7 is a change in the font styling; iOS 7 apps now use much thinner fonts everywhere.

Another more subtle change is the selection style of the table view cells. If you select a row, the text turns white. That used to be necessary because the default row selection color was a very saturated blue, but it has since been changed to a light gray. In Apple’s own table views, the label color no longer changes when a row gets selected.

You could make these two changes by hand, but there is an easier way. Open theMainStoryboard.storyboard file, found in the Resources group, and select the My Maps View Controller. This is a table view controller with a single prototype cell, shown below:

This cell adopts the Basic style, but since this app was made for iOS 6 it’s really the Basic style from iOS 6. To adopt the style from iOS 7, simply change Style to Custom and then back to Basic again in the Attributes inspector:

Notice that the font is now a lot thinner. It used to be System Bold 20.0, but now it’s System 18.0. Apple’s put their system fonts on a diet — and shrunk them a bit, too! The new font is shown below:

Build and run your app, and select a cell in the table. You’ll see that the text label in a selected row remains black, as so:

If your own apps use the built-in cell styles on prototype cells, it’s a good idea to repeat this exercise for all of the cells on all of your table view controllers.

Note: Did you notice that on iOS 7 the separator line between table view cells doesn’t run across the entire width of the screen? This is automatic behavior on the built-in cell styles. If your app has custom cells, you can get this same effect by setting the separatorInset property on the individual cells, or on the entire table view. When you set the separatorInset on the table view, these insets are applied to the empty cells as well.

One small thing to tweak here is the height of the cells. On iOS 6 it made sense to have padding above and below the thumbnail image to accommodate the background texture, but here the extra spacing is wasted and looks out of place.

Open the storyboard once again, and in the My Maps View Controller select the table view, making sure to not select a cell instead. Go to the Size inspector (the ruler icon) and under the Table View Size section, change the Row Height from 80 to 60.

Build and run your app and have a look at the table view; the app looks much tidier with the smaller row height, as demonstrated in the following image:

Asset catalogs

iOS 7 introduces a new feature to help organize your images: asset catalogs. An asset catalog is a special folder for your images managed by Xcode that makes it easy to associate multiple versions of an image (i.e. normal version, Retina version, 4-inch iPhone version, iPad version, etc) with a single filename.

From the Xcode menu bar, choose File → New → File… From the sidebar choose Resource, and thenAsset Catalog.

Click Next. Keep the default name, Media.xcassets, but make sure you add it to the TreasureHunttarget by checking the box. Click Create to finish. This adds a new, blue folder in the project’s file list:

Note: If you have used folder references before in Xcode, which also appear as blue folders, then you should be aware that an asset catalog works differently. For folder references, you are responsible for managing their contents; if you place a new file into this folder via Finder, it automatically shows up in Xcode.

However, for asset catalogs it’s recommended you make any changes using Xcode’s interface and to not manipulate the folder structure by hand. An asset catalog contains more than just image files. For example, it also contains JSON files that describe the catalog’s file structure.

One of the many changes in the design of iOS 7 is the style of tab bar icons. If you compare the existing icons on the My Maps screen to similar icons from built-in apps such as Phone or Music, these ones seem too wide and heavy. The new bar icons have a thin stroke — two pixels wide to match the stroke width of the font — and are very rarely filled in. You will fix this by importing new images for the tab bar icons into the asset catalog.

Select the new asset catalog, Media.xcassets, in the project navigator. There is a small + button at the bottom of the asset catalog pane. Download and unzip the resources for this tutorial, then click the + button and select Import… and navigate to the Resources/New Images folder that you downloaded, and select all the image files inside that folder:

Click Open to finish the import. The images now show up in the asset catalog, grouped under a common name:

Note: If your asset catalog contains just a single item, New Images, then repeat the above procedure but this time select the individual image files from the folder, not the folder itself.

An asset catalog makes it easier to keep track of your images, while ensuring the app will load the images as efficiently as possible. You can store any images you wish in this catalog, including your app icons and launch images. Loading images from an asset catalog works no differently than it did in a pre-iOS 7 universe. When you ask UIImage to load an image file, it now looks inside the asset catalog first.

Run the app and you should see much cleaner tab bar icons:

In the built-in Apple apps, for example Music.app, it is common for the selected tab icon to be “inverted”, just to make the selection clearer. You already added the required images for this. InMyMapsViewController.m in the View Controllers group, add the following line to viewDidLoad:

self.tabBarItem.selectedImage = [UIImage imageNamed:@"MyMapsBarIcon-Selected"];

And add the following line to viewDidLoad in SharedMapsViewController.m:

self.tabBarItem.selectedImage = [UIImage imageNamed:@"SharedMapsBarIcon-Selected"];

Build and run; now the selected tab has an inverted icon:

To make the app look a bit more interesting you’ll replace the title text Treasure Hunt with an image. In MyMapsViewController.m, add the following line to viewDidLoad:

self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Crown"]];

This replaces the text that was in the navigation bar with the new crown image from the asset catalog. Build and run the app to see your new title bar image:

This crown shape is an integral part of the new theme for this app. You will see it appear in several more places.

Tint color

Just for fun, compare the iOS 6 version of Treasure Hunt with the new, cleaned-up iOS 7 version below:

The new version certainly fits in better with iOS 7 aesthetic — but it’s looking a bit bland in comparison with the extravagant textures from iOS 6. Just because iOS 7 has a cleaner, lighter design, doesn’t mean your apps can’t have some personality of their own. Later on you’ll make some extensive changes to the look of the app, but right now you’ll begin by tweaking one of the most basic but most obvious visual aspects of your app: the tint color.

Everything colored blue in the iOS 7 screenshot above is based on the tint color of the app. On iOS 7, the tint color is used to indicate which items can be tapped; for example, the + and Edit buttons in the navigation bar and the disclosure buttons of the table view cells are all selectable. Tinting also highlights active items, such as the icon on the currently selected tab. The tint color is used throughout an app to make the distinction between active and non-active elements. Because the UI is intended to stay out of the user’s way in iOS 7, the use of a single color in your app has until now never been so important.

The tint color is blue by default, but by changing this color you can immediately give your app its own unique style with very little effort. Views inherit the tint color from their parent views, so by setting the tintColor property on the app’s single UIWindow instance you effectively change the tint color for every view. However, in an app that uses a storyboard you can also set the tint color from Interface Builder, which is even easier.

Open MainStoryboard.storyboard and activate the File inspector, which is the first tab in the inspectors pane. Change the Global Tint setting to a light brown color — red 140, green 70, blue 35 — that will harken back to the old theme of wooden treasure chests:

Build and run the app to see your new tint color in action:

This already looks a little less stock than before. You want to make sure that when choosing a tint color it’s not too dark, or else it’ll be difficult to tell apart from inactive UI elements, such as black labels and gray tab bar icons.

Note: Due to a bug in iOS 7, the segmented control on the Map Detail screen does not get the proper tint color. As a workaround, add the following lines to viewDidLoad inMapDetailViewController.m:

self.view.tintColor = [UIColor whiteColor];self.view.tintColor = [UIColor colorWithRed:140/255.0f green:70/255.0f blue:35/255.0f alpha:1.0f];

Credits: The treasure map images are public domain images taken from Wikipedia.

Where To Go From Here?

You have cleaned up the table view from the My Maps screen, added an asset catalog to hold the app’s images, and set a custom tint color. But there is still a lot more that needs to be done before this app is iOS 7-ready!

If you want to learn more, check out our book iOS 7 by Tutorials, where you’ll also learn how to use Auto Layout to make the layout more flexible, how to inline the date picker, how to implement blur effects (“frosted glass”), and much more — including different strategies for making the app backwards compatible with iOS 6.

In the meantime, if you have any questions or comments, please join our forum discussion below!

• Tweet
   

Matthijs Hollemans

Matthijs Hollemans is an independent iOS developer and designer who lives to create awesome software. His focus is on iPad apps because he thinks tablets are way cooler than phones. Whenever he is not glued to his screen, Matthijs plays the piano, is into healthy and natural living, and goes out barefoot running. Visit his website athttp://www.hollance.com.

• Follow Matthijs Hollemans on Twitter