Skip to content

An extension on UICollectionView which automatically transforms collection view cells to a radial path

License

Notifications You must be signed in to change notification settings

akhilcb/ACBRadialCollectionView

Repository files navigation

ACBRadialCollectionView

CocoaPods Compatible Carthage Compatible Platform License

This is an extension on UICollectionView which automatically transforms collection view cells to a radial path with minimal code. This is written in Swift language. No need to subclass UICollectionView for this. CollectionView will also display an arc shaped scroll bar next to the cells which acts similar to the normal scroll bar.

Using this approach, we can support multiple collectionviews on one screen as shown below(Note: number of sections should be 1 for all collection views). Each will have its own scrolling and scroll direction can also be changed for each of them separately.

Demo


Setup

Carthage or Cocoapods can be used to integrate this to a project.

Carthage

github "akhilcb/ACBRadialCollectionView" ~> 2.0

Cocoapods

pod 'ACBRadialCollectionView'

This can be manually integrated to the project by following the code in ACBViewController.

1. Copy all files to your Xcode project. "UICollectionView+ACBRadialCollectionView" is the extension class file.
2. Invoke the method "enableRadialLayout" on your UICollectionView with required input params.

For eg:-

let center = CGPoint(x: 50, y: 100)
let radius: CGFloat =  100
let cellSize = CGSize(width: 50, height: 50)
let startAngle =  CGFloat(0)
let endAngle = CGFloat.pi / 2
let direction = ACBRadialCollectionViewScrollDirection.clockwise

self.collectionView.enableRadialLayout(WithCenter: center, radius: radius, cellSize: cellSize, angularSpacing: 20.0, scrollDirection: direction, startAngle: startAngle, endAngle: endAngle) //repeat this for other collectionviews too

You can also control whether the cells needs to be rotated to an angle(Note: This works only if you have called enableRadialLayout before setting this, default value is true).

self.collectionView.applyRotationToCells = false

Screenshots

License

MIT License

Copyright (c) 2017, Akhil C Balan(https://github.com/akhilcb)

All rights reserved.