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.