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

Posted 2023-03-14

【中文标题】如何在 UICollectionView 之上实现内容视图

【英文标题】：How to implement content view above UICollectionView

【发布时间】：2018-01-01 15:36:31

【问题描述】：

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

Before scrolling

After scrolling

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

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

【问题讨论】：

向我们展示您当前如何显示此视图的代码。这是 UIScrollView 的子视图还是 UIScrollView 上的兄弟？

@f-brown ：你的意思是collectionView在向上滚动时会滚动到下面的绿色视图上？？就这些？？

@SandeepBhandari 感谢您查看 :) 我的意思是绿色视图和集合视图在向下/向上拖动时应该向上滚动相同数量的像素。

@GrzegorzKrukowski 嗨 :) 我目前在 UIViewController 中实现了一个绿色视图作为 UIView 和它下面的 UICollectionView - 非常简单。我现在正在尝试使 UIView 和 UICollectionView 一起滚动，您如何建议从高级别执行此操作？

@f-brown ：为什么不将绿色视图作为另一个单元格或部分标题添加到collectionView，这样当您向上/向下滚动视图时，滚动量将与ollectionView 相同。想一想

【参考方案1】：

这是一个集合视图，其中包含在集合视图滚动时滚动的部分标题。如果您需要视差标题（弹性标题效果），那么网上有大量的教程..

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)