swift | uicollectionview

Swift UICollectionView Snake (🐍) or ZigZag (⦚) View

by Nikhil GohilAugust 14, 2019 Β· 2 min read Β· Last Updated:

UICollectionView is a most robust component in iOS development, we can create many views and structure taking support from Layout.

You can have a look at the youtube or github.

This project is made for learning purpose, how by using custom UICollectionViewFlowLayout we can achieve a cells arrangement in reverse order for consecutive rows.

Note: You can use this kind layout to showcase career path, tracking, etc.

If you look at the subclass of UICollectionViewFlowLayout, there are three functions need to be added.

Layout functions

  1. func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?
  2. func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
  3. func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool
1class VerticalScrollFlowLayout: UICollectionViewFlowLayout {
2 var collectionViewWidth : CGFloat?
3 override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
4 let currentItemAttributes : UICollectionViewLayoutAttributes = super.layoutAttributesForItem(at: indexPath)!
5 let width : CGFloat = self.collectionViewWidth ?? 300
6 var frame : CGRect = currentItemAttributes.frame;
7 let column : Double = Double(indexPath.item/3)
8 if (column.remainder(dividingBy: 2) == 0) {
9 frame.origin.x = width - (frame.size.width+frame.origin.x)
10 }
11 currentItemAttributes.frame = frame;
12 return currentItemAttributes;
13 }
14
15 override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
16 let originalAttributes =
17 super.layoutAttributesForElements(in: rect)
18 var updatedAttributes : [UICollectionViewLayoutAttributes] = originalAttributes!
19 for attributes in originalAttributes! {
20 if !(attributes.representedElementKind != nil) {
21 let index = updatedAttributes.firstIndex(of: attributes)
22 updatedAttributes[index!] = self.layoutAttributesForItem(at: attributes.indexPath)!
23 }
24 }
25 return updatedAttributes;
26 }
27
28 override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
29 return true
30 }
31}

Once you are ready with the layout you can use it by assigning it to collectionViewLayout property of UICollectionView

1let flowLayout = VerticalScrollFlowLayout()
2flowLayout.minimumLineSpacing = 1
3flowLayout.minimumInteritemSpacing = 1
4flowLayout.collectionViewWidth = self.view.frame.size.width
5flowLayout.scrollDirection = .vertical
6flowLayout.itemSize = CGSize(width: (self.view.frame.size.width/3)-1, height: 99)
7self.collectionView.collectionViewLayout = flowLayout

As you can see, by changing the values of itemSize, minimumInteritemSpacing and collectionViewWidth this collectionview layout can be use in many ways.

If you want to have detail docuemntation on UICollectionView and it’s layout then I must recommend the additional resources below.

Additional Resources

Nikhil Gohil

Written by Nikhil Gohil
More than 500+ problems solved | Technology & programming based solutions, topics and blog πŸ‘¨πŸ»β€πŸ’»
Buy me a coffee β˜•

Was this article helpful?

Your opinion matters

Please share your thought about this article

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub