Your SlideShare is downloading. ×
0
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

951

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
951
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×