If you are a developer with previous iOS 6 experience, after installing iOS 7 you will certainly notice the huge graphical differences. You will notice right away that iOS 7 has a lighter, flatter look. Gradients on many elements have disappeared and been replaced with solid colors, fonts have changed, and contrasting colors seems to make many elements more pronounced while making some previously distinct elements disappear. If you are looking for a quick visual reference, take a look at this blog entry from kintek to see some of the graphical changes from 6 to 7 or follow along with me in this blog and download the sample source code I have written.

Apple's main focus on the UI changes is to create an easily understood and interactive interface with a focus on clarity and visual depth. As you transition your application to iOS 7, you should consider this design perspective with respects to your application, especially if you have used many custom graphical elements that will need to persist through iOS 7. You may or may not want to be the "ugly duckling" in the app store. Also, keep in mind, dual support of iOS 6 and 7 may be difficult and you may find it easier just to wait and only support iOS 7. In this blog entry I will not go into everything that needs to be modified to transition to iOS 7 but I will try to hit on many of the new requirements and some of the elements that may need tweaked in your app because of new features, looks, or metrics. Also, for further information, Apple has released a guide to help users transition to iOS 7. You must have access to the developer portal to access this guide, but you will find it extremely helpful in your move to iOS 7.

Requirements

There are three new important requirements. You will first need to upscale the resolution of your old app icons because higher resolution icon graphics are now required. Second, the launch image of your app must include the status bar area. Finally, retina images and support for the iPhone 5 must be implemented in all graphics. If you are migrating your application from iOS 6, you must browse the project editor and tap the "Use Asset Catalog" button found on the app summary section. This will create an "images.xcassets" catalog in your project to manage your required app images.

After clicking the "Use Asset Catalog" button you can click the detail disclosure arrow to modify the launch images and app icons.

App icons for the iPhone have now increased in size to 120 by 120 pixels, while the iPad icons have increased to 152 by 152 pixels. It is also worth mentioning, the iOS 6 glossy effect has been removed and the old plist UIPrerenderedIcon key which was used to control the glossy rendering on the icon has no effect in iOS 7. The rounded corners of the icons has also changed slightly as you can see here.

Layout

Apps in iOS 7 use a full screen layout by default, meaning a view will now expand to fill the space under the status bar/navigation bar/etc. If you are transitioning your application from iOS 6, views may be clipped by the title bar or navigation bars. This has become a new standard because iOS 7 implements transparency for many of the UI elements allowing these clipped elements to be seen behind status and navigation bars. iOS 7 implements a few new properties to customize the layout. The most important property is edgesForExtendedLayout, which defaults to UIRectEdgeAll. UIRectEdgeAll extends the view to the full range of the screen. Compare the screenshots below...

UIRectEdgeAll UIRectEdgeNone

The edgesForExtendedLayout property specifies the layout for each edge of a view controller. You can choose from one of six options: UIRectEdgeAll, UIRectEdgeNone, UIRectEdgeTop, UIRectEdgeLeft, UIRectEdgeBottom, and UIRectEdgeRight. The screenshot on the top uses the default UIRectEdgeAll while the bottom uses UIRectEdgeNone. As you can see the UIRectEdgeAll extends the view's edges behind the status and navigation bar causing the red block to move under them. In transitioning from iOS 6, UIRectEdgeNone will be the most useful by providing a layout similar to iOS 6, but if you choose to use the default layout settings you can make some snazzy new layout designs like the new iOS 7 maps. You can also implement these behaviors in a storyboard by unchecking or checking the view controller properties for "Extend Edges". If your layout uses opaque bars (like a navigation bar) the property extendedLayoutIncludesOpaqueBars will need to be set to YES. Layout is a big part of iOS 7. While transitioning to iOS 7, consider implementing Auto Layout. If you are new to Auto Layout, you should understand it replaces the existing Struts and Springs previously used for layout with constraints that orient one view to another. There is a lot to learn to be successful in implementing Auto Layout. I will not be covering Auto Layout in this blog post but be aware that Xcode 5 provides new ways of creating constraints and implementing Auto Layout much more easily than in previous Xcode versions. Auto Layout will make your design more powerful and maintainable.

Status Bar, Navigation Bar, Search Bar

The status bar, navigation bar, and search bar have gone through many visual changes. These bars now implement transparency, old styling has been replaced, and the tintColor property no longer effects the bar's background.

UIStatusBar

The status bar now uses the styles UIStatusBarStyleDefault and UIStatusBarStyleLightContent. Light content will make the status bar elements like the battery indicator, time, etc. white, while by default will appear black. In order to implement one of the styles, you can either adjust it for the entire app or for specific view controllers. To adjust the status bar's style for the entire app, apply the styling to your UIApplication instance.

<span class="br0">[</span><span class="br0">[</span>UIApplication sharedApplication<span class="br0">]</span> setStatusBarStyle<span class="sy0">:</span>UIStatusBarStyleLightContent<span class="br0">]</span>;

If you wish to adjust it only for specific controllers, you must first add UIViewControllerBasedStatusBarAppearance to your project's info.plist and set it to YES.

Once the plist has been modified, add the following method to any view controller you wish to adjust the status bar styling.

<span class="sy0">-</span><span class="br0">(</span>UIStatusBarStyle<span class="br0">)</span>preferredStatusBarStyle<span class="br0">{</span> 
 <span class="kw1">return</span> UIStatusBarStyleLightContent;
<span class="br0">}</span>

Below you can see the different theming options.

UIStatusBarStyleDefault UIStatusBarStyleLightContent

Keep in mind, you will need to have this method implemented in your root view controller. Therefore if you are using an embedded navigation controller, you will need to subclass that navigation controller and add the perferredStatusBarStyle method there.

Being in the root view controller, as you might expect, the perferredStatusBarStyle method will run before the viewDidLoad of the view controller you want to have the status bar changed in. You can easily refresh your status bar appearance/styling at any time by calling <span class="br0">[</span>yourRootViewController setNeedsStatusBarAppearanceUpdate<span class="br0">]</span>;.

UINavigationBar
iOS 7 Navigation Bar iOS 6 Navigation Bar

The navigation bar is much more customizable in iOS 7. As mentioned earlier, it is transparent by default but can be easily turned opaque using it's "translucent" property.

self.navigationController.navigationBar.translucent <span class="sy0">=</span> <span class="kw2">NO</span>;

You can also set the tint colors of both the bar itself and the bar buttons by using the barTintColor and tintColor properties. The tintColor property no longer changes the background color as it did in iOS 6. It now changes the color of the buttons/template elements in the navigation bar.

self.navigationController.navigationBar.barTintColor <span class="sy0">=</span> <span class="br0">[</span>UIColor yellowColor<span class="br0">]</span>;
self.navigationController.navigationBar.tintColor <span class="sy0">=</span> <span class="br0">[</span>UIColor redColor<span class="br0">]</span>;

These property values will persist when set. You may need to set them back to <span class="kw2">nil</span> in another view controller (likely in viewWillAppear) if you do not want the styling changes on all controllers. iOS 7 does a good job handling color changes through segue transitions. As the views move from one to another via the navigation controller, one color will fade into another, providing a smooth visual transition.

You still have the option of adding a background image to the status bar, navigation bar, or search bar. Just be sure to size your image correctly as now it will appear behind the status bar as well.

<span class="br0">[</span><span class="br0">[</span>UINavigationBar appearance<span class="br0">]</span> setBackgroundImage<span class="sy0">:</span><span class="br0">[</span>UIImage someImage<span class="br0">]</span> forBarMetrics<span class="sy0">:</span>UIBarMetricsDefault<span class="br0">]</span>;

Navigation bar title font colors can be adjusted via the titleTextAttributes property.

self.navigationController.navigationBar.titleTextAttributes <span class="sy0">=</span> @<span class="br0">{</span>NSForegroundColorAttributeName <span class="sy0">:</span> <span class="br0">[</span>UIColor whiteColor<span class="br0">]</span><span class="br0">}</span>;

You can also change the title font color across the entire application by applying the styling to your UINavigationBar instance.

<span class="br0">[</span><span class="br0">[</span>UINavigationBar appearance<span class="br0">]</span> setTitleTextAttributes<span class="sy0">:</span>@<span class="br0">{</span>UITextAttributeTextColor <span class="sy0">:</span> <span class="br0">[</span>UIColor whiteColor<span class="br0">]</span><span class="br0">}</span><span class="br0">]</span>;

Finally, you can change the back button disclosure icon by using the properties backIndicatorImage and backIndicatorTransitionMaskImage.

self.navigationController.navigationBar.backIndicatorImage <span class="sy0">=</span> <span class="br0">[</span>UIImage someImage<span class="br0">]</span>;
self.navigationController.navigationBar.backIndicatorTransitionMaskImage <span class="sy0">=</span> <span class="br0">[</span>UIImage someImage<span class="br0">]</span>;

Buttons, Bar Buttons, Toolbars

iOS 7 Buttons and Toolbar iOS 6 Buttons and Toolbar

Generally, button functionality has not changed much, but the visual design has. The UIRoundedRect button type has been deprecated and replaced with UIButtonTypeSystem to function as the standard system button. Both buttons and bar buttons are now borderless, and words are often used in place of what used to be template images. Similarly, toolbars have lost their gradient background. These design choices were made by Apple based on their three theme focuses: Deference, Clarity, and Depth. Taking into consideration Apple's new design principles, it is still okay to add images to bar buttons and buttons alike. Bar buttons in iOS 7 work similarly to iOS 6. By default, images are used as "template" images and will apply the app's tint. In iOS 7 you can create button images with a "default" rendering instead of the bar button's template rendering mode by using the UIImage method imageWithRenderingMode. Default rendering will draw the image with no tint masking, displaying the image just as if it were viewed from any ordinary photo viewing application. Template rendering applies a mask to the image providing a color tint to the image for button highlighting.

UIImage <span class="sy0">*</span>image <span class="sy0">=</span> <span class="br0">[</span>UIImage imageNamed<span class="sy0">:</span><span class="st0">"star.png"</span><span class="br0">]</span>;
UIImage <span class="sy0">*</span>templateImage <span class="sy0">=</span> <span class="br0">[</span>image imageWithRenderingMode<span class="sy0">:</span>UIImageRenderingModeAlwaysTemplate<span class="br0">]</span><span class="br0">]</span>;

As you can see above, the rendering mode does not just apply to bar buttons. UIImageView works the same as it did in iOS 6 but now implements the rendering modes mentioned above. Here you can see the default rendering (UIImageRenderingModeAlwaysOriginal) of a star vs. the template rendering (UIImageRenderingModeAlwaysTemplate) of the same image with a red tint applied.

UIImageRenderingModeAlwaysOriginal UIImageRenderingModeAlwaysTemplate

Picker and Date Picker

UIPicker and UIDatePicker are more or less the same as iOS 6 in terms of functionality, but their visual designs have drastically changed. The new looks are well defined for applications on a white background, but may not work so well with a dark background. Unfortunately, as of now, there seems to be no easy way to customize the looks of the pickers. Apple mentioned in their UIKit User Interface Guide, "You cannot customize the appearance of picker views."

Tab Bar

The UITabBar, like many of the other views, implements a translucent background. In addition to transparency, iOS 7 makes the tab bar much more customizable. There are two available styles if you decide not to use a background image: UIBarStyleDefault and UIBarStyleBlack. Developers also have the ability to set the width of the tab bar items and their related spacing. This spacing and width are defined by providing an "item positioning layout". You can choose to have the tab bar items fill the bar or center them and apply new spacing. In the example below, I created a custom Tab Bar subclass and implemented the following code in viewDidLoad.

self.tabBar.itemPositioning <span class="sy0">=</span> UITabBarItemPositioningCentered;
self.tabBar.itemSpacing <span class="sy0">=</span> <span class="nu0">50.0</span>;
self.tabBar.itemWidth <span class="sy0">=</span> <span class="nu0">50.0</span>;
self.tabBar.barStyle <span class="sy0">=</span> UIBarStyleBlack;
self.tabBar.translucent <span class="sy0">=</span> <span class="kw2">YES</span>;

Here you can see the difference between the tabs using the default positioning vs. the code seen above.

Default spacing and width
Centering with modified spacing and width

Segmented Control

iOS 7 Segmented Control ios 6 Segmented Control

UISegmentedControl in iOS6 had multiple styles, but these have been deprecated and replaced with only one default style. Tint has become the focus on the segmented control stying. The new design has a modified height of 29pts which may effect your existing layouts.

Table Views

iOS 7 Table iOS 7 Grouped Table

UITableView has changed pretty drastically visually, but very little in terms of functionality. A few new methods have been added to decrease table load time by estimating row heights. These methods are estimatedHeightForRowAtIndexPath, estimatedHeightForHeaderInSection, and estimatedHeightForFooterInSection. By using these estimated methods, estimatedHeightForRowAtIndexPath will be called for each table cell prior to loading the table, while the older method heightForRowAtIndexPath will be called only upon rendering of the cell. This will allow more expensive code to be placed in the heightForRowAtIndexPath and decrease table loading times. Therefore, if you have a lot of logic and computationally hungry code that needs to exist in heightForRowAtIndexPath, consider using these methods.

Scroll View

UIScrollView has added the property keyboardDismissMode to allow the keyboard to be more easily dismissed and the scroll bar has become slightly thinner.

Other Elements

There is quite a bit of extra functionality that has been added in iOS 7, but some of the biggest changes are visual. Most elements have simply undergone visual and sizing changes. Some of these include, UIProgressView, UIRefreshControl, UISlider, UIStepper, UIMenuController, UICollectionView, UIActionSheet, UISearchBar, UIAlertView, UIPageControl and pretty much all of the disclosure buttons. Therefore, if you are using any of these elements in your app, it is important to check that they have not broken your layout or designs. Here are some important changes and metrics for some of the most commonly used UIKit elements that were not already mentioned above.

UIProgressView
iOS 7 Progress Bar iOS 6 Progress Bar

The progress bar has become much thinner than the previous design. It has now thinned from 9pts to 2pts.

UISlider
iOS 7 Slider iOS 6 Slider

The slider much like the progress bar has also become thinner, but now with a larger slider button. In iOS 6, it's height was 23pts. Now, with the bigger slider button, the height is 34pts.

UIStepper
iOS 7 Stepper iOS 6 Stepper

Visually, the gradients of the stepper have been removed and the iOS 7 stepper implements the apps common tint. The stepper's width remains the same, but it's height has changed from 27pts to 29pts.

UISwitch
iOS 7 Switch iOS 6 Switch

The UISwitch is visually very different and has been resized to 51pts by 31pts from the older 79pts by 27pts.

UITextField
iOS 7 Text Field iOS 6 Text Field

The UITextField is more or less the same, but the looks have changed a bit as seen above.

Final Thoughts

iOS 7 has gone through many changes, a great portion of them being visual. Try not to get frustrated in your journey to adapt to Apple's new design principles. There will be a learning curve, and transitioning will likely create a lot of work (especially for you designers out there). The best advice I can give is, start the programming for the transition early, and if you have the option, wait until the majority of your users have installed iOS 7 before unveiling your new release. This way, you will have little need to support iOS 6 and visually iOS 7 can handle iOS 6 apps quite well with very little graphical changes. If you haven't already, be sure to download my sample source code for a better understanding of this blog post. Best of luck!