UICollectionViewLayout small and large cell auto layout - ios

Question

I have two cell sizes small (approx. half screen width before spacing and insets) and large (full screen width before insets), these two sizes can be seen in the following image.
I want the UICollectionView to automatically size these cell depending on a size attribute that is given. I have managed to size the cells correctly but I am having trouble getting the cells to layout correctly when there are not two small cells in sequence.
This is what happens when two small cells are in sequence in the array:
This is where this cell should go:
Here is the custom UICollectionViewLayout's prepare function that I have made:
import UIKit
protocol FlexLayoutDelegate: class {
func collectionView(_ collectionView:UICollectionView, sizeForViewAtIndexPath indexPath:IndexPath) -> Int
}
class FlexLayout: UICollectionViewLayout {
weak var delegate: FlexLayoutDelegate!
fileprivate var cellPadding: CGFloat = 10
fileprivate var cache = [UICollectionViewLayoutAttributes]()
fileprivate var contentHeight: CGFloat = 0
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() {
// Check if cache is empty
guard cache.isEmpty == true, let collectionView = collectionView else {
return
}
var yOffset = CGFloat(0)
var xOffset = CGFloat(0)
var column = 0
for item in 0 ..< collectionView.numberOfItems(inSection: 0) {
let indexPath = IndexPath(item: item, section: 0)
let viewSize: CGFloat = CGFloat(delegate.collectionView(collectionView, sizeForViewAtIndexPath: indexPath))
let height = cellPadding * 2 + 240
let width = contentWidth / viewSize
if viewSize == 2 {
xOffset = CGFloat(column) * width
} else {
xOffset = 0
}
print(width)
let frame = CGRect(x: xOffset, y: yOffset, width: width, height: height)
let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
attributes.frame = insetFrame
cache.append(attributes)
contentHeight = max(contentHeight, frame.maxY)
column = column < 1 ? column + 1 : 0
yOffset = column == 0 || getNextCellSize(currentCell: indexPath.row, collectionView: collectionView) == 1 ? yOffset + height : yOffset
}
}
func getNextCellSize(currentCell: Int, collectionView: UICollectionView) -> Int {
var nextViewSize = 0
if currentCell < (collectionView.numberOfItems(inSection: 0) - 1) {
nextViewSize = delegate.collectionView(collectionView, sizeForViewAtIndexPath: IndexPath(item: currentCell + 1, section: 0))
}
return nextViewSize
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()
// Loop through the cache and look for items in the rect
for attributes in cache {
if attributes.frame.intersects(rect) {
visibleLayoutAttributes.append(attributes)
}
}
return visibleLayoutAttributes
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return cache[indexPath.item]
}
}
Thanks

Answer 1

You need to add an Array to track your columns heigths and see what is the shortest column that is private var columsHeights : [CGFloat] = []and you need also an array of (Int,Float) tuple to keep which spaces are available to be filled, I also added a method in the delegate to get the number of columns we want in the collection View and a method to know if a cell can be added or not in a position according their size.
Then if we want to add a cell we check if can be added if not, because the first column is filled we add the space corresponding to column2 in the avaiableSpaces array and when we add the next cell first we check if can be added in any available space if can be added we add and remove the available space.
Here is the code
FlexLayoutDelegate Implementation
extension ViewController: FlexLayoutDelegate{
func collectionView(_ collectionView:UICollectionView,sizeForViewAtIndexPath indexPath:IndexPath) ->Int{
if(indexPath.row % 2 == 1)
{
return 1
}
return 2
}
func numberOfColumnsInCollectionView(collectionView:UICollectionView) ->Int{
return 2
}
}
FlexLayout
import UIKit
protocol FlexLayoutDelegate: class {
func collectionView(_ collectionView:UICollectionView, sizeForViewAtIndexPath indexPath:IndexPath) -> Int
// Returns the amount of columns that have to display at that moment
func numberOfColumnsInCollectionView(collectionView:UICollectionView) ->Int
}
class FlexLayout: UICollectionViewLayout {
weak var delegate: FlexLayoutDelegate!
fileprivate var cellPadding: CGFloat = 10
fileprivate var cache = [UICollectionViewLayoutAttributes]()
fileprivate var contentHeight: CGFloat = 0
private var columsHeights : [CGFloat] = []
private var avaiableSpaces : [(Int,CGFloat)] = []
fileprivate var contentWidth: CGFloat {
guard let collectionView = collectionView else {
return 0
}
let insets = collectionView.contentInset
return collectionView.bounds.width - (insets.left + insets.right)
}
var columnsQuantity : Int{
get{
if(self.delegate != nil)
{
return (self.delegate?.numberOfColumnsInCollectionView(collectionView: self.collectionView!))!
}
return 0
}
}
//MARK: PRIVATE METHODS
private func shortestColumnIndex() -> Int{
var retVal : Int = 0
var shortestValue = MAXFLOAT
var i = 0
for columnHeight in columsHeights {
//debugPrint("Column Height: \(columnHeight) index: \(i)")
if(Float(columnHeight) < shortestValue)
{
shortestValue = Float(columnHeight)
retVal = i
}
i += 1
}
//debugPrint("shortest Column index: \(retVal)")
return retVal
}
private func canUseDoubleColumnOnIndex(columnIndex:Int) ->Bool
{
var retVal = false
if(columnIndex < self.columnsQuantity-1)
{
let firstColumnHeight = columsHeights[columnIndex]
let secondColumnHeight = columsHeights[columnIndex + 1]
//debugPrint(firstColumnHeight - secondColumnHeight)
retVal = firstColumnHeight == secondColumnHeight
}
return retVal
}
override var collectionViewContentSize: CGSize {
return CGSize(width: contentWidth, height: contentHeight)
}
override func prepare() {
// Check if cache is empty
guard cache.isEmpty == true, let collectionView = collectionView else {
return
}
// Set all column heights to 0
self.columsHeights = []
for _ in 0..<self.columnsQuantity {
self.columsHeights.append(0)
}
var xOffset = CGFloat(0)
var column = 0
for item in 0 ..< collectionView.numberOfItems(inSection: 0) {
let indexPath = IndexPath(item: item, section: 0)
let viewSize: CGFloat = CGFloat(delegate.collectionView(collectionView, sizeForViewAtIndexPath: indexPath))
let height = cellPadding * 2 + 240
let width = contentWidth / viewSize
if viewSize == 2 {
xOffset = CGFloat(column) * width
} else {
xOffset = 0
}
var columIndex = self.shortestColumnIndex()
var yOffset = self.columsHeights[columIndex]
if(viewSize == 1){//Double Cell
if(self.canUseDoubleColumnOnIndex(columnIndex: columIndex)){
// Set column height
self.columsHeights[columIndex] = CGFloat(yOffset) + height
self.columsHeights[columIndex + 1] = CGFloat(yOffset) + height
}else{
self.avaiableSpaces.append((columIndex,yOffset))
// Set column height
yOffset += height
xOffset = 0
columIndex = 0
self.columsHeights[columIndex] = CGFloat(yOffset) + height
self.columsHeights[columIndex + 1] = CGFloat(yOffset) + height
}
}else{
//if there is not avaiable space
if(self.avaiableSpaces.count == 0)
{
// Set column height
self.columsHeights[columIndex] = CGFloat(yOffset) + height
}else{//if there is some avaiable space
yOffset = self.avaiableSpaces.first!.1
xOffset = CGFloat(self.avaiableSpaces.first!.0) * width
self.avaiableSpaces.remove(at: 0)
}
}
print(width)
let frame = CGRect(x: xOffset, y: yOffset, width: width, height: height)
let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
attributes.frame = insetFrame
cache.append(attributes)
contentHeight = max(contentHeight, frame.maxY)
column = column < 1 ? column + 1 : 0
yOffset = column == 0 || getNextCellSize(currentCell: indexPath.row, collectionView: collectionView) == 1 ? yOffset + height : yOffset
}
}
func getNextCellSize(currentCell: Int, collectionView: UICollectionView) -> Int {
var nextViewSize = 0
if currentCell < (collectionView.numberOfItems(inSection: 0) - 1) {
nextViewSize = delegate.collectionView(collectionView, sizeForViewAtIndexPath: IndexPath(item: currentCell + 1, section: 0))
}
return nextViewSize
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()
// Loop through the cache and look for items in the rect
for attributes in cache {
if attributes.frame.intersects(rect) {
visibleLayoutAttributes.append(attributes)
}
}
return visibleLayoutAttributes
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return cache[indexPath.item]
}
}
Result