Tabbed Views UITabBarController

Controller Architecture UITabBarController Controls 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 controllers Every 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 Xcode Choose 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 Tabs Need 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 View Click 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: " 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 func loadAddressURL() { if let requestURL = NSURL(string: “ + 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.Storyboard click 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 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 files Drag 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 self.tabBarItem.image = [UIImage } return self; } I’m reusing an icon; you could create a new one if you like.