Sunday, September 21, 2014

StoryBoard hands on

IF the requirement is to have an app with many screens, then storyboards can help to reduce the amount of glue code between the screens. Instead of using separate xib file for each of the view controllers, the app can use a single storyboard that contains the designs of all these view controllers and the relationships between them. 

Below are few advantages storyboards have over the xib file. 

1. Bettter overview of overall app screens and connections between the screens. 
2. The storyboard describes the transitions between various screens. These transitions are called segues and the segues are created by control dragging from one view controller to the next. this helps to write less code for connecting the screens. 
3. Storyboards make working with table views lot easier with the new prototype cells and static cells features. The table views can be completely designed with the storyboard editor allowing no code to write using the 

Especially as a person loving to write the ui code programmatically, xib was not a way to go for me and neither storyboard. However, for getting an idea of how it works, the below sections dive into creating a sample app. 

In Xcode 5.0, storyboards are enabled by default. Due to this, the storyboard files are enabled by default in the application. This created a new project with ViewController class and two storyboard files, one for iPhone and another for iPad. Adding controls to the Storyboard is similar to how we used to do with the xib files. Just drag and drop. The official terminology for a ViewController in storyboard is a scene. On the iPhone, only one scene is visible at a time. However, on iPad, multiple scenes are visible at a point, for e.g. Master Detail view controllers. 

Now I decided to add a Button to the view controller for a test. This was quite easy as dragging and dropping the component. After doing this, the ui looked something like below. 

In a xib based application, a xib file contained a top level UIWindow object, a reference to the app delegate, and one or more UIViewControllers When the apps ui is put in a story board, the MainWindow.xib is not used. 

When a starboard application is done, it is a requirement that the ApplicationDelegate should inherit from the UIResponder, and that it should have a UIWindow property. In the plist file, it will be declared that the main story board file as the story board file name and the default one it create is Main. The plist property name is UIMainStoryboardFile. When this settings is file is present, then UIApplication will load the named storyboard file dynamically and automatically instantiates the first UIViewController from that story board, and then puts its view into the new UIWindow. 

Now in order to add tab bar controller, just drag and drop the tab bar controller from the object library window to the story board. After doing this, the already existing UIview controller where the button was added still remained the launch point. The tab bar controller comes with two uiviewcontrollers by default. note that the original view controller had the arrow indicating that this is the initial launch view controller. this can be made to point to the tab bar controller by just dragging the arrow to the tab bar view controller. 

To note, even though there were two view controllers created in the storyboard, there was no UIViewController class that was present in the source file list. If needed, a separate UIViewController can be created and highlight the controller to which custom class name to be attached and give this class name. 

references: 
http://www.raywenderlich.com/50308/storyboards-tutorial-in-ios-7-part-1

No comments:

Post a Comment