Swift: collectionView cell

Question

I create collectionView And I have 3 cells. I want to that my cells look like this for all screens in all device:

But I have this result for iPad.

How to fix it?

Update

I add collectionView in UIViewController. I have this constraints for collectionView:

Sizing my cells:

code:

func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 4
    }

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

        return 3
    }

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let itemsPerRow: CGFloat = 3
    let itemWidth = (collectionView.bounds.width / itemsPerRow)
    let itemHeight = itemWidth * 1.5
    return CGSize(width: itemWidth, height: itemHeight)
}

Please add information regarding the constraints you have set and how you are sizing your cells — Paulw11, Jul 01 '18 at 09:31
You will need to implement the `UICollectionViewDelegateFlowLayout` function to calculate the cellsize correctly with reference to the width of the collection view bounds — Paulw11, Jul 01 '18 at 10:50
You have an adaptive `CollectionView`, but the cells are **not** adaptive as you set them a value. You need to use a function to resize the cells in comparison to the width & height of the safe area. — George, Jul 01 '18 at 10:56
@Paulw11 I update question and add `UICollectionViewDelegateFlowLayout ` in code. And on iPhone 8 everything works fine. But what code. But not on another devices. What I should fix in my code? — , Jul 01 '18 at 12:24
@George_E_2 I update question and add UICollectionViewDelegateFlowLayout in code. And on iPhone 8 everything works fine. What code I should write to support another device? — , Jul 01 '18 at 12:25
Don't return a fixed size. Divide the collectionview.bounds.size.width by 3 to get the width of your cell. Determine the height based on the aspect ratio you want to the width. You will also need to allow for space between cells — Paulw11, Jul 01 '18 at 12:27
@111 I haven't done anything before using collection views, but what you need to do is instead of `return CGSize(width: 182, height: 275)` you need to do something like: `return CGSize(width: self.view.frame.width / 3, height: self.view.frame.height)`. Then you can create an offset to have a gap in-between. — George, Jul 01 '18 at 12:35
@George_E_2 updated question. How to change spacing between cells? — , Jul 01 '18 at 12:52
@Paulw11 I updated question. How to create similar spacing between cells(10 for example) and similar spacing from the edges (30 for example) ? — , Jul 01 '18 at 12:54
Just do the math to return the right cell width and the flow layout will do the rest for the space between cells. For the space to the edges, just constrain the collection view accordingly. — Paulw11, Jul 01 '18 at 13:33
@Paulw11 I have code like in question. But my cells look differently on different screen(hiding behind the screen). I don't understand anything. Could you show code example and answer on the question, please? — , Jul 01 '18 at 17:24
@Paulw11 Could you please help me? https://stackoverflow.com/questions/51184906/swift-safe-area-on-iphone?noredirect=1#comment89355302_51184906 — , Jul 05 '18 at 08:51

score 0 · Accepted Answer · answered Jul 01 '18 at 21:27

0

You need to change the cell size adaptively, otherwise the size will not work for all screen sizes.

You have your function, where you return the cell size:

return CGSize(width: 182, height: 275)

Instead, make it adaptive like this:

return CGSize(width: self.view.frame.width / 3, height: self.view.frame.height)

Or, to have the gap in-between, create an offset:

let offset = 10

let width = self.view.frame.width - offset * 4 // 4 gaps
let height = self.view.frame.height - offset * 2 // 2 gaps

return CGSize(width: width / 3, height: height) // Divide into equally-sized cells

Of course, the self.view can be replaced with any container you want the cells to fit in.

answered Jul 01 '18 at 21:27

George

25,988
10
79
133

Thanks! It is works! But I have one question. I have `collectionView` in full screen. And `View` in full screen. I want to create in `View` three `imageView` with size and x, y coordinates like in three cells. How to do it? – Jul 02 '18 at 13:18
To create it using `imageView`'s, I suggest you just use constraints – George Jul 02 '18 at 14:53
This code works for all screens except iPhone X. On iPhone X collectionView is beyond my screen. How to fix it? – Jul 03 '18 at 14:00
@111 Make sure to use a "safe area" not just to "view". A safe area is where there is nothing obstructing the view (e.g. time bar or notch for iPhone X). For more information, there will be plenty on Apple Docs or Stack Overflow. – George Jul 03 '18 at 18:25
Could you please help me? https://stackoverflow.com/questions/51184906/swift-safe-area-on-iphone?noredirect=1#comment89355302_51184906 – Jul 05 '18 at 08:39
@111 I saw that question when you posted it, but it's hard for other people to tell you what constraints to use. Just watch a tutorial on constraints, so you can do it all yourself – George Jul 05 '18 at 20:10

Swift: collectionView cell

1 Answers1