iOS Application Development
Designing Universal Interface Which
Used for iPad and iPhone
These are confidential sessions - please refrain from streamin...
• Overview of all screen sizes for iPhone and iPad
• Checking iOS device functions and version of iOS
• Working with split...
• Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Overview of All Screen...
• Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Checking iOS Devices I...
Split View
• Use only for iPad
• A split view controller is a full-screen view controller that manages the
presentation of two side-b...
• A The panes of a split view interface contain content that is
managed by view controllers you provide.
• Because the pan...
• A split view controller is a full-screen view controller that manages
the presentation of two side-by-side view controll...
• Creating a split view controller using storyboard
• Creating a split view controller programmatically
• Supporting orien...
• Create Master-Detail Application template gives you a split view in
the storyboard, set as the first scene.
• To add a sp...
Creating Split View Controller Using Storyboard
Detail View Controller
in Portrait Orientation
Creating Split View Controller Using Storyboard
Detail View Controller in
Landscape Orientation
• To create a split view controller programmatically, create a new
instance of the UISplitViewController class and assign ...
• A split view controller relies on its two contained view controllers to
determine what orientations are supported.
• It ...
Split View Demo
Popover
• Use only for iPad
• A popover is a transient view that can be revealed when people tap
a control or an onscreen area.
• ...
Introduction to Popover
• Creating a popover controller using storyboard
• Creating a popover controller programmatically
Working with Popover
Popover Demo
• Why universal app?
• Steps to create universal app
• Design icons and images for universal app
Creating Universal iOS App
• Setup universal project
• Add iPhone and iPad storyboard
• Add the deployment info
Why universal app?
• Setup universal project
• Add iPhone and iPad storyboard
• Add the deployment info
Creating Universal iOS App
Setup Universal Project
Add iPhone and iPad Storyboard
Add the Deployment Info
• Setup universal project
• Add iPhone and iPad storyboard
• Add the deployment info
Design icons and images for universal...
Universal App Demo
• Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Using Portrait – Lands...
• Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Tips for Improving the...
UICatalog
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/index.htm
Scroll ...
many thanks
to
lamvt@fpt.com.vn
please
say
Stanford University
https://developer.apple.com
Developer Center
http://www.sta...
Next: Working with Table View and Search Bar
Upcoming SlideShare
Loading in …5
×

Session 16 - Designing universal interface which used for iPad and iPhone

1,683 views

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,683
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Session 16 - Designing universal interface which used for iPad and iPhone

  1. 1. iOS Application Development
  2. 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. 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. 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. 5. • Configure table views in Interface Builder, in the Table View section of the Attributes Inspector: Checking iOS Devices Info
  6. 6. Split View
  7. 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. 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. 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. 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. 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. 12. Creating Split View Controller Using Storyboard Detail View Controller in Portrait Orientation
  13. 13. Creating Split View Controller Using Storyboard Detail View Controller in Landscape Orientation
  14. 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. 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. 16. Split View Demo
  17. 17. Popover
  18. 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. 19. Introduction to Popover
  20. 20. • Creating a popover controller using storyboard • Creating a popover controller programmatically Working with Popover
  21. 21. Popover Demo
  22. 22. • Why universal app? • Steps to create universal app • Design icons and images for universal app Creating Universal iOS App
  23. 23. • Setup universal project • Add iPhone and iPad storyboard • Add the deployment info Why universal app?
  24. 24. • Setup universal project • Add iPhone and iPad storyboard • Add the deployment info Creating Universal iOS App
  25. 25. Setup Universal Project
  26. 26. Add iPhone and iPad Storyboard
  27. 27. Add the Deployment Info
  28. 28. • Setup universal project • Add iPhone and iPad storyboard • Add the deployment info Design icons and images for universal app
  29. 29. Universal App Demo
  30. 30. • Configure table views in Interface Builder, in the Table View section of the Attributes Inspector: Using Portrait – Landscape Orientation
  31. 31. • Configure table views in Interface Builder, in the Table View section of the Attributes Inspector: Tips for Improving the UI Design Process
  32. 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. 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. 34. Next: Working with Table View and Search Bar

×