Tabbed ViewsUITabBarController
Controller Architecture
UITabBarControllerControls the first view that the user sees
The view controller class (and xib) that manages which view is currently being shown to the user
A tab controller switches views based on which tab button is selected.
Other controllersEvery view in the application has it’s own viewController and own xib file
Taps in the content area go to the viewController
Taps on the tab bar go to the UITabBarController.
The app
We will create a Tab bar view using XcodeChoose File->new->project
Click on Tabbed Application then click next
Name your project, choose iPhone and Swift.
Choose a place to save the project. Do not create a local git repository.
Run the project. There should be an app with two buttons and two views.
What did you get?
Look at the file navigator:
These are the controllers for the first tab (it’s the root controller) and the second tab
This contains the two icons used in the tab bar
There is one storyboard with the two views.
Adding TabsNeed a viewController for each new tab.
Choose File−>New−>File
Choose Cocoa Touch Class and hit next
Name the class ThirdViewController and make sure that it’s a subclass of UIViewController
Do not check Also create XIB file The language should be Swift
Choose the same folder that contains the rest of your code.
Make sure the checkbox next to Targets is checked.
Adding Buttons
This is the third view controller
Adding ViewClick on MainStoryboard and drag a view controller to the storyboard area. Make it look something like this. Change the name in the hierarchical view to “Third”
View Controller
Click on the Third view controller in the Document Outline, then click on the attributes inspector. Change the Class to ThirdViewController.
Adding icon
Create a png image that looks like the image below and call it “third.png”. Should be 30x30 pixels. Add it to the project.
Adding the tab bar button
Connect the new view.go to the main storyboard
Ctrl-drag from the “Tab Bar Controller view” to the new third view and let go.
Choose “Relationship Segue”, “View Controllers”
A third button will appear named “Item”. The third view controller will now be named “Item”.
In the third view controller, click on the icon at the bottom. Then click on the attributes inspector.
In the “Bar Item” section change the title to “Third” and then choose the new icon that you added from the pull-down menu next to “Image”.
Adding an external class
What if we want to add an external class/view that we’ve developed somewhere else?
We’ll start by creating a new project.
Go to File−>new−>project and choose Single View Application
Name the project myBrowser
Creating the view
Click on the Main.Storyboard
Add two buttons, a text field and a web view.
make the placeholder text for the filed to be “Enter a URL”
set the keyboard type to be “URL”
set the return key to be “go”
Arrange as in the next slide
Creating the View
Connecting the web view
Click on the webview and open the connections inspector.
Drag from the goBack circle to the “Back” button. Choose “touch up inside” from the pop-up dialog
Drag from the goForward circle to the “Forward” button. Shoose “touch up inside” from the pop-up dialog
Connecting the web view
Now create an IBOutlet for the textView and the webView.
…and connect them to the text field and web view
Default page
Add the bold code to viewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
let url = NSURL(string: "http://www.ithaca.edu")
let request = NSURLRequest(URL: url!)
myWebView.loadRequest(request)
}
Creates an instance of a NSURL that contains a URL
Creates a URL request object that can be sent to a web view.
Causes the webview to load the request
loading URL from text field
In theViewController.swift file add an IBAction:
@IBAction func loadAddressURL() { if let requestURL = NSURL(string: “http://” + urlField.text) { let request = NSURLRequest(URL: requestURL) myWebView.loadRequest(request) } urlField.resignFirstResponder() }
}
Creates an instance of a NSURL that contains a URL
Creates a URL request object that can be sent to a web view.
Causes the webview to load the request
Makes the keyboard disappear
loading URL from text field
Go to Main.Storyboardclick on the text field
open the connections inspector
connect Did End on Exit to the IBAction you created on the previous slide.
Run
Connecting the web view
Finally, go to the xib file and connect the did end on exit sent event to the method that you just created in the file’s owner.
Run
Run the app; you now have a web browser!Note that when you enter a url you must enter the http:// part also!
One last thing
Go back to the nib and drag an activity indicator view onto your window.
Control drag to create an IBOutlet for the activity indicator view.
Add this line as the first line in the textFieldDoneEditing method:
-(IBAction)textFieldDoneEditing:(id)sender{
[self.activityIndicator startAnimating];
Run
Run the app again
When you enter a URL the activity indicator should start rotating
Notice that it does not stop. You have to make your view controller a delegate of the UIWebView and add the method – webViewDidFinishLoad:
In this method you can stop the activity indicator from rotating:
[self.activityIndicator stopAnimating];
Adding a tab redeux
We know how to add a tab; how do we add a tab using a view controller from another project?
First go to the finder, locate the three files you need (CMPViewController.h, CMPViewController.m, and CMPViewController.xib) and drag them into the Project Navigator in Xcode
A dialog box will come up in Xcode. Make sure to check the box “copy into…”
See next slide
Adding filesDrag from finder to Project Navigator
Adding files
You may have to ensure that the new files are part of the build.
In the Project Navigator, click on the project name
click on Targets
click on Build Phases
If you don’t see your new ViewController.m in the list, click on the + and add it. Only add the .m file
Adding files
Or you can go to Files−>Add Files to “yourProject”
Make sure the Add to targets box is checked.
Adding the tab button
Now change the CMPAppDelegate by modifying the method below as you did before
−(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
Adding the tab button
In the view controller that you just added, add this method
− (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{ self = [super initWithNibName:nibNameOrNil
bundle:nibBundleOrNil]; if (self) { self.title = NSLocalizedString(@"Fourth", @"Fourth"); self.tabBarItem.image = [UIImage imageNamed:@"first"];
} return self;}
I’m reusing an icon; you could create a new one if you like.