Landscape Orientation for Collection View in Swift

Landscape orientation for Collection View in Swift

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.

UICollectionView cell spacing for both portrait and landscape

Try this:

override func viewDidLoad() {
super.viewDidLoad()
collectionView.backgroundColor = .white
collectionView.alwaysBounceVertical = true
collectionView.contentInsetAdjustmentBehavior = .always
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
}

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

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

var spacing: CGFloat = 8

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

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

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let safeFrame = view.safeAreaLayoutGuide.layoutFrame
let size = CGSize(width: safeFrame.width, height: safeFrame.height)
return setCollectionViewItemSize(size: size)

}

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

if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
layout.invalidateLayout()
}
}

func setCollectionViewItemSize(size: CGSize) -> CGSize {
if UIApplication.shared.statusBarOrientation.isPortrait {
let width = (size.width - 1 * spacing) / 2
return CGSize(width: width, height: width)
} else {
let width = (size.width - 2 * spacing) / 3
return CGSize(width: width, height: width)
}
}

The outcome is like this:

Sample Image

How to fix item width in UIcollectionView when moving from portrait to landscape?

You can override viewWillTransition method and reload so that collectionView recalculate the size.

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

self.collectionView?.reloadData()
}

Swift: How to refresh UICollectionView layout after rotation of the device

Add this function:

override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
myCollection.collectionViewLayout.invalidateLayout()
}

When you change the orientation, this function would be called.



Related Topics



Leave a reply



Submit