3

我有一个集合视图标题（蓝色）和单元格（红色）。我希望能够以编程方式显示/隐藏标题，但是当我以编程方式显示标题时，它会出现在单元格顶部（或使滚动视图下降一点）。我希望标题将整个滚动视图向下推，因此单击“切换标题”后我不必向上滚动。

在此处输入图像描述

我非常努力地为下面的问题重现最少的代码。请分享任何见解。

struct Section: Hashable {
    var items: [Int]
}

class ViewController: UIViewController {

    var collectionView: UICollectionView!
    var dataSource: UICollectionViewDiffableDataSource<Section, Int>?
    
    var showHeader = true
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView = UICollectionView(frame: view.frame, collectionViewLayout: createCompositionalLayout())
        collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        collectionView.backgroundColor = .systemBackground
        
        collectionView.register(CellView.self, forCellWithReuseIdentifier: "cellId")
        collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "headerId")
        
        view.addSubview(collectionView)

        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        
        createDataSource()
        addData()
    }

    func createCompositionalLayout() -> UICollectionViewLayout {
        // layout for cell
        let layout = UICollectionViewCompositionalLayout { sectionIndex, layoutEnvironment in
            let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
            let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
            layoutItem.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0)
            let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(200))
            let layoutGroup = NSCollectionLayoutGroup.vertical(layoutSize: layoutGroupSize, subitems: [layoutItem])
            let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
            return layoutSection
        }
        
        let config = UICollectionViewCompositionalLayoutConfiguration()
        
        if showHeader {
            let layoutSectionHeader = createGlobalHeader()
            config.boundarySupplementaryItems = [layoutSectionHeader]
        }
        
        layout.configuration = config
        return layout
    }
    
    func createGlobalHeader() -> NSCollectionLayoutBoundarySupplementaryItem {
        let layoutSectionHeaderSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(50))
        
        let layoutSectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: layoutSectionHeaderSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
        layoutSectionHeader.pinToVisibleBounds = true
        
        return layoutSectionHeader
    }
    
    func createDataSource() {
        dataSource = UICollectionViewDiffableDataSource<Section, Int>(collectionView: collectionView) { collectionView, indexPath, item in
            guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as? CellView else { fatalError("Unable to dequeue ") }
            cell.button.addTarget(self, action: #selector(self.onButtonClick), for: .touchUpInside)
            return cell
        }
        
        dataSource?.supplementaryViewProvider = { (collectionView, kind, indexPath) in
            guard let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headerId", for: indexPath) as? HeaderView else { return nil }
            return header
        }
    }
    
    @objc func onButtonClick() {
        print("toggle")
        showHeader.toggle()
        collectionView.collectionViewLayout = createCompositionalLayout()
        collectionView.layoutIfNeeded()
    }
    
    func addData() {
        var snapshot = NSDiffableDataSourceSnapshot<Section, Int>()
        var sections: [Section] = []
        sections.append(Section(items: [0,1,2,3,4,5,6,7,8,9,10,11,12]))
        
        snapshot.appendSections(sections)
        
        for section in sections {
            snapshot.appendItems(section.items, toSection: section)
        }
        
        dataSource?.apply(snapshot)
    }

}

class CellView: UICollectionViewCell {
    let button = UIButton()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        backgroundColor = .red
        
        addSubview(button)
        button.setTitle("Toggle header", for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.topAnchor.constraint(equalTo: topAnchor).isActive = true
        button.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class HeaderView: UICollectionReusableView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .blue
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
4

2 回答 2

0

我认为您需要在堆栈视图中嵌入集合视图和常规视图（您将用作标题），并以编程方式隐藏和显示标题视图。当标题隐藏时，这将使 collectionView 在堆栈视图中展开，反之亦然。我会完全放弃 UICollectionReusableView 标题视图。所以视图层次结构看起来像这样：

  • 堆栈视图
    • 页眉视图
    • 集合视图

我希望我解释得足够清楚。

于 2020-12-26T13:08:51.823 回答
0

If I got your question right, you can scroll the collection view to top with:

collectionView.setContentOffset(.zero, animated: false)

whenever you want to display header. It's a work around but I think it should do the trick.

于 2020-12-26T14:50:12.887 回答