iOS Storyboards


Published on

Tokyo iOS Developers Meetup November 12, 2011 Storyboarding presentation by Chris Wynn

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Give a brief self introduction\n
  • \n
  • Primarily a visual way to specify views and transitions but can be used programmatically as well.\nI haven’t found a need/reason to use them programmatically yet.\n
  • \n
  • - Before storyboarding, it was required to write some glue code to transition between views.\n- With storyboarding, that is no longer required\n- For apps w/ many views, helps to reduce amount of glue code to transition from one view to the next\n- “Bird’s Eye” view gives you a high level understanding of your app\n
  • So what do I mean by “Bird’s Eye” view?\nHere is an example storyboard that shows you what I’m talking about:\n- Clearly can see Views and relationships between them\n- Gives you a conceptual overview of the connections between views\n- Can see that even if you don’t know what the app does, can immediately start to see the screens that it has and how they are related\n\nThat’s the power of storyboarding\nSomething you really couldn’t do before this feature was added.\n
  • Before storyboarding, specified views individually with NIB files\n- One NIB file per-View\n- Wrote code to transition from one to another\nWith storyboarding can have a single storyboard that contains the layout for ALL your views and transtions\nNo need for NIB files at all.\n\nIn addition, for table view cells, much easier to deal with in a storyboard\n- Previously had to create UITableView cells in a nib file and load from the nib at run-time\n- Now, design prototype cells directly in the storyboard\n- Create cells in code just by specifying the cell’s identifier \n
  • \n
  • prepareForSegue -- Useful for when you are transitioning from one view controller to another and you want to pass some data from one controller to the other. Most real apps\n
  • prepareForSegue -- Useful for when you are transitioning from one view controller to another and you want to pass some data from one controller to the other. Most real apps\n
  • \n
  • \n
  • A UIStoryboard object encapsulates the view controller graph stored in an Interface Builder storyboard resource file. This view controller graph represents the view controllers for all or part of your application’s user interface. Normally, view controllers in a storyboard are instantiated and created automatically in response to actions defined within the storyboard itself. However, you can use a storyboard object to instantiate the initial view controller in a storyboard file or instantiate other view controllers that you want to present programmatically.\nCan use a UIStoryboard to instantiate a view controller programmatically -- in practice don’t really need to do this.\n
  • \n
  • \n
  • iOS Storyboards

    1. 1. iOS Storyboards
    2. 2. This TalkWhat, When, Why and How?Demo
    3. 3. What?New feature in Xcode and iOSVisual way to specify views andtransitions between them
    4. 4. When?Xcode 4.2iOS Deployment Target: iOS 5.0+* Not supported for devices not running iOS 5.0
    5. 5. Why?Reduces amount of glue code“Bird’s Eye” view of your app
    6. 6. Sample Storyboard Image Courtesy: Ray Wenderlich
    7. 7. Advantages• Single storyboard contains layout for ALL views/transitions (no separate nib files)• Ctrl-drag to create a transition• Flexible support for UITableViewCells • Design directly in storyboard (no nib file)
    8. 8. How?• New terminology Scene - view controller Segue - transition from one view to another• Create a new project w/ “Use Storyboard”• Create segues (ctrl-drag) in your Storyboard
    9. 9. How? (Optional)• Add a behavior that occurs during (just before) a segue. Override method: -(void)prepareForSegue:(UIStoryboardSegue *)segue sender: (id)sender { if ([[segue identifier] isEqualToString:@”MySegue”]) { SecondView *vc = [segue destinationViewController]; /* set some data on the view controller */ } }
    10. 10. How? (Optional #2)• Programmatically invoke a segue: [self performSegueWithIdentifier:@”MySegue” sender:self];
    11. 11. Demo
    12. 12. So what is UIStoryboard?
    13. 13. UIStoryboard is...Runtime representation ofeverything configured in InterfaceBuilder
    14. 14. Can load any scene with:[UIStoryboard instantiateInitialViewController];[UIStoryboard instantiateViewControllerWithIdentifier:@”myView”]; Can use multiple storyboards and load with:[UIStoryboard storyboardWithName:@”myBoard” bundle:myBundle];
    15. 15. ResourcesTutorials: 2011 Session Videos: Session 309 - Introducing Interface Builder Storyboarding