I'm trying to achieve this UICollectionView layout

Question

This is what i have achieved till now in my UICollectionView

This is my UICollectionViewDelegate function

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

    if indexPath.item % 2 == 0{

        return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5)

    }else{

        return CGSize(width: collectionView.bounds.size.width/2.0, height: 97)

    }
}

What i am looking for is this pattern...

Or at least if indexPath.item % 2 == 0 then create one cell layout else 2 cells layout.

My scroll direction is only vertical

Plus this is the view i get when i remove the UICollectionViewDelegateFlowLayout function.

2 cells in each row. This is what i need but with different widths for each row like the target layout.

This is my storyboard prototype cell

"Or at least if indexPath.item % 2 == 0 then create one cell layout else 2 cells layout." no. The "target" screenshot doesn't show this. It's more like: `let w; let rest = indexPath.item%5 swith rest {case 0: w = allwidth; case 1: w = allWidth*1/4; case 2: w = allWidth*3/4, case (3,4): w = allWidth*1/2}` — Larme, Jan 18 '18 at 21:50
@Larme yes i understand but the issue is not in the cell sizing with me more than that they are always one cell in each row with different widths. Like the screen shot that i added. As you can see the target is one cell then twoo cells in a row then 2 cells in a row then 1 cell again etc.. — Kegham K., Jan 19 '18 at 16:56
How are supposed to fit in your sample? it won't. Because if first is whole width, then second is half, then third is whole. But second and third, or first and second won't fit in a "single line". Maybe %3 = 0: Whole width, else width/2. Is that what you meant? — Larme, Jan 19 '18 at 17:07
@Larme the idea when i remove the code i added in the collectionViewLayout i get ordinary 2 same size cells beside each other when i add this code or your algorithm yes i get different sized cells but only 1 cell in a row. — Kegham K., Jan 19 '18 at 17:09
Could you give a really schema of the layout you want ? A drawing, a ASCI Art. Because it's unclear between your code, your phrases and the image you gave. — Larme, Jan 19 '18 at 17:11
I don't see exactly why this is a collection view. Seems to me it's just a table view. That way you take total charge of the width of the rounded rectangles. However, it's easy to set the size of individual cells in a collection view, so even if you use a collection view it's hard to understand _what problem_ you are actually having. What's the hard part here? — matt, Jan 19 '18 at 17:28
@matt yes think there is something i don't get here seems like i don't need to use this layout function to change the cell width only :/// ...No sorry i need to change the layout to for each row. — Kegham K., Jan 19 '18 at 17:33

score 1 · Answer 1 · answered Jan 19 '18 at 17:46

You're on the right track, but your logic is crazy:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if indexPath.item % 2 == 0{
        return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5)
    }else{
        return CGSize(width: collectionView.bounds.size.width/2.0, height: 97)
    }
}

In order to fit two cells into a row, you'd need both cells to be equal to or less than the total width of the row, that is, less than collectionView.bounds.size.width/2.0. But in your code, the width of the cell is always collectionView.bounds.size.width/2.0 or larger. A moment's thought will reveal that there is absolutely no way to put multiple items into a row under those circumstances.

To put it another way: you've shown your output layout (what the collection view actually looks like), and you've shown your implementation of sizeForItemAt, and the former is exactly what I'd expect given the latter, so it's hard to see what the problem is. The collection view is doing just what you are telling it to do, to the best of its ability.

YESSSSSS.... true i did it it worked i will add an answer now with the updated code thanks. — Kegham K., Jan 19 '18 at 17:56

Kegham K. · Answer 2 · 2018-01-19T18:55:03.247

Thanks to matt & Larme i understood what was wrong in my logic and this is how i resolved my issue.

        let width = collectionView.bounds.size.width / 1.01  //THANKS TO MATT

        //THANKS TO LARME
        let x = indexPath.item % 5
        switch x {
        case 0:
            return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5)
        case 1:
            return CGSize(width: width * 1/4, height: 97)
        case 2:
            return CGSize(width: width * 3/4, height: 97)
        case 3,4:
            return CGSize(width: width * 1/2, height: 97)
        default:
            return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5)

        }

I'm trying to achieve this UICollectionView layout

2 Answers2