Assignment 6

Due Date

Monday, November 2nd — 11:59pm

Background

This project is designed to give you some hands on experience with…

  • Using Xcode & Interface Builder
  • Declaring and wiring outlets and actions
  • Testing applications in the iPhone Simulator
  • Utilizing MapKit to display maps
  • Using delegation to customize app behavior

Task

For this assignment you will be writing an app that allows a user to take a tour of several pre-defined locations on a Map. Your application needn’t look identical to the one shown in the description, but must it contain the following elements…

  • A toolbar where the user can select which type of map they want to see — standard map, satellite, or a hybrid
  • A large map view that will contain pins for each pre-defined location that will display an annotation (with disclosure arrow) for the current pin that allows the user to get additional information
  • A second toolbar that contains several buttons…
    • A locate button that shows the user’s current location on the map
    • Previous and next buttons that allow the user to visit the previous/next site

Additionally, your application must also include a flip-side view that presents more detailed information for a given location…

  • The name of the location
  • An image associated the location
  • A multi-line description
  • A button to return to the map

Main App Behavior

When your app initially loads it should look similar to the screen shown below. When the app is launched all locations should be drawn on the map with pins.

If it is the first time that the user has ever launched the app, it should automatically select the first location from a list of locations, zoom in on it and display its annotation. If the user had previously launched the app then the map view, selected map style and show location status should be restored as well as opening the annotation of the last location selected by the previous/next buttons.

Initial Screen

Initial Screen

The application must support allowing the user to switch between the 3 various map types. Below shows the resulting screen after the user presses the satellite segment.

Satellite View

Satellite View

If the user presses the disclosure arrow on an annotation, it should trigger a flip-style animation to a view that shows details about the location that was selected. Below, we see this animation mid-flip.

Animating to the Flip-Side

Animating to the Flip-Side

The flip-side view must neatly present the title of the location and associated image. Additionally, the description associated with the location is shown in a multi-line text view that allows the user to scroll. This back-side view should also contain a button to return back to the front-size of the application. None of the fields on the flip-side should be editable by the user. When the user presses the button to return back to the map the view should animate (flip) back to the front.

Location Details on the Flip-Side

Location Details on the Flip-Side

If the user presses the previous or next buttons they should be displayed the previous/next location in the list. These navigation buttons should act in such a way that they wrap around. When navigating in either direction, the new location should be centered on the map and its annotation should be automatically opened. Below we see the result of the user pressing the next button.

Navigating to the Next Location

Navigating to the Next Location

If the user presses the show location button (bottom left of the screen shot below), then the users location should be shown on the map as illustrated below. You shouldn’t recenter the map, but just show the user’s location. Note that this button acts much like a toggle button — when the user presses the button it should appear on until they press it again to turn it off (similar to the the Maps app).

Showing Location

Showing Location

The user should be able to pan and zoom with the map. Below is an example of pinching to zoom out.

Zoomed Out

Zoomed Out

Persisting Data

For this assignment, you need to persist and restore the following 4 pieces of data between app launches…

  1. The map style selected — when the app exits the current map style should be saved and when the app starts back up both the map and control should be put back as the user left them.
  2. The current location — the last location that the user had opened using the navigation buttons should be remembered, such that if the user clicks next, the pick up where they left off.
  3. The map region — the last view that the user had should be restored when re-opening
  4. Show location state — if the user had their location shown on the map when exiting, it should be restored and put back on upon restart.

Provided Resources

For this assignment I’ve provided a zip file that contains the following:

  • A sample locations.plist data file
  • 5 photos (JPGs) that are referenced in the data file
  • The icons (PNGs) that I used for displaying the location, previous and next

The plist data file describes the various locations. The plist is structured as an array of dictionaries, where each dictionary represents a specific location. Each location contains the following 5 keys/values…

  • title — the name of the location (a string)
  • description — the description of the location (a string)
  • image — the name of an image file that should be displayed for the location (a string)
  • latitude — the latitude of the location (a number/real)
  • longitude — the longitude of the location (a number/real)

Hints

As usual, the first thing I’d probably do is to print out images of the font and flip-side screens and identify outlets, ivars, action methods, etc. Next, I’d probably recommend building the font-side part of the app and get that working. Then add in the annotations and the flip-side view. Lastly, I’d add in the ability to save and restore the required preferences.

You might be tempted to use a utility app for this project, though that’s not what I did. I stuck with a view-based app and built out a second view controller and then programmatically displayed the second view.

Poke around UIBarButtonItem to figure out how to get a highlighted button style when the show location button is pressed (as shown in the example above). You’ll find something that gives you that highlighted (and regular) look.

Your best reference for MapKit is probably the MapKit Framework Reference API docs.

Additional Ideas

The following items are provided as thoughts as to how you might extend or improve the project beyond the basic requirements. You are not required to implement any of these.

  • Create different lists of locations and provide a UI to let the user choose which one(s) to view
  • Try out alternate color combinations — just don’t make my eyes bleed
  • Feel free to play with the layout and style of elements — just be sure that things are neatly aligned and that there is at least some justifiable method to your madness
  • Add your own images

Grading

Your projects will be graded on the following criteria:

  • Correctness of application
  • Appearance of application
  • Adherence to Objective-C and iPhone coding conventions
  • Neatly formatted and indented code
  • Well documented header files
  • Absence of significant performance issues
  • Absence of memory leaks

Submission

Like the previous assignment, you are required to submit a zip file of your project directory. Be sure to manually remove the build directory before zipping things up.

To submit the assignment, open up a terminal, navigate to your zip file then issue the command:

submit cs491i assignment6 Assignment6.zip

If developing on your own Mac, you’ll need to transfer the file into your GL account (via SCP), then SSH into GL and issue the submit command.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: