Scrollview like foursquare with maps + list

Question

I'm trying to understand how can I achieve a scrollview like Foursquare app uses. The map y position follows the revenue list when scrolling.

• UIScrollview with the map + a list of revenues as UIViews or
• UITableView using the map as HeaderSection and revenues as UITableViewCell (I tried that, but the map reloads after scrolling table) or
• Separating Map from UITableview and syncing map position with table list?

Answer 1

This looks very interesting. Create Parallax effect between UITableView & UIMapView like FourSquare. I hope it will be useful ;)

https://github.com/stefanlage/SLParallaxController

Answer 2

My 2 cents: UITableView + MKMapView. Add observer on the tableView scroll view position and change map bounds accordingly when the observer fire.

Use contentInset in the tableView to reveal the map underneath. Use section headers for the "Happening near chinatown" with transparent background

etc..

Answer 3

UIScrollview with MKMapView + UITableView.

Answer 4

After a lot of digging, To achieve this effect, you use a function called setPadding();

Android maps - Markers Bounds at the center of top half of map area