Kodeco Forums

UICollectionView Custom Layout Tutorial: A Spinning Wheel

In this UICollectionView custom layout tutorial, you'll learn how create a spinning navigation layout, including managing view rotation and scrolling.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/1702-uicollectionview-custom-layout-tutorial-a-spinning-wheel

Can anyone explain me in detail how to calculate angle,angleAtExtreme, and anchorPointX in detail.? I want to know the math behind it .

I have to replace the following line:
extension CollectionViewController: UICollectionViewDataSource {
to
extension CollectionViewController {

or else the compiler will complain that
error: redundant conformance of ā€˜CollectionViewControllerā€™ to protocol ā€˜UICollectionViewDataSourceā€™

I use XCode 7.3.1

Inspired by the tutorial, iā€™ve created an Circular collection view that can handle any number of cells. It is highly configurable. Find the github project at GitHub - DoddaSrinivasan/DSCircularCollectionView: UICollectionView Circular Layout

angleAtExtreme:
(before spinning)
theAngleOfTheLastItem1 = 0 + collectionView.numberOfItemsInSection(0) * anglePerItem
(after spinning to right)
theAngleOfTheLastItem2 = 0

so the angleAtExtreme =0 -theAngleOfTheLastItem1 = - collectionView.numberOfItemsInSection(0) * anglePerItem


items in collection spin within a scope of angle (angleAtExtreme,0),they spin by the contentOffSet.x,contentOffSet.x is within a scope of (0,contentSize.width - collectionView.bounds.size.width)


anchorPoint for the center of the layer is (0.5,0.5),so the 0.5 means the middle

Hello.
I need help. I convert this code to swift 3, but it dosenĀ“t work.
For this line of code i donĀ“t have a other solution.

let attributes = CircularCollectionViewLayoutAttributes(forCellWithIndexPath: NSIndexPath(forItem: i, inSection: 0))

How to do this in portrait mode?

Someone who knows how to center the entire array? So that the center item shows up first. Iā€™m trying to use collectionView.scrollToItem but with no success. It crashes in layoutAttributesForItem with ā€œout of rangeā€ -exceptionā€¦

I found out the answer myself. I had to set the contentView.offset.x to whatever value is corresponding to the item I want to view, like so:
if !is_init {
is_init = true
collectionView!.contentOffset.x = CGFloat(itemWidth*index-someOffset)
}

@rounak Could you please elaborate how this center is calculated in CircularCollectionViewCell.swift

self.center.y += (circularlayoutAttributes.anchorPoint.y - 0.5) * CGRectGetHeight(self.bounds)

Iā€™m using swift 3.0. But, the uicollectionView is not scrolling.
Do you have any idea why would this happen?

There is a mistake here

var angle: CGFloat {
return angleAtExtreme * collectionView!.contentOffset.x / (collectionViewContentSize().width -
CGRectGetWidth(collectionView!.bounds))
}

Replace CGRectGetWidth(collectionView!.bounds) with itemSize.width

else youā€™ll receive error in angles calculation. it will be small and almost invisible for the eye. But it will be there. Spend about 3 hours figuring it out. I have collection view with 200 elements and was working with content offset to scroll to proper element. With your code positioning wasnā€™t precise until i made the improvements above.

Anyway thank you for this tutorial. It helps a lot.

1 Like

Unfortunately this example project no longer works. I wanted to test run the project to get an overview of functionality before diving into the tut but Swift 3 conversion failed and there were a number of other errors.

I solved all of the errors and warnings and the app runs to simulator but it will never display the actual collectionview. I added print statements to ā€œnumberOfItemsā€ and ā€œcellForItemā€ and it never calls ā€œcellForItemā€ function, while it does call ā€œnumberOfItemsā€. Any ideas here? Anyone else able to download and get this working?

Thanks,

Dan

Such a great tutorial! Thank you very mach, Rounak Jain!

This tutorial is more than six months old, so questions regarding it are no longer supported for the moment. We will update it as soon as possible. Thank you! :]