ios - 尝试创建一个 Collection View 在滚动时滑过另一个 Collection View 的效果

Question

我有两个 Collection View ，在我的 ViewController 中一个位于另一个之上。顶部的 Collection View 是水平滚动的 Collection View ，而下方的 Collection View 是垂直滚动的。我正在尝试创建一种效果，滚动下方的 Collection View 会导致它向上移动以覆盖上方的 Collection View ，就像一种视差效果。

我设法通过将两个 View 固定到屏幕顶部并在滚动时修改下部 Collection View 的内容插图来获得效果，但这种方法意味着我无法与上部 Collection View 交互，即使它是暴露的。我正在寻找对此方法的修改或新方法，这将使我能够保留这种效果并与上层 Collection View 进行交互。关于如何解决这个问题的任何建议？谢谢。

我目前的代码(或多或少):

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    scrollView.contentInset.top = max(0, min(tendToSoon.frame.height, -scrollView.contentOffset.y))
}

Gif example

未滚动:

轻微滚动:

更多滚动:

Answer 1

在 View Controller 中添加两个 Collection View 并将 contentInset.top 设置为第一个 Collection View 的高度。并且 contentOffset.y 减去 contentInset.top 的值。并且 override point(inside:with:) 并且仅当 y 值大于 0 时才返回 true。

确保第二个 Collection View 的背景颜色清晰。

class ViewController: UIViewController {

    let topCollectionTitle = UILabel()
    let topCollectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewLayout())
    let bottomCollectionView = BottomCollectionView(frame: .zero, collectionViewLayout: UICollectionViewLayout())

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = .white

        topCollectionTitle.textAlignment = .center
        topCollectionTitle.text = "Top Collectionview"
        topCollectionTitle.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(topCollectionTitle)

        let topLayout = UICollectionViewFlowLayout()
        topLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        topLayout.itemSize = CGSize(width: self.view.bounds.width / 5, height: 150)
        topLayout.scrollDirection = .horizontal
        topLayout.minimumLineSpacing = 0
        topLayout.minimumInteritemSpacing = 0
        topCollectionView.contentInsetAdjustmentBehavior = .never
        topCollectionView.collectionViewLayout = topLayout
        topCollectionView.backgroundColor = .white
        topCollectionView.register(CellHeader.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "CellHeader")

        topCollectionView.register(ImgCell.self, forCellWithReuseIdentifier: "ImgCell")
        topCollectionView.delegate = self
        topCollectionView.dataSource = self
        topCollectionView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(topCollectionView)

        let bottomLayout = UICollectionViewFlowLayout()
        bottomLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        bottomLayout.itemSize = CGSize(width: self.view.bounds.width / 2, height: 150)
        bottomLayout.scrollDirection = .vertical
        bottomLayout.minimumLineSpacing = 0
        bottomLayout.minimumInteritemSpacing = 0
        bottomLayout.headerReferenceSize = CGSize(width: 50, height: 50)
        bottomCollectionView.collectionViewLayout = bottomLayout
        bottomCollectionView.backgroundColor = .clear
        bottomCollectionView.register(CellHeader.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "CellHeader")
        bottomCollectionView.register(ImgCell.self, forCellWithReuseIdentifier: "ImgCell")
        bottomCollectionView.delegate = self
        bottomCollectionView.dataSource = self
        bottomCollectionView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(bottomCollectionView)

        bottomCollectionView.contentInset.top = 200
        bottomCollectionView.contentOffset.y = -200

        topCollectionTitle.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true

        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[topCollectionView]|", options: [], metrics: nil, views: ["topCollectionView":topCollectionView]))
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[topCollectionTitle(30)][topCollectionView(200)]", options: [], metrics: nil, views: ["topCollectionView":topCollectionView,"topCollectionTitle":topCollectionTitle]))
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(10)-[topCollectionTitle]|", options: [], metrics: nil, views: ["topCollectionTitle":topCollectionTitle]))
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[bottomCollectionView]|", options: [], metrics: nil, views: ["bottomCollectionView":bottomCollectionView]))
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[bottomCollectionView]|", options: [], metrics: nil, views: ["bottomCollectionView":bottomCollectionView]))

    }
}
extension ViewController: UICollectionViewDelegate {

}
extension ViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 25
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImgCell", for: indexPath) as? ImgCell ?? ImgCell()
        cell.imgView.backgroundColor = .red
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == UICollectionView.elementKindSectionHeader {
            let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "CellHeader", for: indexPath) as? CellHeader
            if collectionView == bottomCollectionView {
                header?.titleLbl.text = "Bottom CollectionView"
            }
            return header!
        }
        return UICollectionReusableView()
    }
}

class ImgCell: UICollectionViewCell {

    let imgView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupViews()
    }
    func setupViews() {
        backgroundColor = .white

        imgView.layer.cornerRadius = 5.0
        imgView.layer.masksToBounds = true
        imgView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(imgView)
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(5)-[imgView]-(5)-|", options: [], metrics: nil, views: ["imgView":imgView]))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(5)-[imgView]-(5)-|", options: [], metrics: nil, views: ["imgView":imgView]))
    }
}
class CellHeader: UICollectionReusableView {

    let titleLbl = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupViews()
    }
    func setupViews() {
        backgroundColor = .white

        titleLbl.textAlignment = .center
        titleLbl.translatesAutoresizingMaskIntoConstraints = false
        addSubview(titleLbl)

        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[titleLbl]|", options: [], metrics: nil, views: ["titleLbl":titleLbl]))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[titleLbl]|", options: [], metrics: nil, views: ["titleLbl":titleLbl]))
    }
}
class BottomCollectionView:UICollectionView {
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        return point.y > 0
    }
}