Odds and Ends – Tab Bars and Tool Bars

1. Odds and Ends –Tab Bars and Tool Bars CSE 390 Fall 2010

2. A couple of apps… So far we have covered a few of the app templates in the iOS SDK – View-Based apps, Utility apps, and Navigation-based apps. To round out out your toolkit we will now take a look at Tab Bar apps, and also how to incorporate a tool bar into your interface. These demos are very basic and contain a limited amount of code.Most of the work will be done in Interface Builder.

3. The Tab Bar app • Begin with a Tabbed Application. • Double-click the Main.storyboardfile to launch Interface Builder. You should now see a new view window entitled Tab Bar Controller, with the default tabs (2 of them) that will link to different views. For our demo we will have one view that is a web browser and another that uses the map kit. In a more complex app you could add additional Tab Bar Items from the Library to the tab bar (up to 3 more) to link to additional views. • You can select the title for each of the tab bar items to type in a new label. The icons however are blank. Save the file and return to Xcode.

4. Adding resources • Back in Xcode we will need to add some images for the icons for the Tab Bar. You can create your own in some graphics editor like Photoshop – the icons are 30 X 30, and typically they are white on a transparent background, saved in the .png format. For our demo I downloaded a set of icons from http://glyphish.com/ to use (they are free to use under the Creative Commons license). • Find the appropriate icons and drag them to your Resources folder, remembering to check that you want them copied to the destination directory. • While we are adding resources, let’s add the MapKit.framework. Navigate to the target->linked frameworks and libraries, click the plus button, and scroll down to select the MapKit.

5. Setting up (continued) • We will now need to create the class files for our 2 views. They are already made for us. So rename them Control-click the Classes directory and select Add > New File… Choose the UIViewController subclass under the Cocoa Touch palette for iOS. You don’t need to create a separate .xibfile in this case (as we have done in the past), because the root view controller will handle the interface display. Name the file using iOS conventions (ie. WebViewController). • Repeat the same steps for the MapViewController. You should now have .h and .m files for both views in the Classes directory.

6. The ViewController .h files We now need to declare the views for the browser and the map. In the WebViewController.hfile, add this line of code into the code block that begins with @interface: @property(nonatomic,strong)IBOutletUIWebView *webView; In the MapViewController.hfile you will need to declare the window and you will also need to import the MapKit framework. The code is below: #import <UIKit/UIKit.h> #import <MapKit/MapKit.h> @interfacemapViewController : UIViewController @property(nonatomic,strong)IBOutletMKMapView*mapView; @end

7. Making connections • Save the Xcode project and return to Interface Builder. We are now ready to connect the interface to our code. • Add the icons you imported to the tab bar by selecting each icon and selecting the appropriate image from the dropdown list in the Inspector window’s Attributes tab. • You should now be able to use the tab bar to navigate between views. Select the left tab and drag out a UIWebView window from the Library to the view. It should automatically scale to fit the view. Choose “Scale Pages To Fit” from the Attributes tab of the Inspector. • Select the right tab and drag out an MKMapView window from the Library.

8. Making connections (continued) • To connect the 2 tab views to their respective class files, you’ll need to select each tab view in the Documents window. To do this the Documents window mode should be in the list view, so you can twirl down to select the subviews. Select the left tab view controller from the Document window, and in the Inspector window’s Information tab, type in the name of the class file (WebViewController). Now select the right tab view and type in its class file name (MapViewController). Save the file. • Now when you select each tab view in the Documents window you should see the outlets you created in Xcode in the Inspector window’s Connections tab. Connect the webViewoutlet to the UIWebView window, and connect the map outlet to the MKMapView window. Save the Interface Builder file and return to Xcode.

9. Finishing up Back in Xcode you will need to tell the web view which web page to load. You’ll do that using a method called viewDidLoad, which is triggered when the view loads. In the WebViewController.mfile, add this line of code just below the @implementionstatement: • (void) viewDidLoad { [webViewloadRequest:[NSURLRequestrequestWithURL: [NSURLURLWithString: @"http://www.mm.cs.sunysb.edu"]]]; } Fortunately, basic functionality of the MapKit is embedded in the framework, so you won’t need to call any methods in the MapViewController.mfile to get the map to display or to interact with it. Of course, you would probably want to incorporate location services into the map view, or markers, but that would be another demo… Select Build and Run to see your project in the Simulator. Remember you can hold down the Option key to simulate multitouch functions such as zoom.

10. Success!