collectionview grid layout issue with different devices

Question

Hello i am creating App using Swift and i am creating grid view using Collectionview but i got different output on different devices here is the code for populating and setting layout of collectionview

var imageArray = [UIImage]()
var nameArray = ["General album","Videos","New album","Custom name album"]
private var numberOfItemsInRow = 2
private var minimumSpacing = 10
private var edgeInsetPadding = 10

extension GalleryViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageArray.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! GalleryCollectionViewCell
        cell.imgView.image = imageArray[indexPath.row]
        cell.lblName.text = nameArray[indexPath.row]
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let inset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        edgeInsetPadding = Int(inset.left+inset.right)
        return inset
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return CGFloat(minimumSpacing)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return CGFloat(minimumSpacing)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = (Int(UIScreen.main.bounds.size.width) - (numberOfItemsInRow - 1) * minimumSpacing - edgeInsetPadding) / numberOfItemsInRow
        return CGSize(width: width, height: width)
    }
}

from this code i am not able to achive exact grid layout so i tried below code

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let padding: CGFloat =  50
        let collectionViewSize = collectionView.frame.size.width - padding

        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
    }

I got this code from this link: Display UICollectionView with 2 columns of equal size square cells

but i am not able to achive exact grid layout its changed based on device i am sharing two screen shot

iPhone 11 Max Pro screen shot:

iPhone 7 Screen Shot:

in iphone 7 i am getting layout perfect but on iPhone 11 Max Pro i am not getting perfect any solution? than please help me

Try to be a little more clear in describing your issue. Is the problem that you have too much horizontal space between the cells? — DonMag, Jul 24 '20 at 12:56

score 1 · Accepted Answer · answered Jul 24 '20 at 17:54

Add the following code in the "viewDidLoad" method of your controller:-

    collectionView.delegate = self
    collectionView.dataSource = self
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .vertical //.horizontal
    layout.minimumLineSpacing = 10
    layout.minimumInteritemSpacing = 10
    collectionView.setCollectionViewLayout(layout, animated: true)

Add only "insetForSectionAt" and "sizeForItemAt" these methods to handle the layout of your collection View. As I have modified the delegate and data source you can directly use it.

extension GalleryViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageArray.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! GalleryCollectionViewCell
        cell.imgView.image = imageArray[indexPath.row]
        cell.lblName.text = nameArray[indexPath.row]
        return cell
    }
    
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)//here your custom value for spacing
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let lay = collectionViewLayout as! UICollectionViewFlowLayout
        let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing
        
        return CGSize(width:widthPerItem, height: widthPerItem)
    }
}

score 0 · Answer 2 · answered Jul 24 '20 at 13:03

Im assuming your issue here is that the horizontal spacing is too much in iphone 11 Pro Xmax . The reason to this is that the iphone xsMax screen is much larger than the iphone 7 Screen. Take a look at this link below it has all the IOS screen sizes and widths and pixels which may come in handy. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

As for your issue , the width of the device is different from iphone 7 to iphone 11 so the issue is you are setting the minimumSpacing ,width , height for an iphone 7 screen and you need to use constraints for the sides and use the constarints to adjust the widths , and heights and the spacing needs to be edited so that it is similar to all screens .

The chances of it coming perfectly equal in all your screens are minor but you can do much better with this approach .

collectionview grid layout issue with different devices

2 Answers2

Linked