ios7

iOS 7 UI Transition Guide Contents Preparing for Transition 5 Before You Start 6 Characterizing Your App 8 Scope the Project 10 Things Every App Must Do 10 Things Every App Should Do 10 If You Must Continue to Support iOS 6 11 Supporting iOS 6 12 Using Interface Builder to Support Multiple App Versions 12 Supporting Two Versions of a Standard App 13 Managing Multiple Images in a Hybrid App 14 Loading Resources Conditionally 14 Updating the UI 16 Layout and Appearance 17 Using View Controllers 17 Using Tint Color 18 Using Fonts 19 Bars and Bar Buttons 21 The Status Bar 21 Navigation Bar 22 Search Bar and Scope Bar 23 Tab Bar 25 Toolbar 26 Bar Buttons 26 Content Views 28 Activity 28 Collection View 30 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 2 Image View 30 Map View 31 Page View Controller 31 Scroll View 32 Table View 33 Text View 35 Web View 35 Controls 37 Date Picker 37 Contact Add Button 38 Detail Disclosure Button 39 Info Button 39 Label 39 Page Control 40 Picker 40 Progress View 40 Refresh Control 41 Rounded Rectangle Button 41 Segmented Control 42 Slider 42 Stepper 43 Switch 43 Text Field 43 Temporary Views 45 Action Sheet 45 Alert 46 Modal View 46 Document Revision History 48 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 3 Contents Tables Bars and Bar Buttons 21 Table 5-1 Treatment of resizable bar background images 23 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 4 Important: This is a preliminary document for an API or technology in development. Although this document has been reviewed for technical accuracy, it is not final. This Apple confidential information is for use only by registered members of the applicable Apple Developer program. Apple is supplying this confidential information to help you plan for the adoption of the technologies and programming interfaces described herein. This information is subject to change, and software implemented according to this document should be tested with final operating system software and final documentation. Newer versions of this document may be provided with future seeds of the API or technology. ● “Before You Start” (page 6) ● “Scope the Project” (page 10) ● “Supporting iOS 6” (page 12) 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 5 Preparing for Transition Important: This is a preliminary document for an API or technology in development. Although this document has been reviewed for technical accuracy, it is not final. This Apple confidential information is for use only by registered members of the applicable Apple Developer program. Apple is supplying this confidential information to help you plan for the adoption of the technologies and programming interfaces described herein. This information is subject to change, and software implemented according to this document should be tested with final operating system software and final documentation. Newer versions of this document may be provided with future seeds of the API or technology. iOS 7 introduces many UI changes, such as borderless buttons, translucent bars, and full-screen layout for view controllers. Using Xcode 5, you can build a project for iOS 7 and run it in iOS 7 Simulator to get a first glimpse of the way the app looks with iOS 7 UI. For example, the only differences between the two versions of TheElements sample project shown below are the deployment target and the simulator. 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 6 Before You Start TheElements sample app in iOS 6 SimulatorTheElements sample app in iOS 7 Simulator Note: iOS 7 Seed 1 is not available on iPad. It’s tempting to dive straight into the work of updating your app, but there are a few things to think about before beginning the process. As you interact with the built-in apps, it becomes clear that the changes in iOS 7 are both subtle and profound. Familiar UI elements are easily recognizable but look very different. Visual touches of physicality and realism are muted and refined, while realism in motion is enhanced. Before You Start 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 7 Note: Although all UI elements look different in iOS 7—and many support new functionality—the UIKit APIs you’re familiar with remain mostly the same. As you continue to explore, you begin to discern the main themes of iOS 7: ● Deference. The UI helps users understand and interact with the content, but never competes with it. ● Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. ● Depth. Visual layers and realistic motion heighten users’ delight and understanding. By bringing fundamental and pervasive changes to the iOS experience, iOS 7 provides a rare opportunity to revisit the way apps communicate their core purpose and functionality to users. Although you might not be prepared to take full advantage of this opportunity today, keep it in mind as you update your app to run in iOS 7. (If you are ready to revisit your app design—or you’re beginning a new project—read “Designing for iOS 7” for some guidance.) Characterizing Your App Whether you decide to redesign an app or update its current design, you need to know how the app’s characteristics can influence the process. First, use the following questions to help shape your strategy: ● Did you use Auto Layout to design the app? If your app uses Auto Layout, your job is easier. In Xcode 5, Auto Layout can help an app accommodate new UI element metrics and respond appropriately to dynamic changes in text size. Auto Layout is particularly helpful if you’re transitioning an iOS 6 app or you need to support both iOS 6 and iOS 7. If you didn’t use Auto Layout, now may be the perfect time to start, especially if you need to support more than one version of an app. If you use manual or programmatic layout techniques, you're responsible for ensuring that the layout adjusts appropriately when text size changes. ● Does the app need to support iOS 6? Remember that iOS users tend to be very quick to update their devices, and they expect their favorite apps to follow suit. If business reasons require you to support iOS 6, it’s still best to begin by updating the current app for iOS 7. Then—as much as possible—apply the design changes to the iOS 6 version of the app. For some details of this process, see “Supporting iOS 6” (page 12). Before You Start Characterizing Your App 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 8 The next step in shaping a transition strategy is to examine the ways in which the app is customized. The amount of customization—and the specific customization techniques you use—impact the type of work you have to do. Think of app customization as being divided into the following three types: ● Standard. The app contains only standard, uncustomized UI elements provided by UIKit. ● Custom. The app presents a completely custom UI that doesn’t include any UIKit UI elements. ● Hybrid. The app contains a mix of standard and custom elements, including standard elements that you customized using UIKit tinting and appearance-customization APIs. For a standard app, you need to decide whether your visual and user experience designs still make sense in the iOS 7 environment. If you decide to keep the current layout and interaction model, most of the work involves making minor adjustments and ensuring that the app handles the new systemwide gestures correctly. Custom apps—that is, apps that use no UIKit UI elements—require a more nuanced approach. For example, if you feel that the current UI and experience of the app is still appropriate, there may be very little to do. On the other hand, if you feel that the app’s personality and user experience should change in order to delight iOS 7 users, you have more work to do. Hybrid apps vary in the amount of work required, depending on the customizations you did and how you combined custom and standard elements. In addition to revisiting the overall design of a hybrid app, you need to make sure that your customizations still work well and look good when they’re integrated with standard elements. Note: An app that mimics standard iOS 6 UI in a completely custom way is likely to require a lot of work because it will simply look out of date. Before You Start Characterizing Your App 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 9 Knowing your app’s compatibility requirements and customization characteristics gives you some idea of the path to take. Use the following checklists to fill in more details and to scope the project. Things Every App Must Do Update the app icon. In iOS 7, app icons are 120 x 120 pixels (high resolution). Update the launch image to include the status bar area if it doesn’t already do so. Support Retina display and iPhone 5 in all your artwork and designs, if you’re not already doing so. Things Every App Should Do Make sure that app content is discernible through translucent UI elements—such as bars and keyboards—and the transparent status bar. In iOS 7, view controllers use full-screen layout (to learn more, see “Using View Controllers” (page 17)). Redesign custom bar button icons. In iOS 7, bar button icons are lighter in weight and have a different style. Prepare for borderless buttons by moving away from supplying button background images and by reassessing your layout. Examine your app for hard-coded UI values—such as sizes and positions—and replace them with those you derive dynamically from system-provided values. Use Auto Layout to help your app respond when layout changes are required. (If you’re new to Auto Layout, learn about it by reading Cocoa Auto Layout Guide .) Examine your app for places where the metrics and style changes of UIKit controls and views affect the layout and appearance. For example, switches are wider, grouped tables are no longer inset, and progress views are thinner. For more information on specific UI elements, see “Bars and Bar Buttons” (page 21), “Controls” (page 37), “Content Views” (page 28), and “Temporary Views” (page 45). 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 10 Scope the Project 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. For more information, see “Using Fonts” (page 19). Make sure your app doesn’t respond inappropriately to the new Control Center gesture or to a navigation contoller’s swipe to go back gesture, especially if you perform custom touch handling. Revisit the use of drop shadows, gradients, and bezels. Because the iOS 7 aesthetic is smooth and layered—with much less emphasis on using visual effects to make UI elements look physical—you may want to rethink these effects. If necessary, update your app to best practices for iOS 6—such as Auto Layout and storyboards—and ensure that the app uses no deprecated API. Now that you have a better idea of the types of things you need to do, learn more about changes in view controllers, tinting, and fonts by reading “Layout and Appearance” (page 17). If You Must Continue to Support iOS 6 If you must support both iOS 6 and iOS 7, you can detect which OS version the app is running in and load the appropriate resources. For more information, see “Supporting iOS 6” (page 12). Scope the Project If You Must Continue to Support iOS 6 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 11 If business reasons require you to continue supporting iOS 6 or earlier, you need to choose the most practical way to update the app for iOS 7. The techniques you choose can differ, but the overall advice remains the same: Focus on redesigning the app for iOS 7 first. Then, bring the changes to the iOS 6 version as appropriate. Note: On a device running iOS 7, all of the system UI—such as alerts and notifications—uses the iOS 7 appearance, even if your app is currently using an earlier appearance. Using Interface Builder to Support Multiple App Versions Interface Builder in Xcode 5 includes new features that help you transition an app to iOS 7 while continuing to support earlier versions. Get a preview of how the UI updates you make affect an earlier version. Using the assistant editor, you can make changes to an iOS 7 storyboard or xib file on the canvas and simultaneously see how those changes look in the iOS 6 version of the file. Follow these steps to preview an earlier storyboard or xib file: 1. While viewing the iOS 7 storyboard or xib file on the canvas, open the assistant editor. 2. Open the Assistant pop-up menu. (The Assistant pop-up menu is the first item to the right of the back and forward arrows in the assistant editor jump bar.) 3. In the menu, scroll to the Preview item and choose the storyboard or xib file. 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 12 Supporting iOS 6 Toggle between viewing app UI in iOS 7 and iOS 6.1 or earlier. If your app needs to support iOS 6.1 or earlier, use this feature to make sure the UI looks correct in all versions of the app. Follow these steps to switch between two versions of the UI: 1. Open the File inspector in Interface Builder. 2. Open the “View as” menu. 3. Choose the version of the UI you want to view. For more information about new Interface Builder features in Xcode 5, see What's New in Xcode . Supporting Two Versions of a Standard App If both versions of a standard app should have a similar layout, use Auto Layout to create a UI that works correctly in both versions of iOS. To support multiple versions of iOS, specify a single set of constraints that Auto Layout can use to adjust the views and controls in the storyboard or xib files (to learn more about constraints, see “Constraints Express Relationships Between Views”). If both versions of a standard app should have a similar layout and you’re not using Auto Layout, use offsets. To use offsets, first update the UI for iOS 7. Next, specify values that define the origin, height, and width of each element in the earlier UI as offsets from the element’s new position in the iOS 7 UI. Supporting iOS 6 Supporting Two Versions of a Standard App 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 13 To learn more about Auto Layout, see Cocoa Auto Layout Guide . Managing Multiple Images in a Hybrid App Hybrid apps often include custom image assets, such as bar button icons, and background views for bars or other controls. Apps can use one or more asset catalogs to manage these resources. (To learn more about asset catalogs, see Asset Catalog Help .) Note: An asset catalog contains resources that are displayed within an app; an asset catalog doesn’t hold the app icon, launch image, or any other image that an outside process needs to access. In a hybrid app that must support multiple versions of iOS, you manage the images yourself. Images that differ depending on an app’s version should have unique names; otherwise, you can use the same image in both versions. If your storyboard or xib file contains an embedded image, consider creating an outlet to the image view and loading the appropriate resource as needed. To learn how to load different assets in code, see “Loading Resources Conditionally.” Loading Resources Conditionally In some cases, you need to determine the iOS version your app is currently running in so you can respond appropriately in code. For example, if different versions of an app use significantly different layouts, you can load different storyboard or xib files for each version. You may also need to use different code paths to handle API differences, such using barTintColor instead of tintColor to tint a bar’s background. If you need to load different resources for different app versions—and you currently identify a storyboard or xib file in your Info.plist file—you can instead check the system version and load the appropriate resource in application:didFinishLaunchingWithOptions:. One way to find out whether an app is currently running in iOS 7 or earlier is to write a macro that checks the system version. The code below shows a way to check the system version and store the result so you can refer to it whenever you need to conditionally load resources or use different APIs. NSUInteger DeviceSystemMajorVersion(); NSUInteger DeviceSystemMajorVersion() { static NSUInteger _deviceSystemMajorVersion = -1; Supporting iOS 6 Managing Multiple Images in a Hybrid App 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 14 static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ _deviceSystemMajorVersion = [[[[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:@"."] objectAtIndex:0] intValue]; }); return _deviceSystemMajorVersion; } #define MY_MACRO_NAME (DeviceSystemMajorVersion() < 7) Supporting iOS 6 Loading Resources Conditionally 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 15 ● “Layout and Appearance” (page 17) ● “Bars and Bar Buttons” (page 21) ● “Content Views” (page 28) ● “Controls” (page 37) ● “Temporary Views” (page 45) 2013-06-10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information. 16 Updating the UI Important: This is a preliminary document for an API or technology in development. Although this document has been reviewed for technical accuracy, it is not final. This Apple confidential information is for use only by registered members of the applicable Apple Developer program. Apple is supplying this confidential information to help you plan for the adoption of the technologies and programming interfaces described herein. This information is subject to change, and software implemented according to this document should be tested with final operating system software and final documentation. Newer versions of this document may be provided with future seeds of the API or technology. iOS 7 brings several changes to how you lay out and customize the appearance of your UI. The changes in view-controller layout, tint color, and fonts affect all the UIKit objects in your app. Using View Controllers In iOS 7, view controllers use full-screen layout. At the same time, iOS 7 gives you more granular control over the way a view controller lays out its views. In particular, the concept of full-screen layout has been refined to let a view controller specify the layout of each edge of its view. The wantsFullScreenLayout view controller property is deprecated in iOS 7. If you currently specify wantsFullScreenLayout = NO, the view controller may display its content at an unexpected screen location when it runs in iOS 7. To adjust how a view controller lays out its views, UIViewController provides the following properties: ● edgesForExtendedLayout The edgesForExtendedLayout property uses the UIExtendedEdge type, which specifies each of a rectangle’s four edges, in addition to specifying none and all. Use edgesForExtendedLayout to specify which edges of a view should be extended, regardless of bar translucency. By default, the value of th