June 16

Recreating the Parallax Menu in Aeris Pulse iOS

We’ve had several users of our Aeris Weather iOS SDK ask us about whether the parallax UITableViewCells in the map layer menu of Aeris Pulse was available as part of the SDK, or how we achieved the effect.

aerispulse-parallax-menu

 

Although this menu is not offered as part of our iOS SDK, it’s really easy to implement. There are just a few main steps you need to perform to get this effect working in your own apps. The following code samples are provided using Swift, but can easily be ported over to Objective-C if you haven’t jumped into Swift yet.

  1. Generate background images with heights larger than the expected height of your UITableViewCells within your app. An image height twice that of your cells is usually sufficient. For example, if your menu cells are configured with a rowHeight of 100pt, generate background images with a height of at least 200px. Remember you can have your UIImageView scale this image to fill its bounds as needed.
    parallax-bg-sizing
  2. Add your UITableView instance and create a custom UITableViewCell subclass, such as MenuItemTableViewCell . Make sure to also register this custom cell class with your table view instance using registerClass:forCellIdentifier: so the right cell is dequeued by the table view.
  3. Create a  ParallaxBackgroundView  class to be used as the background view of your custom table view cells. This view should just contain a single UIImageView as a subview and the necessary public method for receiving the necessary UIScrollView scrolling events to adjust the image view:
  4. Add an instance of this ParallaxBackgroundView to your custom UITableViewCell class, MenuItemTableViewCell, that will be used for the cells in your menu. Make sure this view is inserted at the bottom of the view hierarchy so all other cell content appears above it:
  5. Implement the scrollViewDidScroll:  method on your UITableView’s delegate, and call the updateParallaxForScrollView:  method for all visible cells of your table view. This is the code responsible for updating the image view’s vertical position in response to the cell’s position relative to the scroll view’s center:

And that’s it, you now have a working recreation of the Aeris Pulse map layer menu (aside from the actual images and other details)! You can download the example project and full source code for the above example, which will give you a sample menu like the following:

parallax-sample-menu


Have any questions or suggestions for future features with our Aeris Weather iOS SDK? We’re constantly working to improve our libraries you use to implement and interact with our various weather services, so feel free to contact us with your input.

 

Leave a Reply

Your email address will not be published. Required fields are marked *