Writing Circular Collection View

The Problem ?

Well, I needed a collection view along with titles that move in sync. There are a lot of libraries present for solving this use case. But the tricky part here is that I wanted the above in a circular/cyclic fashion. There are some library present for that too, but they were not able to solve my use case.

What to do now ?

The only option left for me was to write one of my own. So I wrote it :).

Solving the problem

Well the basic trick to be used to create a circular collection view is to create 2 fake objects. The first fake item goes on the first index of original array and the second one goes in the last index. The first fake object is the same as the last object of the original array. The second fake object is the first object of the original array.

The main idea here is to move to the first fake object when you reach the end of the original array and move to the last fake object when you reach the first object of original array. The above happens without any animation for a smooth cyclic experience.

The second main part is to create a title scroll view that should move in sync with bottom collection view. Well this part was pretty easy. You just have to set the scroll views content offset in sync with the collection view. You can easily do that in scrollViewDidScroll: method provided by UIScrollView’s API.

Result

Example of Circular Collection View

I was able to create such a view. The best part is you get the result shown in the gif with just 5 minutes of integration.

You just have to give an array of titles you want to show and an array of view controllers corresponding to those titles and Voila! you have a cyclic collection view ready for you to use.

Want to know more?

You can check out the library on Github. The first version is also available on Cocoapods.

https://github.com/jaichaudhry/CircularCollectionView

Like what you read? Give Jai Chaudhry a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.