Fix celllayout: More dynamic cellsizes

We define an overall number of items based on the width.
We also have independent edgespacing and interitempadding which is by default 20

Sources/MediaCategories/MediaCategoryViewController.swift

@@ -155,7 +155,9 @@ class VLCMediaCategoryViewController: UICollectionViewController, UICollectionVi
     // MARK: Renderer
 
     override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
+        super.viewWillTransition(to: size, with: coordinator)
         collectionView?.collectionViewLayout.invalidateLayout()
+        cachedCellSize = .zero
     }
 
     // MARK: - Edit
@@ -242,21 +244,25 @@ class VLCMediaCategoryViewController: UICollectionViewController, UICollectionVi
 extension VLCMediaCategoryViewController {
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
         if cachedCellSize == .zero {
-            cachedCellSize = model.cellType.cellSizeForWidth(collectionView.frame.size.width)
+            if #available(iOS 11.0, *) {
+                cachedCellSize = model.cellType.cellSizeForWidth(collectionView.safeAreaLayoutGuide.layoutFrame.width)
+            } else {
+                cachedCellSize = model.cellType.cellSizeForWidth(collectionView.frame.size.width)
+            }
         }
         return cachedCellSize
     }
 
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
-        return UIEdgeInsets(top: model.cellType.cellPadding, left: model.cellType.cellPadding, bottom: model.cellType.cellPadding, right: model.cellType.cellPadding)
+        return UIEdgeInsets(top: model.cellType.edgePadding, left: model.cellType.edgePadding, bottom: model.cellType.edgePadding, right: model.cellType.edgePadding)
     }
 
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
-        return model.cellType.cellPadding
+        return model.cellType.edgePadding
     }
 
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
-        return model.cellType.cellPadding
+        return model.cellType.interItemPadding
     }
 
     override func handleSort() {

Sources/MediaCategoryCells/ArtistCollectionViewCell.swift

@@ -16,9 +16,6 @@ class ArtistCollectionViewCell: BaseCollectionViewCell {
 
     @IBOutlet weak var thumbnailView: UIImageView!
     @IBOutlet weak var titleLabel: UILabel!
-    override class var cellPadding: CGFloat {
-        return 5.0
-    }
 
     override var media: VLCMLObject? {
         didSet {
@@ -49,13 +46,25 @@ class ArtistCollectionViewCell: BaseCollectionViewCell {
     }
 
     override class func cellSizeForWidth(_ width: CGFloat) -> CGSize {
-        let numberOfCells: CGFloat = round(width / 320)
+        let numberOfCells: CGFloat
+        if width <= DeviceWidth.iPhonePortrait.rawValue {
+            numberOfCells = 1
+        } else if width <= DeviceWidth.iPhoneLandscape.rawValue {
+            numberOfCells = 2
+        } else if width <= DeviceWidth.iPadLandscape.rawValue {
+            numberOfCells = 3
+        } else {
+            numberOfCells = 4
+        }
+
+        // We have the number of cells and we always have numberofCells + 1 interItemPadding spaces.
+        //
+        // edgePadding-interItemPadding-[Cell]-interItemPadding-[Cell]-interItemPadding-edgePadding
+        //
 
-        // We have the number of cells and we always have numberofCells + 1 padding spaces. -pad-[Cell]-pad-[Cell]-pad-
-        // we then have the entire padding, we divide the entire padding by the number of Cells to know how much needs to be substracted from ech cell
-        // since this might be an uneven number we ceil
-        var cellWidth = width / numberOfCells
-        cellWidth = cellWidth - ceil(((numberOfCells + 1) * cellPadding) / numberOfCells)
+        let overallWidth = width - (2 * edgePadding)
+        let overallCellWidthWithoutPadding = overallWidth - (numberOfCells + 1) * interItemPadding
+        let cellWidth = floor(overallCellWidthWithoutPadding / numberOfCells)
 
         return CGSize(width: cellWidth, height: 80)
     }

Sources/MediaCategoryCells/AudioCollectionViewCell.swift

@@ -18,9 +18,6 @@ class AudioCollectionViewCell: BaseCollectionViewCell {
     @IBOutlet weak var titleLabel: UILabel!
     @IBOutlet weak var descriptionLabel: UILabel!
     @IBOutlet weak var newLabel: UILabel!
-    override class var cellPadding: CGFloat {
-        return 5.0
-    }
 
     override var media: VLCMLObject? {
         didSet {
@@ -64,13 +61,25 @@ class AudioCollectionViewCell: BaseCollectionViewCell {
     }
 
     override class func cellSizeForWidth(_ width: CGFloat) -> CGSize {
-        let numberOfCells: CGFloat = round(width / 320)
+        let numberOfCells: CGFloat
+        if width <= DeviceWidth.iPhonePortrait.rawValue {
+            numberOfCells = 1
+        } else if width <= DeviceWidth.iPhoneLandscape.rawValue {
+            numberOfCells = 2
+        } else if width <= DeviceWidth.iPadLandscape.rawValue {
+            numberOfCells = 3
+        } else {
+            numberOfCells = 4
+        }
+
+        // We have the number of cells and we always have numberofCells + 1 interItemPadding spaces.
+        //
+        // edgePadding-interItemPadding-[Cell]-interItemPadding-[Cell]-interItemPadding-edgePadding
+        //
 
-        // We have the number of cells and we always have numberofCells + 1 padding spaces. -pad-[Cell]-pad-[Cell]-pad-
-        // we then have the entire padding, we divide the entire padding by the number of Cells to know how much needs to be substracted from ech cell
-        // since this might be an uneven number we ceil
-        var cellWidth = width / numberOfCells
-        cellWidth = cellWidth - ceil(((numberOfCells + 1) * cellPadding) / numberOfCells)
+        let overallWidth = width - (2 * edgePadding)
+        let overallCellWidthWithoutPadding = overallWidth - (numberOfCells + 1) * interItemPadding
+        let cellWidth = floor(overallCellWidthWithoutPadding / numberOfCells)
 
         return CGSize(width: cellWidth, height: 80)
     }

Sources/MediaCategoryCells/BaseCollectionViewCell.swift

@@ -28,7 +28,17 @@ class BaseCollectionViewCell: UICollectionViewCell {
         return CGSize.zero
     }
 
-    class var cellPadding: CGFloat {
-        return 0
+    class var edgePadding: CGFloat {
+        return 15
     }
+
+    class var interItemPadding: CGFloat {
+        return 5
+    }
+}
+
+enum DeviceWidth: CGFloat {
+    case iPhonePortrait = 414
+    case iPhoneLandscape = 896
+    case iPadLandscape = 1024
 }

Sources/MediaCategoryCells/MovieCollectionViewCell.swift

@@ -21,8 +21,11 @@ class MovieCollectionViewCell: BaseCollectionViewCell {
     @IBOutlet weak var progressView: UIProgressView!
     @IBOutlet weak var collectionOverlay: UIView!
     @IBOutlet weak var numberOfTracks: UILabel!
-    override class var cellPadding: CGFloat {
-        return 5.0
+    override class var edgePadding: CGFloat {
+        return 12.5
+    }
+    override class var interItemPadding: CGFloat {
+        return 7.5
     }
 
     override var media: VLCMLObject? {
@@ -71,14 +74,26 @@ class MovieCollectionViewCell: BaseCollectionViewCell {
     }
 
     override class func cellSizeForWidth(_ width: CGFloat) -> CGSize {
-        let numberOfCells: CGFloat = round(width / 250)
+        let numberOfCells: CGFloat
+        if width <= DeviceWidth.iPhonePortrait.rawValue {
+            numberOfCells = 2
+        } else if width <= DeviceWidth.iPhoneLandscape.rawValue {
+            numberOfCells = 3
+        } else if width <= DeviceWidth.iPadLandscape.rawValue {
+            numberOfCells = 4
+        } else {
+            numberOfCells = 5
+        }
         let aspectRatio: CGFloat = 10.0 / 16.0
 
-        // We have the number of cells and we always have numberofCells + 1 padding spaces. -pad-[Cell]-pad-[Cell]-pad-
-        // we then have the entire padding, we divide the entire padding by the number of Cells to know how much needs to be substracted from ech cell
-        // since this might be an uneven number we ceil
-        var cellWidth = width / numberOfCells
-        cellWidth = cellWidth - ceil(((numberOfCells + 1) * cellPadding) / numberOfCells)
+        // We have the number of cells and we always have numberofCells + 1 interItemPadding spaces.
+        //
+        // edgePadding-interItemPadding-[Cell]-interItemPadding-[Cell]-interItemPadding-edgePadding
+        //
+
+        let overallWidth = width - (2 * edgePadding)
+        let overallCellWidthWithoutPadding = overallWidth - (numberOfCells + 1) * interItemPadding
+        let cellWidth = floor(overallCellWidthWithoutPadding / numberOfCells)
 
         // 3*20 for the labels + 24 for 3*8 which is the padding
         return CGSize(width: cellWidth, height: cellWidth * aspectRatio + 3*20+24)