With iOS 5, Storyboards represent a significant change to how we, as developers, construct our user interfaces using Interface Builder. So far my experience of Storyboards has been extremely positive however, resources are thin on the ground and with this post I hope to pass on some of my initial experiences. For a walk through of some of the basics and common pitfalls check out my YouTube video. I have also recently created a practical example around todo lists with a backend system and a full explanation of how to use Storyboards in a working application please check it out here.
There are several key concepts that this article will cover the first is the concept of the Scene. Within Storyboards every UIViewController represent one screen of content. These scenes are linked together with Segues, these define the transitions between one scene to another. You can specify how you wish this transition to be made by using one of the preset transitions, Push, Modal and Popover or you can also create your own custom transitions which can bring a very unique and specific look/feel to your application.
Other extremely useful features are, Static Cells as your UITableView Content and Prototype Cells. These concepts are illustrated in the subsequent Scenes and Segues, Prototype Cells and Static Content, and General Storyboard examples,
Scenes and Segues
As previously stated a scene represents one screen of content. You can embed these scenes in UINavigationControllers or UITabBarControllers by dragging on a UINavigationController or a UITabBarController and dropping your UIViewController into it or alternatively, choose Editor->Embed In in the Xcode menu and choose there relevant component. Using the Embed In method is very handy and prevents you having to rejig things in your storyboard particularly when you have created several different Segues.
In the image below you will see an example of a blank scene that has been placed within a UINavigationController. The relationship between the UINavigationController and the ViewController is shown by a relationship link.
To construct transitions between scenes we use Segues. These are created by right clicking on the element that will initiate the transition and dragging over to the scene we want to transition to. In the image below you will see the popup that appears allowing you to specify the transition type and the resulting Segue created. In this case I have created a push Segue.
As a result whenever someone clicks on the contacts UIBarButton the ContactsViewController will be pushed onto the screen without the need for any additional code. To pass the ContactsViewController data we must implement the prepareForSegue method. First we have some setup we have to do in Interface Builder so that we can identify which segue has been executed. The Segue identifier can be set in the Attributes Inspector.
Now in your prepareForSegue method you can identify which Segue has been executed and provided the destinationView with the correct information.
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
if([[segue identifier] isEqualToString:@"ContactsViewControllerSegue"]){
ContactsViewController *cvc = (ContactsViewController *)[segue destinationViewController];
}
} |
Now we know what the destinationViewController is we can set its data properties. To receive information back from a scene we use delegation. Both are shown simply in the following code snipped.
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
if([[segue identifier] isEqualToString:@"ContactsViewControllerSegue"]){
ContactsViewController *cvc = (ContactsViewController *)[segue destinationViewController];
cvc.contacts = self.contacts;
cvc.delegate = self;
}
} |
A final note about UIStoryboardSegue is that when you choose a popover transition you must get access to the popover in order to dismiss it. You can get this by casting the Segue to a UIStoryboardPopoverSegue but only after you have checked the identity of the Segue to ensure you are making the correct cast.
What software are You using to draw such amazing screenshot description / arrows?
Thanks. I use a combination of Photoshop and Illustrator (CS5).
Very beautiful ! The web style beauty too !
Thank you, as I say to most visitors to the site if you have any tutorials you would like to see please send me your requests.
I have to build a Course management app. The first view contains the semesters – 1,2….12. The second view contains details that are common to the previous table view controller. The details in the second table view controller are: Lectures, Papers, To-do list, Record lecture.
Depending on the user’s selection, he can access Lectures, Papers, List, Record Lecture for that particular semester.
I am not able to figure out how to pass data from the third view to the fourth and subsequent views. For eg. Lecture->Lecture 1: Introduction->Download PDF.
Kindly help me in this regard. Your help will be highly appreciated.
Hello Alex,
To pass data between views is dependant on how you make the transition. I am assuming you are transitioning through Segues hooked up in interface builder. To pass data to an incoming view controller you have to implement the prepareForSegue in the source view controller. Here you can access the segue by name pull out the destination view controller and set any properties required just before it is pushed on. In the same way if you want to move from this newly pushed on view controller the inside its class you must again implement the prepareForSegue to the next (3rd) view controller.
There are a little “Gotcha” be sure and name your Segue in interface builder so that you can refer to it in your perpareForSegue. You can use this to identify which segue has been fired. Off the top of my head I think it is [segue identifier].
Hope this helps,
Scott
What an awesome feature! Static cells is a miracle! Thanks for overview!
Hi great tutorial. I have one question though. If i have a tabbarcontroller i obviously dont have a class for it since it has classes for each of the tabs. If i need to reference this tabbarcontrollerview in another class how do i do it?
If you are trying to reference one of the UIViewControllers in the UITabBarController you can just call self.tabBarController. Alternatively you could create an IBOutlet, if the UIViewController is for some reason not part of the UITabBarController, and hook up the UITabBarController to that.
(Also, should you need to you could create a class that extends UITabBarController and set the UITabBarController in your Storyboard to be of this Class in the Identity Inspector)
Does this answer the question?
i have a same problem. For example, imagine that i have a viewcontrol class it has a login information and what i want to do is after user click login button on login screen i want to check it with my validation method and then i want to go to the UITabBarController in the storyboard. Can you please help me?
Hey,
Great tutorial, are you able to provide the sample project? I’m stuck trying to get a tableview to transition to another scene and would really benefit from looking over the code.
cheers,
Trent
After you identified the segue that is being connected from the UIViewController to the UITableViweController as a push for the current destination – where to you enter the code for prepareForSegue:
Is this in the App delegate in the didFinishLaunchingWithOptions?
or in the viewController – didFinishLaunching?
Thanks
You implement prepareForSegue in the ViewController. You override the -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender method so just add this to your ViewController .m file. Here is an example .m file.
@implementation ExampleViewController
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
#pragma mark – View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (void)viewDidUnload
{
[super viewDidUnload];
}
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
}
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
}
- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
}
- (void)viewDidDisappear:(BOOL)animated
{
[super viewDidDisappear:animated];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return YES;
}
@end
Great tutorial, awesome.
How I can do to close a popover by clicking the save button?
Thanks in advance and have a nice day.
Right (ctl) click on your button and drag to the UIViewController you wish to display. In the pop up choose popover and this will show the view inside a popover when you run the code and sick save. If you are changing the transition type of a Segue select the Segue and in the attribute inspector change the style to popover. Remember that if you need to controller the Popover (e.g dismiss it on an action), in your prepareForSegue check the Segue’s identifier and cast your UIStoryboardSegue to a UIStoryboardPopoverSegue, keeping a handle to it so you can dismiss it manually in your code.
Hope this helps.
Thanks Scott.
I am having trouble dismissing the popver, and I’ve tried following your instructions.
I did cast the segue, but I am unsure what I should call in the delegate’s implemented method. So, the popover controller calls back to its delegate, which calls this unsuccessfully:
[self dismissModalViewControllerAnimated:YES];
Any help would be greatly appreciated.
Flaviu
Awesome Scott, really helped me out with some of the storyboard concepts, i’m really liking storyboard.
Hi,
Very nice explanation of how it works. I created a button from the main ViewController and dragged a Segue connection to another one as you showed above. I complex and it worked fine. But when I try to define an Identifier for this Segue, a lock image appear and I am not able to use it in the code.
Do I need to add an ivar at the main ViewController.h?
Thanks again!
Thank you so much for you explanation, it is crystal clear. Also, thanks for the reference, although Apple documentation is good, it its too redundant sometimes and hard to find stuff.
Thank you, Scott, this is very informative and helpful..
Thanks a lot for these great and clear explanations !!! I was fighting trying to have a UITableView pushing another UITableView without embedding the second one in a UINavigationController ! The think is I didn’t make the link between the cellidentifier in Interface Builder and my code, so the segue was useless ! And now it works ! No more headache !
Wonderful tutorials, i love them.
I’m new to Xcode and to programming and i have some problems getting a segue working without a navigation / tab bar controller.
I have two ViewControllers and want a simple segue on a button tab.
The segue is already created in the storyboard and i have a prepareForSegue method to pass the relevant information. But so far my button does nothing. I think i need to alloc/init the new ViewController somewhere and make it my new view but I can’t get it working
Would be nice if you could provide me some help or a link
Thanks anyway for your awesome work.
Figured it out myself.
My problem was the segue-type. “Push” only works with navigation controllers…
Changed it to a modal segue and it works perfectly.
Thanks! This comment solved my problem. “Push” seque was calling prepare but not changing viewcontroller.
Hi Scott,
Thanks for the information. I’ve been trying to do create a seque for UILabels and it doesn’t seem to take…is there a restriction on what types of objects can become seques?
Labels do not normally resound to taps so that could be your problem when trying to create a segue. What is it you are trying to achieve and i will try and give you some advice on the best approach.
Hey Scott,
I was wondering if you could tell me something. I have a button that when you click, segues to the new view. I’m wanting the new view to do some basic math as soon as it loads up. Can you tell me where I can put that? I’ve tried putting a viewdidload in the .m file button it didn’t work.
Thanks, —The NEWB…
The viewDidLoad should work,
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
[super viewDidLoad];
NSLog(@”View did load was called”);
}
have you set the class of your view controller in interface builder?
You can check the order things are called but you should find you get
awakeFromNib
viewDidLoad
viewWillAppear
viewDidAppear
in that order.
The great thing about the time you spent in Photoshop and Illustrator is that pictures really do convey more than a thousand words, so thank you for that effort.
Have you encountered (and solved) a situation where you segue to a scene (think “add new record” scene, and you then need a way to cancel the add? I may be missing something obvious, but “canceling” a scene is eluding me. I haven’t yet tried to just invoke a previous UIStoryBoard (somehow!).
Keep up the great work!
Thanks. Typically I just create an IBAction as before and dismiss the view controller you have pushed on (or presented modally) inside this method. Then you can add a button to your storyboard and hook this up to the IBAction. At the moment I don’t think you can do this any other way but I will have a look and see if there is any way inside the storyboard editor to do this.
Thanks: That makes perfect sense — add a Cancel button to the nav bar, change my alert to just describe the problem and have an Okay button. I was trying to dismiss the controller from the UIAlertView delegate method and that was just annoying my computer.
Hi, if I used a push segue to point to a view controller that was already pushed on, will it pop the view controllers in the navigation controller until it reaches the view controller, or do I have to code in the “pop” view controllers method on the UI navigation controller?…
Where should I put in the codes for the Segues?
Very useful! Thank you for the tutorial!
Thank for awesome tutorial. I just wonder where to download the source code (Storyboard example), because the text in the video is too small, I couldn’t read it
Great tutorial!
Scott – wonderful article. Any thoughts or ideas on how to navigate back to the earlier scene from the “segued” scene programmatically?
You can just call dismissModalViewControllerAnimated and that should take you back or popViewControllerAnimated depending on how it has been displayed. Alternatively you can add a delegate to your new ViewController class so that you can notify the view you have navigated from that you wish to come back and let it make the choice so that your class can be reused.
Hi,
This is a very helpful tutorial but i’m trying to make an app using master detail view in Xcode and i want to link the tables in the table view (or master detail) to different detail views. I want to make 3 different detail views in interface builder. In the detail views i want to display information from a database. I’m now using sybase as a database but it runs on windows so i had to use an virtual machine (VMWare Fusion to run also on windows 7), is there a better way to accomplish this? Can you maybe make an tutorial about it?
Thanks
I’m new to iOS 5, thanks for the material!
Thanks a lot for this! Really helpful when learning iOS programming!
I have a question about segues though.
If I have let’s say a login screen that I want to be able to force show from anywhere in the application (if the user cannot be authed), do I need a segues for from every controller in the application then or is there a better way?
Thanks! / David
Scott, this tutorial is great and easy to follow along! I am wondering if you can make a tutorial on what I need help with. I am trying to create an app as a help guide for my company. I have several controllers that I have set up, and depending on what they select on each screen,will determine which screen it will take them to next. I have done well in creating it so far, but, now I’ve ran into a problem. On one of of the navigation screens, I need to have several choices (preferably with checkboxes or radio buttons), and depending on how many of those they select, will depend on the next screen that will come up. (Example: If they select 3-5 of the options, it will take them to View Controller A. If they select 6-8, it will take them to View Controller B, etc). I have looked at many tutorials, but can’t seem to find one to help me with this. Do you know how to do this? I need help creaing checkboxes/radio buttons, as well as creating a control for these.
Thanks
Hello Ashley,
I am not sure how generalizable this type of tutorial would be and wether it would be something that has broad appeal to the sites readership. If you require someone to work on a consultancy bases to get this project done I would be more than happy to help. Thanks, Scott.
Thanks for some other informative blog. Where else could I get
that kind of information written in such a perfect manner?
I have a project that I’m just now running on, and I have been at the glance out for such info.
Thanks for your time for posting “iOS 5 Storyboard: How To use Segues,
Scenes and Static Content UITableViews”. I reallymay
certainly wind up being coming back for alot more reading through
and commenting soon enough. Thank you, Beatris
Hi
Great tutorial.
I’m trying to develope an ipad splitview app. In the masterview is a tableview populated by sqlite, when a row is selected i want to refresh the detailview tableview with new data also populated by sqlite. But i’m stuck here and cann’t get it to refresh?
Here is the link to my stackoverflow question
http://stackoverflow.com/questions/14469546/updating-detail-view-utableview-in-a-splitview-app
Thanks for any help
It’s great tutorial for beginner with storyboard feature introduced by new apple SDK. Keep posting new tutorial for complex usage of storyboard.
Thanks again for this simply great tutorial…
Hey Scott,
great tutorial thanks ! I was wondering, what software do you use to annotate and add arrows to your screenshots ! They look great !
Thanks,
Mathieu
Thanks, I use illustrator.
TNX!!!!!!!! great tutorial!