Search code examples
iphoneiosxcodexcode4ios4

Navigating view using swipe


I am making a weather app with left, right gesture controls. Meaning a user could have multiple cities whose weather they want to check by swiping left/right on the screen. See screenshots of a sample app that I would like to mimic behavior of.

enter image description here

enter image description here

I have two questions.

  1. How in the world are they showing the transition between two views in the second screenshot? I tried to replicate the same behavior in Xcode - storyboard. I created two view controllers, one with red background and other with green. I dragged and dropped swipe gesture recognizers on the red one and related the gesture to view controller to the other one using Modal. But only default transitions I see are flip horizontal/vertical, cross dissolve, partial curl. Nothing like what they have going on. So how are they doing that? Changing to Push doesn't do anything.

  2. If I use storyboard then I am limiting the cities user can enter. Meaning if I have two view controllers then view controller 1 will show weather for city 1, view controller 2 will show weather for city 2. Basically swipes are limited to how many controllers I have defined. (one for each city). Is there a way I can make this dynamic? Users can have N-number of cities and N-number of swipes. Similar behavior to weather app that comes built in with every iPhone.


Solution

  • If you are letting the user enter their own cities, you should only create one UIViewControllerthat handles a single city. Then you just need to create a UIScrollView with paging enabled (here's a tutorial) and then hide the page scroll indicator like Solar does. Create several instances of you UIViewController and add their views to your UIScrollView.

    Solar fades in the view of the controller that is becoming visible while fading out the one that is being hidden. This is done using the UIScrollViewDelegate methods, that allow you to know when the scroll view is being dragged.