-1

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

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

请看这张图片

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

2 回答 2

1

您提到的可以使用流布局来实现——UIKit 提供的布局类。

这就是您要查找的内容：

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

我希望你能花一些精力来阅读这篇非常简单的帖子，并仔细遵循每一步。

于 2018-11-20T16:33:09.473 回答
0

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

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

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

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
}
于 2018-11-20T16:19:42.370 回答