Show 3 images on 1st row and 3 images on second row on collectionview

Question

I dragged a collectionview on to my xib, set the constraints as leading,trailing,top and height.

The coding part is given as...

 override func viewDidLoad() {
    super.viewDidLoad()
           let layout = UICollectionViewFlowLayout()
    layout.minimumLineSpacing = 5
    layout.minimumInteritemSpacing = 5

    collectionview2.delegate = self
    collectionview2.dataSource = self
    collectionview2.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "ident")

    }
  }


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


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



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

}

This is the link I have referred. But it is not working and I'm seeing just 5 equal width and height cells one after the other.

What am I doing wrong...?

EDIT 1: I would also like to show one long cell on left and 2 small cells on right like so...

What changes do I make to my answer so that I can achieve this...?

Ahemadabbas Vagh · Accepted Answer · 2019-05-08T10:25:31.707

1

Your code looks perfect but you may forgot to confirm the FlowLayout Protocol. so, you just need to confirm the below protocol in your code,

UICollectionViewDelegateFlowLayout

Hope this way may help you.

edited May 08 '19 at 10:25

answered May 08 '19 at 09:59

Ahemadabbas Vagh

492
3
15

confirming to the delegate made it work @Ahemadabbas Vagh...one more concern..how do I show one long cell on left and 2 small cells on right ..? I have edited the question with a pic.. – May 08 '19 at 10:26
we can do it by changing the flow layout for more info refer below link, https://stackoverflow.com/questions/29498172/custom-layout-for-collection-view-in-swift – Ahemadabbas Vagh May 09 '19 at 06:21

score 0 · Answer 2 · answered May 08 '19 at 10:00

You've to try this

Confirm UICollectionViewDelegateFlowLayout

e.g.

class yourViewController: UIViewController,UICollectionViewDelegateFlowLayout

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let screeSize = UIScreen.main.bounds
        let numOfCell:Int = 3 //Number of items you want
        let spaceOfCell:CGFloat = (CGFloat((numOfCell + 1)*10)) //Space between Cells

        return CGSize(width: Int(screeSize.width - spaceOfCell) / numOfCell, height: Int(screeSize.width - spaceOfCell) / numOfCell)

    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10.00
        //Verticle space between line
    }

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10.00 //Space Between Items You want
    }

Hope it helps :)

Show 3 images on 1st row and 3 images on second row on collectionview

2 Answers2