How to use collectionview flow layout to get correct view?

Question

I am using this code to get correct type but not getting the view what i want can any one tell me where am i wrong

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    screenSize = UIScreen.main.bounds
    screenWidth = screenSize.width
    screenHeight = screenSize.height
    videosCollectionView.delegate = self
    videosCollectionView.dataSource = self
}

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = videosCollectionView.dequeueReusableCell(withReuseIdentifier: "Videos", for: indexPath as IndexPath) as! VideosCollectionViewCell
    cell.mainImgVw.image = logoImage[indexPath.row]
    cell.durationLabel.text = "duration"
    cell.nameLabel.text = "Test Video"
    return cell

}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let xPadding = 10
    let spacing = 10
    let rightPadding = 10
    let width = (CGFloat(UIScreen.main.bounds.size.width) - CGFloat(xPadding + spacing + rightPadding))/2
    let height = CGFloat(215)

    return CGSize(width: width, height: height)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(10, 10, 10, 10)
}

and what i am getting

Please tell me where i am wrong. Please help me.

My storyboard is like this

From what I see, I'd tend to say that `collectionView(_ collectionView:layout:sizeForItemAt:)` returns a width too big. Try to add "-30" to it to see if at least it shows two, then recheck your calculation. — Larme, Apr 20 '18 at 08:19

Khushbu · Answer 1 · 2018-04-20T10:27:57.947

As you have told that you want to use collectionViewFlowDelegateLayout. So, you have to set all values 0 from storyboard as I have shown below.

Then you have to write this code in your viewcontroller class.

This method is used for set the cell size in collection view.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let xPadding = 10
        let spacing = 10
        let rightPadding = 10
        let width = (CGFloat(UIScreen.main.bounds.size.width) - CGFloat(xPadding + spacing + rightPadding))/2
        let height = CGFloat(215)

        return CGSize(width: width, height: height)
    }

This method is used for the margins to apply to content in the specified section.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(10, 10, 10, 10)
    }

This method is used for spacing between successive rows or columns of a section.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }

score 1 · Answer 2 · answered Apr 20 '18 at 08:29

1

Your code works fine and there isn't any problem, check Min Spacing in Size Inspector tab it should be too large, set it 10

answered Apr 20 '18 at 08:29

Arash Etemad

1,827
1
13
29

score 1 · Answer 3 · answered Apr 21 '18 at 08:23

Try this :-

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

      return CGSize(width: (self.view.frame.width - 8) / 3.0 , height: (self.view.frame.width - 8) / 3.0)
 }

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

    return UIEdgeInsetsMake(8, 8, 0, 8)
}

Hope it will help you

score 0 · Answer 4 · answered Feb 22 '21 at 19:40

Swift 5

Set your datasource and delegate for the collectionView in the Storyboard.

import UIKit

class ViewController : UIViewController {

    // MARK: - Properties -
    
    @IBOutlet var collectionView : UICollectionView?
    
    // MARK: - Lifecycle -

    override func viewDidLoad() {
        
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        collectionView?.register(UINib.init(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
        
        // collectionView flowlayout
        
        let flowLayout : UICollectionViewFlowLayout = UICollectionViewFlowLayout.init()
        flowLayout.scrollDirection = UICollectionView.ScrollDirection.vertical
        flowLayout.sectionInset = UIEdgeInsets.init(top: 0, left: 0, bottom: 0, right: 0)

        collectionView?.collectionViewLayout = flowLayout

    }
    

    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.

    }

}

extension ViewController : UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        
        return 1
        
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return 16
        
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell : CollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
        
        return cell
        
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    
        let width = collectionView.frame.size.width / 4
        
        return CGSize(width: width, height: width)
        
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
    
    // horizontal
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        
        return 0.0
        
    }
    
    // vertical
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        
        return 0.0

    }
    
}

score -1 · Answer 5 · answered Apr 20 '18 at 08:32

Declare UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout

Set min space for cell and for line from storyboard like this.

Set collectionview cell width like this,

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

    var cellWidth:CGFloat = (collectionView.frame.size.width - 20) / 2;  

    return CGSize(width: cellWidth, height: 215);
}

How to use collectionview flow layout to get correct view?

5 Answers5

Linked