Landscape orientation for Collection View in Swift

Question

I am encountering a problem on landscape orientation for my collection view cell. When the app is in portrait it gives me the correct number of cell per row which is 2. But when I rotate my app to landscape it display 1 cell per row. Here's the screen of what I got:

Portrait:

Landscape:

Here's my code for adding the size of the cell:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

        var screenSize = CGFloat()
        if UIDevice.currentDevice().orientation.isLandscape.boolValue {
            screenSize = UIScreen.mainScreen().bounds.size.width
        }
        else {
            screenSize = UIScreen.mainScreen().bounds.size.width
        }

        let cellWidth = screenSize / 2.0

        return CGSizeMake(cellWidth, cellWidth)
    }

Answer 1

Here is what you can do

let orientation = UIApplication.sharedApplication().statusBarOrientation
if(orientation == .LandscapeLeft || orientation == .LandscapeRight)
{
    return CGSizeMake((yourCollectionView.frame.size.width-10)/2, (yourCollectionView.frame.size.height-10)/2)
}
else{
    return CGSizeMake((yourCollectionView.frame.size.width-5)/2, (yourCollectionView.frame.size.height-10)/3)
}

What this code achieves:- If your view is in portrait you will see 2 column and 3 row and if your view is in landscape you will see 3 columns and 2 row. The deduction you see in the code is the spacing between two consecutive cells. So if there is 3 column the deduction is 15 and if there is 2 column the deduction is 10 assuming that the spacing between two cell is 5. Same goes for the row.

You can use the screen size as well if you want but I had auto layout constraints in my collection view to match the size of the screen so it resulted the same. I hope this is what you were looking for.

Answer 2

Just reload your UICollectionView in

override

func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)

        yourCollectionView.reloadData()
    }

and your collection view layout will refresh again when orientation changed

Update: This is code snippet for collectionView layout making 4 image view in each row from my code, and its working even it changing orientation from portrait to landscape and vice versa. You can change it to your need:

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: UIScreen.main.bounds.width / 4.8, height: UIScreen.main.bounds.width / 4.8)
}

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

    return UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
}

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

    return 0.0
}

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

    return 16.0
}

Hope it will helps you.

Cheers!

Answer 3

Swift 5

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    var flag:CGSize? = nil
    if UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiom.pad
    {
        if UIApplication.shared.statusBarOrientation.isPortrait{

            let cellWidth = floor((collectionView.bounds.width - 5) / 2)
            flag = CGSize(width: cellWidth, height: cellWidth)
        }

        else if UIApplication.shared.statusBarOrientation.isLandscape{

            let cellwidth = floor((collectionView.bounds.width - 5) / 4)
            flag =  CGSize(width: cellwidth, height: cellwidth)

        }

    }
    else if UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiom.phone{

        if UIApplication.shared.statusBarOrientation.isLandscape {
          let cellWidth = floor((collectionView.bounds.width - 5) / 2)
            flag = CGSize(width: cellWidth, height: cellWidth)
        } else if UIApplication.shared.statusBarOrientation.isPortrait{
            //  let cellWidth = floor((collectionView.bounds.width - 5))
            flag = CGSize(width: 402 , height: 185)
        }

    }

    return flag!
}

Answer 4

Swift 4.2

let orientation = UIApplication.shared.statusBarOrientation
    if(orientation == .landscapeLeft || orientation == .landscapeRight) {
        return CGSize(width: (collectionView.frame.size.width-10)/2, height: (collectionView.frame.size.height-10)/2)
    }
    else {
        return CGSize(width: (collectionView.frame.size.width-5)/2, height: (collectionView.frame.size.height-10)/3)
    }

Answer 5

don't reload your collection view just invalidate your collection view flowlayour Done

if you don't understand what is that means just copy and paste this code and change your collection view name

override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews()

fiveCellCustomCollectionView is my custom view and customCollectionView is collection view

  guard let flowLayout = fiveCellCustomCollectionView.customCollectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
  flowLayout.invalidateLayout()
}