Semantic Zoom in iOS

One of the exiting new developer opportunities in Windows 8, is the semantic zoom UI design pattern.

As outlined in the Guidelines for Semantic Zoom,

Semantic Zoom is a touch-optimized technique used by Windows Store apps in Windows 8 for presenting and navigating large sets of related data or content within a single view …

To further borrow from the guidelines, this is what a Messages application could look like:

Now, if we were to do something similar in an iOS-app, we could do something like this:

  1. Create a UIViewController whose View is a UIScrollView.
  2. Configure the scroll view with a small zoom threshold, letting the zoom events swap views.

Not so bad, huh? Let’s start with creating a new Solution in MonoDevelop:

As stated in our checklist above, we will start out by creating a root view controller that inherits UIViewController and whose View is a UIScrollView. First up: Creating the controller:

To set the ViewController’s view to a UIScrollView, double-click on the SemanticZoomViewController.xib file it in your Solution Pad to open it in Xcode and then head over to the Identity inspector to set its class to UIScrollView:

Having done that, we can return to MonoDevelop to create our example views. We need an overview and a details view. Now, these views are to here to illustrate this example, so I won’t go into details on them (and, in all honestly, they don’t do much). Let’s start with the overview:

Add -> New File -> iPad View Controller -> OverviewViewController:

Add -> New File -> iPad View Controller -> DetailViewController:

With our SemanticZoomViewController and our two child controllers, we can start binding them together. Returning to MonoDevelop, let us open the SemanticViewController and add a few private fields:

 

Then, with our fields in place, we can do our magic in the ViewDidLoad method:

 

 

 

The code in ViewDidLoad uses a few helper methods to get its job done:

 

 

Now, to swap in the new view, we bring it to front, reset its zoom scale (since we don’t want optical zoom) and animate its opacity to get a nice fade-in effect:

 

And that, my friends, is all that is to it.

For a quick demonstration, see my Youtube clip:

[youtube=http://www.youtube.com/watch?v=5QvRaPbyH3s]

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>