ios - 关于自动布局

Question

因为我已经为 Collection View 提供了自动布局，但在纵向中它很好:

问题在于，随着景观的发展，细胞之间的差距正在扩大。如何避免这种情况？

---

import UIKit

class ViewController: UIViewController,UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout{
    @IBOutlet weak var collectionView: UICollectionView!
    var images = ["apple","banana","cherry","grapes","kiwifruit","mangoes","orange","papaya","passionfruit","peaches","pineapple","strawberry","sugarapple","watermelon"]

    override func viewDidLoad() {
        super.viewDidLoad()
        NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged(notification:)), name: Notification.Name.UIDeviceOrientationDidChange, object: nil)
        collectionView.dataSource = self
        collectionView.delegate = self

    }
    func orientationChanged(notification: Notification) {
        collectionView.collectionViewLayout.invalidateLayout()
    }
        func numberOfSections(in collectionView: UICollectionView) -> Int {
            return 1
        }

        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return images.count
        }

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "stridentifier",for:indexPath) as! FruitsCollectionViewCell


            cell.image.image = UIImage(named: images[indexPath.row])
            cell.nameLabel.text = images[indexPath.row]

            return cell
        }
    class SampleCollectionViewFlowLayout: UICollectionViewFlowLayout {
        override init() {
            super.init()
            setUpLayout()
        }

        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
            setUpLayout()
        }

        override var itemSize: CGSize {
            set {}
            get {
                let itemWidth = ((self.collectionView?.bounds.width)! / 3.0) - self.minimumLineSpacing - minimumInteritemSpacing
                return CGSize(width: itemWidth, height: itemWidth)
            }
        }

        func setUpLayout() {
            minimumInteritemSpacing = 0
            minimumLineSpacing = 1.0
            scrollDirection = .vertical
        }

        override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
            return true 
        }
    }
}

Answer 1

如果你有 UICollectionViewFlowLayout 的子类，你需要覆盖 itemSize 并设置 minimumInteritemSpacing，minimumLineSpacing 一旦你完成了当你需要的方向改变时告诉 Collection View 使用重置布局collectionView.collectionViewLayout.invalidateLayout()
如果你还没有子类化它，你需要重写

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

每当设备旋转时调用collectionView.collectionViewLayout.invalidateLayout()
您必须添加设备旋转通知。

这是一个 3 列的示例 UICollectionViewFlowLayout

class SampleCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override init() {
        super.init()
        setUpLayout()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUpLayout()
    }

    override var itemSize: CGSize {
        set {}
        get {
             // 2 columns in portrait and 3 in landscape
          if UIApplication.shared.statusBarOrientation.isPortrait {
           let itemWidth = ((self.collectionView?.bounds.width)! / 2.0) - self.minimumLineSpacing - minimumInteritemSpacing
           return CGSize(width: itemWidth, height: itemWidth)
         }
          let itemWidth = ((self.collectionView?.bounds.width)! / 3.0) - self.minimumLineSpacing - minimumInteritemSpacing
            return CGSize(width: itemWidth, height: itemWidth)
        }
    }

    func setUpLayout() {
        minimumInteritemSpacing = 0
        minimumLineSpacing = 1.0
        scrollDirection = .vertical
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true 
    }
}

在viewDidLoad中添加这一行

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged(notification:)), name: Notification.Name.UIDeviceOrientationDidChange, object: nil)

并添加函数

func orientationChanged(notification: Notification) {
  collectionView.collectionViewLayout.invalidateLayout()
}

此外，如果您使用的是 customLayout，则需要转到 xib->选择 collectionView->attributes inspector(第 4 个选项)-> 点击 Layout 并选择 Custom 并将子类 UICollectionViewLayout 类的名称(SampleCollectionViewFlowLayout)放入我们的案例。

在 Storyboard/xib 文件中选择 UICollectionView 后，您需要在此处设置 UICollectionViewFlowLayout 类