试图创建一个集合视图在滚动时滑过另一个集合视图的效果

Posted 2023-03-14

【中文标题】试图创建一个集合视图在滚动时滑过另一个集合视图的效果

【英文标题】：Trying to create effect where a collection view slides over another collection view on scroll

【发布时间】：2019-02-05 04:16:51

【问题描述】：

我有两个集合视图，在我的 ViewController 中一个在另一个之上。顶部的集合视图是一个水平滚动的集合视图，而下面的集合视图是垂直滚动的。我正在尝试创建一种效果，滚动下部集合视图将使其向上移动以覆盖上部集合视图，就像一种视差效果。

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

我目前拥有的代码（或多或少）：

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

Gif example

未滚动：

轻微滚动：

更多滚动：

【问题讨论】：

对我来说，你想要完成什么并不是很清楚。可以画个图吗？

【参考方案1】：

在视图控制器中添加两个collectionview，并将contentInset.top设置为第一个colletionview的高度。和contentOffset.y 为负值contentInset.top。和override point(inside:with:) 并且仅当 y 值大于 0 时才返回 true。

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

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
    

【讨论】：

谢谢，这正是我要找的！

【参考方案2】：

将两个collection view放在一个score view中，尝试产生并行效果，就可以达到这种效果。请找到以下链接以供参考。

Source

用你的集合视图替换标题图像。