Image Views Scroll Views Web Views Map Views Icons and the App Launch Image UIPickerView StoryBoarding Segues Transitions Unwind Storyboard Segues

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

2. Outline
 Image Views
 Scroll Views
 Web Views
 Map Views
 Icons and the App Launch Image

3. 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];

4. 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

5.  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.

6. 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.

8. 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.

9.  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

10. 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];
}

11. 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.

12. 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.

13. 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.

14. 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.

15. 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.

17. 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.

18. Configuring Storyboard Segues
 a segue is the transition from one scene to another within a storyboard

19. 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.

20. 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

21. 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:

22. 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:

24. 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.

25.  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: