UICollectionView纵向和横向单元格的间距

Question

我的目标是在纵向和横向方向的单元格之间保持相等的间距。我能够以纵向显示，但不能以横向显示。我想通过拉伸图像的宽度和高度来缩小横向的差距。

我希望每行2个单元用于纵向视图，每行3个单元用于横向视图。

我的代码如下：

override func viewDidLoad() {
    super.viewDidLoad()

    if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
        let itemsPerRow: CGFloat = 2
        let padding: CGFloat = 5
        let totalPadding = padding * (itemsPerRow - 1)
        let individualPadding = totalPadding / itemsPerRow
        let width = (collectionView?.frame.width)! / itemsPerRow - individualPadding
        let height = width
        flowLayout.itemSize = CGSize(width: width, height: height)
        flowLayout.minimumInteritemSpacing = padding
        flowLayout.minimumLineSpacing = padding
    }
}

Answer 1

尝试一下：

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)
    }
}

结果是这样的：

Answer 2

尝试一下

确认UICollectionViewDelegateFlowLayout

例如

class yourViewController: UIViewController,UICollectionViewDelegateFlowLayout

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let screeSize = UIScreen.main.bounds
        let numOfCell:Int = 2 //Number of items you want
        let spaceOfCell:CGFloat = (CGFloat((numOfCell + 1)*10)) //Space between Cells

let orientation = UIApplication.sharedApplication().statusBarOrientation
    if(orientation == .LandscapeLeft || orientation == .LandscapeRight)
    {
       return CGSize(width: Int(screeSize.width - (spaceOfCell/2)) / (numOfCell + 1), height: Int(screeSize.width - spaceOfCell) / numOfCell+1)  

    }
    else
    {
       return CGSize(width: Int(screeSize.width - (spaceOfCell)) / numOfCell, height: Int(screeSize.width - spaceOfCell) / numOfCell)

    }

}

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10.00
        //Verticle space between line
    }

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10.00 //Space Between Items You want
    }

Answer 3

事不宜迟...

private var numberOfCellsPerRow: Int {
    return (UIApplication.shared.statusBarOrientation == .portrait) ? 2 : 3
}

private let spacing: CGFloat = 20

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

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    return collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
}

override func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    cell.backgroundColor = .orange
}

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

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

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

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let availableWidth = collectionView.frame.width - CGFloat(numberOfCellsPerRow - 1) * spacing
    let cellWidth = availableWidth / CGFloat(numberOfCellsPerRow)
    return .init(width: cellWidth, height: cellWidth)
}

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