How to show a collectionView like facebook upload image using swift 4?

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)
}

Please check [THIS ANSWER](https://stackoverflow.com/questions/34997364/uicollectionview-bounds-width-is-always-600). There they mention why the `collectionView.bounds.width` it will always return the same number 600px. As well they give an clear example what you need to do in order to take the correct width. I hope I helped at leas a bit :) — Dimitar Georgiev, Apr 30 '18 at 11:42

score 5 · Accepted Answer · answered Apr 30 '18 at 12:24

5

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)
        }
    }

answered Apr 30 '18 at 12:24

JeeVan TiWari

325
2
15

Thanks a ton @JeeVan TiWari sir it is coming fine. – Gorib Developer Apr 30 '18 at 12:44
sir i have upload a image. can you please tell me how to show a collection view like that image. – Gorib Developer May 02 '18 at 07:43
It can be done by uicollectionviewlayout follow this link for understanding https://www.iosapptemplates.com/blog/swift-programming/flexible-cell-sizes-collection-view-layout-swift – JeeVan TiWari May 07 '18 at 09:43

score 1 · Answer 2 · answered Apr 30 '18 at 11:55

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
}

Sir i have upload a image. can you please tell me how to show a collection view like that image. — Gorib Developer, May 02 '18 at 07:43
For that you have to create a custom UICollectionViewLayout class with all of the methods that have to be overwritten...quite some work :) — Ladislav, May 02 '18 at 07:55

How to show a collectionView like facebook upload image using swift 4?

2 Answers2

Linked