UICollectionView 根据内容动态单元格高度 | Pinterest 布局

Question

我正在尝试按照 Pinterest 用于其图片库的布局进行布局。但问题是我将图像高度返回到单元格的大小，当图像具有不同的高度时，它会在单元格中留下空间。

我浏览了很多文章，但没有找到简单的解决方案。有什么简单的方法可以做到这一点吗？

Please see this image

class ViewController: UIViewController {

    @IBOutlet var collectionVIew: UICollectionView!
    var imgData = [#imageLiteral(resourceName: "p1"),#imageLiteral(resourceName: "p2"),#imageLiteral(resourceName: "p3"),#imageLiteral(resourceName: "p4"),#imageLiteral(resourceName: "p5"),#imageLiteral(resourceName: "p6"),#imageLiteral(resourceName: "p7"),#imageLiteral(resourceName: "p8"),#imageLiteral(resourceName: "p1"),#imageLiteral(resourceName: "p2"),#imageLiteral(resourceName: "p3"),#imageLiteral(resourceName: "p4"),#imageLiteral(resourceName: "p5"),#imageLiteral(resourceName: "p6"),#imageLiteral(resourceName: "p7"),#imageLiteral(resourceName: "p8"),#imageLiteral(resourceName: "p1"),#imageLiteral(resourceName: "p2"),#imageLiteral(resourceName: "p3"),#imageLiteral(resourceName: "p4"),#imageLiteral(resourceName: "p5"),#imageLiteral(resourceName: "p6"),#imageLiteral(resourceName: "p7"),#imageLiteral(resourceName: "p8"),#imageLiteral(resourceName: "p1"),#imageLiteral(resourceName: "p2"),#imageLiteral(resourceName: "p3"),#imageLiteral(resourceName: "p4"),#imageLiteral(resourceName: "p5"),#imageLiteral(resourceName: "p6"),#imageLiteral(resourceName: "p7"),#imageLiteral(resourceName: "p8")]

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.frame.size.width
        let img = imgData[indexPath.item]
        // 335 is the width of my cell image
        return CGSize(width: width/2-15, height: (img.size.height / 335) * width)
    }

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

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

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
        cell.imgView.image = imgData[indexPath.row];
        cell.imgView.contentMode = .scaleAspectFit
        return cell
    }
}

Answer 1

您正在尝试将非方形图像放入方形孔中。当我们这样做时，必须给予一些东西。在这种情况下，我建议您将每个单元格设置为固定高度，并在它们上设置纵横比填充内容模式，以便它们完全填充单元格的框架。缺点是一些较大的图像会被截掉一部分。另一种选择是使用 aspect fit content mode，它将缩放图像以适应而不会丢失图像的一部分。这会让您再次使用单元格间距。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = collectionView.frame.size.width
    return CGSize(width: width/2-15, height: 100) // fixed height
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.imgView.image = imgData[indexPath.row];
    cell.imgView.contentMode = .scaleAspectFill // Set the scale mode to aspect fill
    return cell
}

或者，您可以查看一些可能会为您实现此功能的开源库。这个看起来很有前途 https://github.com/abdullahselek/ASCollectionView

您可以在此处查看更大的集合视图开源库列表 https://github.com/vsouza/awesome-ios#collection-view

如果您希望单元格具有不同的高度，您需要根据图像的宽高比和固定的宽度计算出正确的高度。当我们的宽度固定且高度动态时，您可以通过 height/width 计算这种情况下的纵横比。然后将其乘以图像单元格的宽度以获得我们的动态单元格高度。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = collectionView.frame.size.width / 2 - 15;
    let img = imgData[indexPath.item]
    return CGSize(width: width, height: (img.size.height / img.size.width) * width)
}

在这种情况下，您应该将内容模式设置为宽高比。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.imgView.image = imgData[indexPath.row];
    cell.imgView.contentMode = .scaleAspectFit // Set the scale mode to aspect fit
    return cell
}

Answer 2

您提到的可以使用流式布局来实现 — UIKit 提供的一种布局class。

这就是您要查找的内容：

https://www.raywenderlich.com/392-uicollectionview-custom-layout-tutorial-pinterest

我希望你能花点功夫阅读这篇非常简单的文章post，并仔细阅读每一步。

UICollectionView 根据内容动态单元格高度 | Pinterest 布局

UICollectionView Dynamic Cell Height as per the content | Pinterest Layouts

pinterest

uicollectionview

swift

uicollectionviewflowlayout

swift5