Saturday, December 6, 2014

Storyboard Tutorial - Part 1


The main advantages of using the story board are the below ones

- With the storyboard, we can have a better conceptual overview of all the screens in the app and its connections between them. Its easier to keep track because entire design is in a single file rather than spread out in different files
- The storyboard describes transition between various screens. The transitions are so called “Segues” and this can be created by ctrl dragging from one view controller to the next. 
- Storyboards makes working with the tableviews lot easier with the new prototype cells and static cells features. We can design the table views almost completely in the storyboard editor, something like that cuts down the amount of code we write

Decided to follow the same exact steps mentioned in the tutorial at this link http://www.raywenderlich.com/50308/storyboards-tutorial-in-ios-7-part-1 

A story board contains multiple ViewControllers. Each view controller is called scene. On an iPhone only one scenes will be visible at a time. But in iPad, multiple scenes could be visible at a time. For e.g. master - details panes in a split-view, or content of a popover. 
The tutorial said to disable the Autolayout. With Xcode 6.1, we also have use Size Classes check box. this also needs to be commented. When unchecking these both will give the iPhone only view size. 

The Example then create tabs for this drag the TabBarViewController from the object list and this will add two view controllers as the tab bar controller comes with two view controllers by default, one for each tab. UITablViewCotnroller is so called container view controller since it contains other view controllers. Other examples of container view controllers are Navigation controller and Split View controller. 

The tutorial instructs to keep one label each in these two view controllers and give the labels to them as First tab and second tab. In the property inspector of the tab bar view controller, 

To experiment myself, just dragged the Tab View Controller to the storyboard and then to individual view controllers, added labels to distinguish whether the view controllers are loaded properly. Also, the starting point of the controller which is decided based on the flag Is initial View Controller can be also achieved by dragging the pointed arrow that indicates that thesis the initial scene to the controller that is required. In this case, just dragged that to the Tab View Controller and thats all i had to do. 

Also understood that the Container view controllers which are displayed are not really acted upon but we need to do on the child view controllers. Also, it looks like Xcode already provides a templates project which helps to create the tab bar controller project. 


As per the instructions in the site, changed the View controllers from the Tab bar view and replaced it with the TableViewController. After this selected Editor -> Embedded In Navigation controller. Embedding inside the navigation controller gave a navigation bar. The navigation bar is a simulated one and it is not a real UINavigation navigation bar. On the navigation view controllers attribute inspector will show the simulated metrics. All of the items such as size, Orientation, Status bar, Top bar, Bottom bar will show the value as Inferred. To add segue between Tab view controller and the navigation controller, the tutorial was suggesting to do a ctrl+drag, which did not work, and hence right clicked and then added the segue manually, and this worked. When added the segue, a tab was created at the bottom and it shown as Item. 

After all these, till now, my storyboard looked like this. 


No comments:

Post a Comment