iOS Development (Part III)(Additional GUI Components)COMPILED BY: ASIM RAIS SIDDIQUI

Outline

Image Views

Scroll Views

Web Views

Map Views

Icons and the App Launch Image

ImageView An image view object provides a view-based container for displaying either a

single image or for animating a series of images.

//To display an image from filename:

[imgBackground setImage:[UIImage imageNamed:@"fileName.png"]];

//or

[imgBackground setImage:[UIImage imageWithContentsOfFile:imageFilename]];

//or

UIImage *imageToDisplay = ...

[imageView setImage:imageToDisplay];

//To clear the image:

[imageView setImage:nil];

ScrollView

Scroll views are found in iOS applications when content that needs to be displayed and manipulated won’t fit entirely on the screen. Scroll views have two main purposes:

To let users drag the area of the content they want to display

To let users zoom into or out of the displayed content using the pinch gestures

The following figure shows a typical use of a UIScrollView class. The subview is a UIImageView containing the image of a boy. When the user drags his or her finger on the screen, the viewport onto the image moves and, as you can see in the diagram, the scrol l indicators are shown. When the user lifts the finger, the indicators disappear.

ScrollView

The UIScrollView class provides the following functionality:

Scrolling content that will not fit entirely on the screen

Zooming content, allowing your application to support the standard pinch gestures to zoom in and out

Restricting scrolling to a single screen of content at a time (paging mode)

The UIScrollView class contains no specially defined view for the content that it displays; instead it simply scrolls its subviews. This simple model is possible because scroll views on iOS have no additional controls for initiating scrolling.

MapView/MapKit

The MapKit Framework is based on the Google Earth and Google Maps data and APIs and provides iPhone developers with a simple mechanism for integrating detailed and interactive mapping capabilities into any application.

The current location of the device may also be displayed and tracked on the map view.

The MapKit framework also includes support for adding annotations to a map. This takes the form of a pin or custom image, title and subview that may be used to mark specific locations on a map.

implement the MKMapViewDelegate protocol within our view controller class

the code will require that the <MapKit/MapKit.h>

Add mapkit framework

mapView.showsUserLocation = YES; //to show user on the scren

Changing the MapView Region

- (void)zoomIn: (id)sender

{

MKUserLocation *userLocation = mapView.userLocation;

MKCoordinateRegion region =

MKCoordinateRegionMakeWithDistance (

userLocation.location.coordinate, 50, 50);

[mapView setRegion:region animated:NO];

}

Changing the Map Type

- (void) changeMapType: (id)sender

{

if (mapView.mapType == MKMapTypeStandard)

mapView.mapType = MKMapTypeSatellite;

else

mapView.mapType = MKMapTypeStandard;

}

This very simple method simply toggles between the two map types when the button is tapped by the user.

Web Views

The UITextView and UIWebView classes both fall into this category and are designed to provide a mechanism for displaying formatted text to the user. The UIWebView class, for example, is designed to display HTML content formatted so that it appears as it would if loaded into a web browser.

Web Views

NSURL class is used to create an object which will hold the URL information.

NSURLRequest is used to create a request to the URL.

Method loadRequest of UIWebView is used to load the request in the UIWebView.

UIPickerView

The UIPickerView class implements objects, called picker views, that use a spinning-wheel or slot-machine metaphor to show one or more sets of values. Users select values by rotating the wheels so that the desired row of values aligns with a selection indicator.

The UIDatePicker class uses a custom subclass of UIPickerView to display dates and times. To see an example, tap the add (“+”) button in the the Alarm pane of the Clock application.

StoryBoarding

Storyboarding is a feature built into Xcode that allows both the various screens that comprise an iOS application and the navigation path through those screens to be visually assembled. Using the Interface Builder component of Xcode, the developer simply drags and drops view and navigation controllers onto a canvas and designs the user interface of each view in the normal manner. The developer then drags lines to link individual trigger controls (such as a button) to the corresponding view controllers that are to be displayed when the control is selected by the user.

Having designed both the screens (referred to in the context of storyboarding as scenes) and specified the transitions between scenes (referred to as segues) Xcode generates all the code necessary to implement the defined behavior in the completed application. The style of transition for each segue (page fold, cross dissolve etc) may also be defined within Interface Builder. Further, segues may also be triggered programmatically in situations where behavior cannot be defined graphically using Interface Builder.

The finished design is saved by Xcode to a storyboard file. Typically, an application will have a single storyboard file, though there is no restriction preventing the use of multiple storyboard files within a single application.

Adding Scenes to the Storyboard

To add a second scene to the storyboard, simply drag a view controller object from the Object Library panel onto the canvas.

Configuring Storyboard Segues

a segue is the transition from one scene to another within a storyboard

Configuring Storyboard Transitions

Xcode provides the option to change the visual appearance of the transition that takes place during a segue. By default a Cover Vertical transition is performed whereby the new scene slides vertically upwards from the bottom of the view to cover the currently displayed scene. To change the transition, select the corresponding segue line, display the attributes inspector (View -> Utilities -> Show Attributes Inspector) and modify the Transition setting.

Associating a View Controller with a Scene

At this point in the example we have two scenes but only one view controller (the one created by Xcode when we selected Single View Application). Clearly in order to be able to add any functionality behind scene 2 it too will need a view controller. The first step, therefore, is to add the files for a view controller to the project. Ctrl-click on the Storyboard target at the top of the project navigator panel and select New File… from the resulting menu. In the new file panel select Objective-C class and click Next to proceed. On the options screen verify that the Subclass of menu is set to UIViewController and that the Targeted for iPad and With XIB for user interface options are both deselected (since the view already exists in the storyboard there is no need for an NIB user interface file) and name the class Scene2ViewContoller

With the view controller for scene 2 selected within the storyboard canvas, display the Identity Inspector (View -> Utilities -> Identity Inspector) and change the Class from UIViewController to Scene2ViewController:

Passing Data Between Scenes

One of the most common requirements when working with storyboards involves the transfer of data from one scene to another during a segue transition. This is achieved using the prepareForSegue: method.

Before a segue is performed by the storyboard runtime environment, a call is made to the prepareForSegue: method of the current view controller. If any tasks need to be performed prior to the segue taking place simply implement this method in the current view controller and add code to perform any necessary tasks. Passed as an argument to this method is a segue object from which a reference to the destination view controller may be obtained and subsequently used to transfer data.

To see this in action, begin by selecting Scene2ViewController.h and adding a new data property:

Unwinding Storyboard Segues

The next step is to configure the button on scene 2 to return to scene 1. It might seem as though the obvious choice is to simply implement a segue from the button on scene 2 to scene 1.

Instead of returning the original instance of scene 1, however, this would create an entirely new instance of the StoryboardViewController class. If a user were to perform this transition repeatedly, therefore, the application would continue to use more memory and would eventually be terminated by the operating system.

The application should, instead, make use of the Storyboard unwind feature introduced into Xcode 4.5. This involves implementing a method in the view controller of the scene to which the user is to be returned and then connecting a segue to that method from the source view controller. This enables an unwind action to be performed across multiple levels of scene.

The next step is to establish the unwind segue. To achieve this, locate scene 2 within the storyboard canvas and ctrl-click and drag from the button to the “exit” icon in the panel located beneath the view. Release the line and select the returned: method from the resulting menu: