Determine size for collection view cell

Question

I am trying to resize specific cells in a collection view. Okay I'm trying to make a layout that looks like this.

The images in black should be one image. So it should be 1 big image then 2 small images. Okay so lets say I have 30 images. Now I want the cells at (0,4,6,10,12,16,18,22,24,28,30...) these are the cells I want to have a big image but having trouble. You can see it goes up 4 than up then 2 and so on. Would appreciate any Help. :)

Answer 1

I have used UICollectionViewLayout to get that design. I have changed CGRect for each cell with basic logic let perRowHeight : CGFloat = 190. In perRowHeight, three cells I have added it. Thats,One big cell and two small cells.

In your design, there six diff types are there. So I have divided indexPath.item by 6.

Coding

class ImageDesignLayout: UICollectionViewLayout {

    var CellWidth : CGFloat?
var CellHeight : CGFloat?
var cellAttrsDictionary = Dictionary<IndexPath, UICollectionViewLayoutAttributes>()
var contentSize = CGSize.zero

let perRowHeight : CGFloat = 190
var rowCountValue : Int = 0




override var collectionViewContentSize : CGSize {
    return self.contentSize
}

override func prepare() {

    var portrait_Ypos : Double = 0.0
    var xPos : Double = 0.0
    var CELL_WIDTH : Double = 0.0
    var CELL_HEIGHT : Double = 0.0
    rowCountValue = 0

    if let sectionCount = collectionView?.numberOfSections, sectionCount > 0
    {
        for section in 0...sectionCount-1
        {
            if let rowCount = collectionView?.numberOfItems(inSection: section), rowCount > 0
            {
                for item in 0...rowCount-1
                {

                    let cellIndex = IndexPath(item: item, section: 0)

                    let itemFactor = item % 6

                    print("itemFactoritemFactor   ", itemFactor)

                    switch itemFactor
                    {
                    case 0: // BIG ITEM - LEFT

                        xPos = 0
                        portrait_Ypos = Double(perRowHeight * CGFloat(rowCountValue))
                        CELL_WIDTH = Double(Int((collectionView?.frame.size.width)! * (3/4)))


                        CELL_HEIGHT = Double(perRowHeight)
                        rowCountValue = rowCountValue + 1

                        break
                    case 1:

                        xPos = Double(Int((collectionView?.frame.size.width)! * (3/4)))
                        portrait_Ypos = portrait_Ypos + 0
                        CELL_WIDTH = Double((collectionView?.frame.size.width)!) - xPos
                        CELL_HEIGHT = Double(perRowHeight / 2)


                        break
                    case 2:
                        xPos = Double(Int((collectionView?.frame.size.width)! * (3/4)))
                        portrait_Ypos = portrait_Ypos + Double(perRowHeight / 2)
                        CELL_WIDTH = Double((collectionView?.frame.size.width)!) - xPos
                        CELL_HEIGHT = Double(perRowHeight / 2)

                        break
                    case 3:

                        xPos = 0
                        portrait_Ypos = Double(perRowHeight * CGFloat(rowCountValue))
                        CELL_WIDTH = Double(Int((collectionView?.frame.size.width)! * (1/4)))
                        CELL_HEIGHT = Double(perRowHeight / 2)

                        break
                    case 4:

                        xPos = 0
                        portrait_Ypos = portrait_Ypos + Double(perRowHeight / 2)
                        CELL_WIDTH = Double(Int((collectionView?.frame.size.width)! * (1/4)))
                        CELL_HEIGHT = Double(perRowHeight / 2)

                        break
                    case 5: // BIG ITEM - Right

                        xPos = Double(Int((collectionView?.frame.size.width)! * (1/4)))
                        portrait_Ypos = Double(perRowHeight * CGFloat(rowCountValue))
                        CELL_WIDTH = Double((collectionView?.frame.size.width)!) - xPos
                        CELL_HEIGHT = Double(perRowHeight)

                        rowCountValue = rowCountValue + 1

                        break
                    default:
                        break
                    }

                    let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: cellIndex)
                    cellAttributes.frame = CGRect(x: xPos, y: portrait_Ypos, width: CELL_WIDTH, height: CELL_HEIGHT)

                    cellAttrsDictionary[cellIndex] = cellAttributes
                }
            }
        }
    }

    let contentWidth = UIScreen.main.bounds.width
    let contentHeight = CGFloat(portrait_Ypos) + CGFloat(perRowHeight)
    self.contentSize = CGSize(width: contentWidth, height: contentHeight)

    print("sPort.contentSize     ", self.contentSize)
}

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

    var attributesInRect = [UICollectionViewLayoutAttributes]()

    for cellAttributes in cellAttrsDictionary.values {
        if rect.intersects(cellAttributes.frame) {

            attributesInRect.append(cellAttributes)

        }
    }

    return attributesInRect
}

override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {

    return cellAttrsDictionary[indexPath]!

}



override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
    return true
}

}

Storyboard

Output