Wednesday 26 December 2012

Implementing StoryBoard in iOS- part I



With the release of iOS 5, Apple updated the iOS SDK with more than 1500 APIs, and Storyboard is one of the most fascinating.

 Introduction

Storyboarding allows one to lay out the workflow of your app using the new Storyboards feature built into the design tools of Xcode.
Apps that use Navigation and tab Bars to transition between Views, Storyboard ease the development by managing the View Controllers for you.

You can specify the transitions and segues that are used when switching between the Views without having to code them by hand.
Storyboard enables you to interact with all the screens in your application without the cumbersome code you have to write for the transitions between the screens and the control used to trigger the transitions.

Storyboards have a number of advantages over regular nibs:
  • With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them. It’s easier to keep track of everything because the entire design is in a single file, rather than spread out over many separate nibs.
  • The storyboard describes the transitions between the various screens. These transitions are called “segues” and you create them by simply ctrl-dragging from one view controller to the next. With the help of segues you have to less take care of UI development.
  •  Storyboards make working with table views a lot easier with the new prototype cells and static cells features. You can design your table views almost completely in the storyboard editor, something else that cuts down on the amount of code you have to write.




With many advantages storyboards do some limitations. The Storyboard Editor isn’t as powerful as Interface Builder yet, there are a few things IB can do that the Storyboard Editor unfortunately can’t. You also need a big monitor, especially when you write iPad apps.

If you are a person who loves to create entire UI programmatically, then storyboards are probably not for you.

Below Image shows storyboard in action.






















We will be creating a simple Todo application with storyboard.

Get Started

Fire up your Xcode, Create a new single View Application, name it as myTodo and don't forget to select use storyboard and use Automatic Reference Counting options.


















The .storyboard file in your project explorer is your storyboard file and it looks very similar to the old .xib file.

















There are two main concepts in Storyboarding:scene and segue.
Scene is a View Controller that just represents a screen in an app.
and Segue defines navigation in your storyboard. It indicates how to get from point A to B.(we will be covering segues in part II)

The difference you will see is the arrow pointing to a view and a black container below the main view that says "View Controller".

As the storyboard can have many view controllers so there must be a view controller which shows first when the application gets started, hence the arrow points to the view controller which shows first when the application starts.

You can play a little bit with the storyboard by dragging and dropping the different controls on the view. Its same as your old .xib.

Let's start our ToDo application. Our App will be a Tab bar based Application, in one tab we can see the list of our task. We can add a new task, delete a task and mark our task as done.
In our second Tab we can see the list of our task which we have marked as done.

Here is how our app will look at the end.

              


As this is a Tab Bar application so lets add the tab Bar.
Go to Editor -> Embed ->Tab Bar controller.

This will add the Tab Bar to the storyboard. You can see the arrow is now pointing towards the tab bar and your tab bar is linked to the View Controller.

We need one more Tab for our tab bar, so drag a View Controller on the canvas.

Now from the Tab Bar Ctrl+drag to the newly added View controller, a black popup will appear, choose view controllers.





















After selecting view controller your application will be linked with your Tab bar.
Now rearrange your View Controllers as you like. 
Drag Navigation Bar control on both your View Controllers. Double click at the center of navigation bar to add a title. Add title as My Task on the first View Controller and task Done on the second View Controller.















Add a BarButtonItem to My Tasks screen and add a TableView to both the views, make sure your screen looks like this.




















Select your root folder in the project explorer on the left side, delete the existing ViewController class file from it. Right click it and select add file.
Select Objective-C class file and name it as FinishTaskViewController.
Repeat the same step to add another file named MyTaskViewController.

Now select your Task Done Controller and in the identity inspector assign FinishTaskViewController class to it.

















Do the same for the My Task Controller, assign MyTaskViewController to it.

So Till now we have created a Tab Bar with two tabs in it, added a table View in both the tab to show our data.

"Till now we have not wrote a single line of code."
Lets make sure our both classes i.e. MyTaskViewController and FinishTaskViewController looks like this.

MyTaskViewController.h


#import <UIKit/UIKit.h>
@interface UIViewController<UITableViewDelegate,UITableViewDataSource>

@property (weak, nonatomic) IBOutlet UIBarButtonItem *AddTask;

@property (strong, nonatomic) IBOutlet UITableView *TaskListTable;

@end

As we have added the tableView in it so we will add tableView delegates(UITableViewDelegate,UITableViewDataSource ) to our View Controller.

MyTaskViewController.m

Leave this file as it is.

FinishTaskViewController.h

#import <UIKit/UIKit.h>

@interface FinishTaskViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>

@property (strong, nonatomic) IBOutlet UITableView *FinishTaskTable;
@end


TableView delegates will be added here too.

FinishTaskViewController.m
Leave this file as it is.

As for now we are good to go to run our application. 
We will see a simple Tab Bar based application with table View in it.

This is how it will look,
























What next?

Here we have created our application using storyboard, we will be adding, deleting task in the next part- Implementing StoryBoard in iOS- part II

No comments:

Post a Comment

Pages