IT0093
Module 5:
Program Interface
• To understand the concept of storyboard
• To familiarize each components in developing iOS
mobile applications
• To differentiate each view controller
Module 5 : Sub-topic 1
UI Components
• Normal View
• Table View - Plain Table or Grouped Table
• Table view with NavigationBar (Stack)
• View with Tabbed
• Multi Views
• Status Bar
Displays device’s current battery level, 3G connection, bars of reception,
phone carrier, and a whole lot more. It’s recommended that you always
include these elements.
• Navigation Bar
Gives your users the option to navigate between page hierarchies. This often
includes a button on the left side of the bar to enable the user to return to the
previous app view.
• Toolbar
Appears at the bottom of the iPhone app. This will hold a few icons tied to
some functions
such as Share, Download, Delete, etc.
• Tab Bar
Gives your users the option to navigate between page hierarchies. This often
includes a button on the left side of the bar to enable the user to return to the
previous app view.
• Is a container
• Some properties
• rootViewController – initial vc
• viewControllers – all vc in the stack
• topViewControllers – visible vc
• Manages the Navigation Bar
• Navigation bar has left and right buttons, and title view
• VCs in the stack access navigationItem property (to set title button)
• Can be hidden (ex. Customized UIs)
• Automatic handling of back button
• Can have a toolbar associated with it
• VCs can show/hide toolbar as needed
• VCs can set toolbar items
• In storyboard: uses Push segue
• Can programmatically push
• Can programmatically pop to previous or to top
• Is a container
• VCs are loaded concurrently
• Presented one at a time (viewWillAppear will be called)
• Manages the switching of views
• VCs maintain state
• Manages the TabBar
• VCs access tabBarItem property (to set label, icon, badge)
• Is a scroll view
• Contains UITableViewCell Objects
• Used to present hierarchical data (best used with navigation controller)
• Can be static or dynamic
• Uses a delegate performs actions (ex. When row is selected, deleted, etc)
• Concept of “reuse”
• Plain or Grouped style
• Has sections, with header and footer
• Table itself can have header and footer
• TableView needs datasource and delegate object
• Can be only be built in the storyboard
• Doesn’t necessarily need a custom class if all you need are standard seques
• But if you need custom behavior (through delegate), or have controls which
need outlets and actions, then you need custom class
• Build one or more prototypes cells in story board
• Prototype cells define layout of the cell
• Can use one of the four standard layouts
• Needs a custom class (because it need a datasource
object)
The UITableViewCell class defines three properties for this cell content:
• textLabel – A label for the title (a UILabel Object)
• detailTextLabel – A label for the subtitle if there is additional detail (a
UILabel object)
• imageView – An image view for an image (a UIImageView object)
Datasource
tableView:numberOfSections:
tableView:numberOfRowsInSection:
tableView:cellForRowAtIndexPath:
An indexPath – contains section/row properties
optional: tableView:titleForHeaderInSection:
(among other things)
Delegate
tableView:didSelectRowAtIndexPath:
• awakeFromNib
• viewDidLoad
• viewWillAppear
• viewDidAppear
awakeFromNib
• Prepares the receiver for service after it has been loaded from an Interface
Builder archive, or nib file.
viewDidLoad
• Normally used to perform additional initialization
• steps on views that are loaded from nib files.
• Normally loading data: NSArray, pList, Core Data
viewWillAppear
• is called before the receiver’s view is about to be
• displayed onscreen and before any animations are configured for showing the
view.
viewDidAppear
• is called after the receiver’s view was added to a window.
Note:
• viewDidLoad method is called after the ViewController's view is loaded into
memory, whereas viewDidAppear method is called every time the view
appears on screen.
applicationWillResignActive
applicationDidEnterBackground
applicationWillTerminate
Note:
Think about when to Save and restore state for different shutdown
scenarios. That’s why you see there’s no save button in iOS apps.
Configurable via Attribute Inspector
Tab Bar Controllers (UITabBars)
Navigation Controllers (UINavigationbar)
View Controllers (UIViews & UITableViews)
Using stacks, and their hierarchy:
Module 5 : Sub-topic 2
Storyboard & Segue
• To differentiate each view controller
• To apply alert message as part of notification
and dialogs
• To respond to different events of each
component given
Remember views use stacks and needs to be pushed!
If you are using Xib files, codes below to push it
navController = [[UINavigationBarController alloc] init];
[navController pushViewController: firstViewController
animated:NO];
Add them to the tab bar controller
tabBarController.viewControllers = [NSArray
arrayWithObjects: navController, anotherNavController,
someViewController, nil];
Codes to creating a tab bar controller
UITabBarController *tabBarController =
[[UITabBarController alloc] init];
• With iOS 5, Storyboards represent a significant change to how we,
as developers, construct our user interfaces using Interface Builder.
• Storyboarding is another nice feature that will really save
developer’s time.
• Storyboarding greatly simplifies the setup between view controllers.
It allows a new graphical representation of the flow between
screens.
• Basically, you add various view controllers and hook them together
with “segues”. The segue is the transition between view controllers.
Views View Controller
view
New Key Concept
Scene (View | Dock)
Segue
Dock
View Controller
First Responder
Exit
• Storyboarding allows the table view cells can be laid out directly in the
storyboard, and hooked into the table view controller.
• Storyboards allow for the design of static table views as well as dynamic
table views. With static table views, you can visually lay out the entire
table. This greatly reduces the amount of coding.
• Static table doesn’t need to define a data source for the view controller!
Create a
template
tableView cell
for the rest Place objects
of the cells in is easy
the table
and populate
it with your
data later
Steps:
• Create a new SubClass of Type UITableViewCell
• Create Appropriate IBOutlets in .h file
• Create binding between IB and code using Assistant Editor
Element Description
Relationship
Note:
Modal When you hook up a
Popover ViewController with a
segue you have
Push several options
Replace
Custom
Source Segue
Destination
View View
Value Value
General Syntax:
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id) sender {
if ([ [segue identifier] isEqualToString:@”MyIdentifierThatISetInInterfaceBuilder”] ) {
[ [segue destinationViewController] setProperty:myData];
}
}
• When a row is selected, the segue creates the detail view controller
as the destination.
• Set the detail view controller's detail item to the item associated
with the selected row.
Master to Detail Table Code Syntax
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
if ([[segue identifier] isEqualToString:@"detailSegue"]) {
NSIndexPath *indexPath = [self.tableView
indexPathForSelectedRow];
NSString *selectedObject = [self.myArray
objectAtIndex:indexPath.row];
[[segue destinationViewController]
setDetailItem:selectedObject];
}
}
• Need to make separate storyboards
• View controllers are reusable
• Must be careful in maintaining compatibility with the iPhone and iPad
storyboards
• Additional things: split views and popovers
• The difference between iPad and iPhone are:
• Display real estate and size
iPad is 4x bigger
• Additional UI Controllers:
PopoverController
SplitviewController
• The idea is to:
• Create a ViewController
• Create a PopoverController to contain the ViewController
• You can also create a Popover using Storyboard and Segue without
programming
//If you have multiple storyboard, let it know which one
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"iPad" bundle:nil];
//which ViewController
myViewController *myviewcontroller = [storyboard
instantiateViewControllerWithIdentifier:@"TrafficPopupViewController"];
//Checking for Popover
if(![popoverController isPopoverVisible]) {
• UIPopoverController *popOver = [[UIPopoverController alloc]
• initWithContentViewController:myviewcontroller];
• self.annotationPopoverController = popOver;
• popOver.popoverContentSize = CGSizeMake(320, 240);
• [popOver presentPopoverFromRect:view.bounds inView:view
• permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
}
When you hook up a UIButton to a ViewController with a
segue you have several options, use the Popover option.
• Create 2 types of user interfaces based on iPad’s screen orientation
• Master (left) & Detail (Right) View Controllers
• Additional Segue Elements
Master Detail
Normally, Master becomes a popover controller when iPad is in portrait
orientation.
Detail becomes a full view controller when in Landscape orientation.
How it will look like
