CollectionView Different sizes without any library - ios

Question

I'm trying to design a collection view, which layout changes as shown in attached image. Please help if anyone has idea about this design.
Thanks in advance
I need that type of layout for collection view without any library

Answer 1

You need to Create subclass of UICollectionViewLayout and need
override prepare method.
Calculate Frame of UICollectionViewLayoutAttributes and store it in
Cache dictionary.
implement layoutAttributesForElements and layoutAttributesForItem
methods using cache dictionary
Here is code Please check :
import UIKit
class MJCollectionLayout: UICollectionViewLayout {
fileprivate var cache = [IndexPath: UICollectionViewLayoutAttributes]()
fileprivate var cellPadding: CGFloat = 1
fileprivate var contentHeight: CGFloat = 0
var oldBound: CGRect!
fileprivate var contentWidth: CGFloat {
guard let collectionView = collectionView else {
return 0
}
let insets = collectionView.contentInset
return collectionView.bounds.width - (insets.left + insets.right)
}
override var collectionViewContentSize: CGSize {
return CGSize(width: contentWidth, height: contentHeight)
}
override func prepare() {
super.prepare()
contentHeight = 0
cache.removeAll(keepingCapacity: true)
guard cache.isEmpty == true, let collectionView = collectionView else {
return
}
if collectionView.numberOfSections == 0 {
return
}
oldBound = self.collectionView?.bounds
for item in 0 ..< collectionView.numberOfItems(inSection: 0) {
let indexPath = IndexPath(item: item, section: 0)
let cellSize = self.getCellSize(index: item)
let origin = self.getOrigin(index: item)
let frame = CGRect(origin: origin, size: cellSize)
let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
attributes.frame = insetFrame
cache[indexPath] = (attributes)
contentHeight = max(contentHeight, frame.maxY)
}
}
func getCellSize(index: Int) -> CGSize {
let col = index % 6
let width = contentWidth / 2.0
if col == 2 {
return CGSize.init(width: 2 * width, height: width)
}
if col == 4 {
return CGSize.init(width: width, height: 2 * width)
}
return CGSize.init(width: width, height: width)
}
func getOrigin(index: Int) -> CGPoint {
let col = index % 6
let multiplayer = index / 6
let width = contentWidth / 2.0
var y: CGFloat = 0.0
var x: CGFloat = 0.0
if col == 0 || col == 1 {
y = CGFloat(multiplayer) * (8.0 * width) + 0
}
if col == 2 {
y = CGFloat(multiplayer) * (8.0 * width) + width
}
if col == 3 || col == 4 {
y = CGFloat(multiplayer) * (8.0 * width) + (2.0 * width)
}
if col == 5 {
y = CGFloat(multiplayer) * (8.0 * width) + (3.0 * width)
}
if col == 0 || col == 2 || col == 3 || col == 5 {
x = 0.0
}
if col == 1 || col == 4 {
x = width
}
return CGPoint(x: x, y: y)
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()
// Loop through the cache and look for items in the rect
visibleLayoutAttributes = cache.values.filter({ (attributes) -> Bool in
return attributes.frame.intersects(rect)
})
print(visibleLayoutAttributes)
return visibleLayoutAttributes
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
// print(cache[indexPath.item])
return cache[indexPath]
}
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
if newBounds.width != oldBound?.width {
return true
}
return false
}
}