iOS Development (Part 3) - Additional GUI Components


Published on

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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Understanding Map RegionsThe area of the map that is currently displayed to the user is referred to as the region. This is defined in terms of a center location (declared by longitude and latitude) and span of the surrounding area to be displayed. Adjusting the span has the effect of zooming in and out of the map relative to the specified center location. The region’s span may be specified using either distance (in meters) or coordinate based degrees. When using degrees, one degree of latitude is equivalent to 111 km. Latitude, however, varies depending on the longitudinal distance from the equator. Given this complexity, the map view tutorial in this chapter will declare the span in terms of distance.
  • This method performs some very simple operations in order to achieve the desired effect in the mapView object. Firstly, the user’s current location is ascertained by accessing the userLocation property of the map view object. This is stored in the form of an MKUserLocation object which, in turn, contains the coordinates of the user. Next, the MKCoordinateRegionMakeWithDistance function is called in order to generate an MKCoordinateRegion object consisting of the user’s location coordinates and a span that stretches 50 meters both to the North and South of the current location. Finally, this region object is passed through to the setRegion method of the mapView object.
  • The arrow pointing inwards to the left side of the view indicates that this is the initial view and will be the first view displayed when the application launches. Objects may be added to the view in the usual manner by dragging and dropping items from the Object library (View -> Utilities -> Show Object Library) onto the view canvas.
  • To establish a segue, hold down the Ctrl key on the keyboard, click over a control (in this case the button on scene 1) and drag the resulting line to the scene 2 view. Upon releasing the mouse button a menu will appear. Select the modal menu option to establish the segue.
  • All this method does is obtain a reference to the destination view controller and then assigns a string to the labelText property of the object so that it appears on the label.
  • iOS Development (Part 3) - Additional GUI Components

    1. 1. iOS Development (Part III) (Additional GUI Components) COMPILED BY: ASIM RAIS SIDDIQUI
    2. 2. Outline  Image Views  Scroll Views  Web Views  Map Views  Icons and the App Launch Image
    3. 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. 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. 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. 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.
    7. 7. 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.
    8. 8.  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
    9. 9. 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]; }
    10. 10. 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.
    11. 11. 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.
    12. 12. 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.
    13. 13. 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.
    14. 14. 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.
    15. 15. 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.
    16. 16. Configuring Storyboard Segues  a segue is the transition from one scene to another within a storyboard
    17. 17. 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.
    18. 18. 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
    19. 19. 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:
    20. 20. 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:
    21. 21. 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.
    22. 22.  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: