Swift - How to adjust UICollectionViewCell's ratio for different IOS device sizes

Question

I'm using a CollectionView as a menu bar at the bottom of my ViewController I've created a custom class and have made 5 evenly spaced cells which fills the entire CollectionView on an iPhone 8 with the following, which is the desired result -

    layout.itemSize = CGSize(width: self.frame.width / 5, height: self.frame.height)
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 0

    self.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    self.scrollIndicatorInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    self.collectionViewLayout = layout;

However when I run the project on any iPhone with a larger screen I get the following result:

My question is, how could I scale the cells up to fit without any margins, even if it requires the CollectionView to increase it's height, I would like the images (which will be placed in the cells) to maintain their aspect ratio from the iPhone 8 screen.

Could I just increase the size of each CollectionViewCell with code? If so is there a way to do so without working out the width/height of each iPhone released to date?

Or can someone please recommend a different way to accomplish this? if I'm approaching this the wrong way.

Thanks in advance!

Answer 1

It seems that the view's width isn't correct in the place you put the line

layout.itemSize = CGSize(width: self.frame.width / 5, height: self.frame.height)

so replace it with

layout.itemSize = CGSize(width: UIScreen.main.bounds.width / 5, height: self.frame.height)

---

you can also implement

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

with conform to UICollectionViewDelegateFlowLayout

Answer 2

Here is my code for CollectionView. You can modify as per your requirement.

class HomeViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {


@IBOutlet weak var homeCollectionView: UICollectionView!


override func viewDidLoad() {
    super.viewDidLoad()

    homeCollectionView.delegate = self;
    homeCollectionView.dataSource = self;
    homeCollectionView.reloadData()
}


//MARK:- COLLECTION VIEW
func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 3
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
    if let count = myArray.count{
            return count
    }
    return 0
}

func collectionView(_ collectionView: UICollectionView,
                    viewForSupplementaryElementOfKind kind: String,
                    at indexPath: IndexPath) -> UICollectionReusableView {

    switch kind {
    case UICollectionElementKindSectionHeader:
        let headerView = homeCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HomeHeaderCell", for: indexPath) as! HomeHeaderCell
        headerView.UpdateHeaderCell(indexPath: indexPath)
        headerView.btn_SeeAll.addTarget(self, action: #selector(SeeAllDestinations), for: .touchUpInside)
        return headerView
    case UICollectionElementKindSectionFooter:
        let footerView = homeCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HomeFooterCell", for: indexPath) as! HomeFooterCell
        return footerView
    default:
        return UICollectionReusableView()
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: collectionView.frame.width, height: 80)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
    return CGSize(width: collectionView.frame.width, height: 10)
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
     let myCell:HomeTopDestinationsCell = collectionView.dequeueReusableCell(withReuseIdentifier: "HomeTopDestinationsCell", for: indexPath) as! HomeTopDestinationsCell
        myCell.backgroundColor = UIColor.colorFromCode(0xf1f1f1)
        myCell.UpdateCellValue(obj:(myArray[indexPath.row])!)
        return myCell as HomeTopDestinationsCell;
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        }

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

            if DeviceType.IS_IPAD{
            return CGSize(width: (self.view.frame.width-60)/3 , height: (self.view.frame.width-60)/3);
        }
        return CGSize(width: (self.view.frame.width-60)/2 , height: (self.view.frame.width-60)/2);
}
//Use for interspacing
func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 10.0
}

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