How to get Apple Cover Flow effect in an iOS app

Recently, for our flagship app Monster Math, I was on a hunt to find a control that gives me the Apple Cover Flow like effect.  After evaluating a few options I ended up using the awesome iCarousel control.

Its extremely customisable, lightweight, has numerous hooks and many many predefined effects, its simply awesome!  In this post, we will see how easy it is to get the iCarousel integrated into our app.

How Do They Do It!

To get this control up and running follow these simple steps

Installation

The installation is stock standard, you can install it via Cocoapods.  Use the following line in your pod file

and then run

Usage

• There are two protocols that need to be implemented for the iCarousel to work correctly.  iCarouselDataSource and iCarouselDelegate
• The iCarouselDataSource protocol has two mandatory methods to be implemented 
• (NSInteger)numberOfItemsInCarousel: This method returns the number of items in the carousel 
• (UIView *)carousel:viewForItemAtIndex:reusingView: This method returns the view that needs to be shown in the carousel.
• The iCarouselDelegate protocol has no mandatory methods but its good to implement the following method
• (CGFloat)carousel:valueForOption:withDefault: This method can return values for different options which alter the display and behaviour of the carousel.

Thats about all the methods we will need to implement to get the cool Apple Cover Flow effect.  Lets jump into the code to see the details of implementation

In this snippet we are just initialising the iCarousel and setting the type of carousel to iCarouselTypeCoverFlow2, this type's behaviour closely mimics the App Cover Flow effect.

Next up are the protocol methods that we described earlier.

This snippet implements the two mandatory methods of iCarouselDataSource protocol.  For the view we are showing a simple image from our assets.  And we have total 4 items in our carousel.

The last and final method just customises two options of the iCarousel.  It basically wraps the view so that we get an infinite view sort of a feeling and adjusts the spacing between the views a bit.

With all the pieces in place lets fire it off and see how it looks!

An Infinite Cover Flow Effect

An Infinite Cover Flow Effect

Pretty impressive for such little code, won't you agree?  

That's all folks, until we meet again, Guten Tag!