如何在UICollectionView上面实现内容视图

Posted 2021-04-21

我试图让UICollectionView和它上面的UIView一起滚动。我已经完成了几个图表（滚动之前和之后）来展示我想要实现的目标。

Before scrolling

After scrolling

目前，我只能让UICollectionView在其自己的屏幕部分内滚动。我也尝试将UIView和UICollectionView包装到UIScrollView中，尽管UICollectionView没有出现在屏幕上。

实现此布局的最佳方法是什么？

答案

这是一个集合视图，其中有一个截面标题在集合视图滚动时滚动。如果你需要一个视差标题（弹性标题效果），那么有很多在线教程。

import UIKit

class Header : UICollectionReusableView {
    override init(frame: CGRect) {
        super.init(frame: frame)

        self.backgroundColor = UIColor.green
    }

    @available(ios, unavailable)
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    private var flowLayout: UICollectionViewFlowLayout!
    private var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.white

        self.flowLayout = UICollectionViewFlowLayout()
        self.flowLayout.scrollDirection = .vertical;
        self.flowLayout.minimumInteritemSpacing = 15;
        self.flowLayout.minimumLineSpacing = 15;

        self.collectionView = UICollectionView(frame: .zero, collectionViewLayout: self.flowLayout)
        self.collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "default")
        self.collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "default")
        self.collectionView.register(Header.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "header")
        self.collectionView.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 0.5)
        self.collectionView.dataSource = self
        self.collectionView.delegate = self
        self.collectionView.reloadData()

        self.view.addSubview(self.collectionView)
        self.collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.collectionView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
            self.collectionView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
            self.collectionView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            self.collectionView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }



    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "default", for: indexPath)
        cell.contentView.backgroundColor = UIColor.white
        cell.contentView.layer.borderColor = UIColor.red.cgColor
        cell.contentView.layer.borderWidth = 1.0
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

        if indexPath.section == 0 && kind == UICollectionElementKindSectionHeader {
            let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "header", for: indexPath)

            return header
        }

        return collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "default", for: indexPath)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

        if section == 0 {
            return CGSize(width: collectionView.bounds.width, height: 200.0)
        }
        return .zero
    }

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

        let layout = collectionViewLayout as! UICollectionViewFlowLayout
        let insets = self.collectionView(collectionView, layout: layout, insetForSectionAt: indexPath.section)
        var width = collectionView.bounds.width - 15.0
        width -= insets.left + insets.right

        return CGSize(width: floor(width), height: 100.0)
    }

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

        return UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0)
    }
}