1. iOS Application Development

2. Designing Universal Interface Which
Used for iPad and iPhone
These are confidential sessions - please refrain from streaming, blogging, or taking pictures
Session 16
Vu Tran Lam
IAD-2013

3. • Overview of all screen sizes for iPhone and iPad
• Checking iOS device functions and version of iOS
• Working with split view and popover
• Creating universal iOS app
• Using portrait – landscape orientation in iOS app
• Tips for improving the UI design process
Today’s Topics

4. • Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Overview of All Screen Sizes for iPhone and iPad

5. • Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Checking iOS Devices Info

6. Split View

7. • Use only for iPad
• A split view controller is a full-screen view controller that manages the
presentation of two side-by-side view controllers.
• The UISplitViewController class is a container view controller that
manages two panes of information. The first pane has a fixed width of
320 points and a height that matches the visible window height. The
second pane fills the remaining space
Introduction to Split Views

8. • A The panes of a split view interface contain content that is
managed by view controllers you provide.
• Because the panes contain application-specific content, it is up to
you to manage interactions between the two view controllers.
• However, rotations and other system-related behaviors are
managed by the split view controller itself.
• A split view controller must always be the root of any interface you
create. In other words, you must always install the view from a
UISplitViewController object as the root view of your
application’s window.
Introduction to Split Views

9. • A split view controller is a full-screen view controller that manages
the presentation of two side-by-side view controllers.
Introduction to Split Views

10. • Creating a split view controller using storyboard
• Creating a split view controller programmatically
• Supporting orientation changes in a split view
Working with Split View

11. • Create Master-Detail Application template gives you a split view in
the storyboard, set as the first scene.
• To add a split view controller to an existing app:
• Open your application’s main storyboard.
• Drag a split view controller out of the library.Interface Builder creates a
split view controller a navigation controller and a view controller, and it
creates relationships between them. These relationships identify the
newly created view controllers as the left and right panes of the split
view controller.
• Display it as the first view controller by selecting the option Is Initial View
Controller in the Attributes inspector (or present the view controller in
your user interface in another way.)
Creating Split View Controller Using Storyboard

12. Creating Split View Controller Using Storyboard
Detail View Controller
in Portrait Orientation

13. Creating Split View Controller Using Storyboard
Detail View Controller in
Landscape Orientation

14. • To create a split view controller programmatically, create a new
instance of the UISplitViewController class and assign view
controllers to its two properties.
Creating Split View Controller Using Storyboard
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions
{
MyFirstViewController* firstVC = [[MyFirstViewController alloc] init];
MySecondViewController* secondVC = [[MySecondViewController alloc] init];
UISplitViewController* splitVC = [[UISplitViewController alloc] init];
splitVC.viewControllers = [NSArray arrayWithObjects:firstVC, secondVC, nil];
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
window.rootViewController = splitVC;
[window makeKeyAndVisible];
return YES;
}

15. • A split view controller relies on its two contained view controllers to
determine what orientations are supported.
• It only supports an orientation if both contained view controllers do.
• Even if one of the contained view controllers isn’t currently being
displayed, it must support the orientation.
• When the orientation changes, the split view controller handles
most of the rotation behaviors automatically.
Supporting Orientation Changes in a Split View

16. Split View Demo

17. Popover

18. • Use only for iPad
• A popover is a transient view that can be revealed when people tap
a control or an onscreen area.
• In iOS 7, the popover background is a white blur, which means that
the background of the popover’s content view can be transparent.
A table view inside a popover automatically uses a translucent
appearance; custom content inside a popover should use a
translucent appearance.
Introduction to Popover

19. Introduction to Popover

20. • Creating a popover controller using storyboard
• Creating a popover controller programmatically
Working with Popover

21. Popover Demo

22. • Why universal app?
• Steps to create universal app
• Design icons and images for universal app
Creating Universal iOS App

23. • Setup universal project
• Add iPhone and iPad storyboard
• Add the deployment info
Why universal app?

24. • Setup universal project
• Add iPhone and iPad storyboard
• Add the deployment info
Creating Universal iOS App

25. Setup Universal Project

26. Add iPhone and iPad Storyboard

27. Add the Deployment Info

28. • Setup universal project
• Add iPhone and iPad storyboard
• Add the deployment info
Design icons and images for universal app

29. Universal App Demo

30. • Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Using Portrait – Landscape Orientation

31. • Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Tips for Improving the UI Design Process

32. UICatalog
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/index.htm
Scroll View Programming Guide for iOS
https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/UIScrollView_pg/
Introduction/Introduction.htmll
UISplitViewController Class Reference
https://developer.apple.com/LIBRARY/IOS/documentation/UIKit/Reference/UISplitViewController_class/
Reference/Reference.html
UIPopoverController Class Reference
https://developer.apple.com/library/ios/documentation/uikit/reference/UIPopoverController_class/Reference/
Reference.html
Documentation

33. many thanks
to
lamvt@fpt.com.vn
please
say
Stanford University
https://developer.apple.com
Developer Center
http://www.stanford.edu/class/cs193p
xin
chào

34. Next: Working with Table View and Search Bar