How to show a collectionView like facebook upload

Question

Hello i want to show the collectionView exactly as the above image. I know that it responsible for UICollectionViewFlowLayout, but unable to do it. Help is much appreciated. Here is my code

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
     let yourWidth = (collectionView.bounds.width - 4) / 3.0
     let yourHeight = yourWidth
     return CGSize(width: yourWidth, height: yourHeight)
}

Answer 1

Your answer is in your question bro some short of conditions

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        switch indexPath.item {
        case 0,1:
            return CGSize(width: (UIScreen.main.bounds.width - 16) / 2, height: (UIScreen.main.bounds.width - 16) / 2)
        default:
            return CGSize(width: (UIScreen.main.bounds.width - 32) / 3, height:  (UIScreen.main.bounds.width) / 3)
        }
    }

Answer 2

If this is what you are looking for than it is pretty easy to do with UICollectionViewFlowLayout

I am using cells to be 1:1 ratio, so same width and height, you can play around with padding and item spacing and such to get desired effects.

Your controller has to conform to UICollectionViewDelegateFlowLayout protocol

In my test app I did the following:

override func viewDidLoad() {
    let layout = UICollectionViewFlowLayout()
    layout.minimumLineSpacing = 5
    layout.minimumInteritemSpacing = 5
    let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "ident")

    view.addSubview(collectionView)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let item = indexPath.item
    let width = collectionView.bounds.size.width
    let padding:CGFloat = 5
    if item < 2 {
        let itemWidth:CGFloat = (width - padding) / 2.0
        return CGSize(width: itemWidth, height: itemWidth)
    } else {
        let itemWidth:CGFloat = (width - 2 * padding) / 3.0
        return CGSize(width: itemWidth, height: itemWidth)
    }
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 5
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ident", for: indexPath)
    cell.backgroundColor = .red
    return cell
}