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

您提到的内容可以使用流布局实现-UIKit提供的布局类。

Answer 2

您正在尝试将非正方形图像放入一个正方形孔中。当我们这样做时，必须给予一些帮助。在这种情况下，我建议您将每个单元格设置为固定高度，并在其上设置纵横比填充内容模式，以使它们完全填充单元格的框架。不利的一面是，一些较大的图像将被部分切除。另一种选择是使用宽高比适合内容模式，该模式将缩放图像以适合图像而不会丢失图像的一部分。这将使您再次具有单元格间距。