Struggling with NSScrollView

Question

Created 3d

Replies 0

Boosts 0

Participants 1

I'm still discovering swift and the various frameworks. So I'm now trying to create scrolling composition with a grid - containing images - and an NSStackView at on top.

However, I'm running into a problem that might seem stupid, but when I try to wrap my NSCollectionView in another NSView and pointing the scrollView.documentView to, I can't scroll anymore... Even though it works fine when I set the scrollView.documentView to the NSCollectionView directly.

Working case:


    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView = NSScrollView(frame: .zero)
        scrollView.hasVerticalScroller = true
        scrollView.hasHorizontalScroller = false
        scrollView.scrollerStyle = .overlay
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(scrollView)
        vStack = NSStackView(frame: .zero)
        vStack.orientation = .vertical
        vStack.spacing = 12 * 2
        vStack.translatesAutoresizingMaskIntoConstraints = false
        
        let hStack = NSStackView()
        hStack.orientation = .horizontal
        hStack.spacing = 12
        hStack.translatesAutoresizingMaskIntoConstraints = false

        let label1 = NSTextField(labelWithString: "Collection")
        
        hStack.addArrangedSubview(label1)
        
        let layout = PinterestLayout()
        layout.delegate = self
        
        collectionView = NSCollectionView(frame: .zero)
        collectionView.collectionViewLayout = layout
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView
            .register(
                ArtCardCell.self,
                forItemWithIdentifier: NSUserInterfaceItemIdentifier("ArtCardCell")
            )
        collectionView.backgroundColors = [.BG]
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        
//        vStack.addArrangedSubview(hStack)
//        vStack.addArrangedSubview(collectionView)
        
        scrollView.documentView = collectionView

        NSLayoutConstraint.activate([
                   scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                   scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
                   scrollView.topAnchor.constraint(equalTo: view.topAnchor),
                   scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
                   
//                   vStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
//                   vStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
//                   vStack.topAnchor.constraint(equalTo: scrollView.topAnchor),
//                   vStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
//                   vStack.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
                   
                   collectionView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
                   
//                   vStack.arrangedSubviews[0].leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 12),
//                   vStack.arrangedSubviews[0].trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -12),
//                   vStack.arrangedSubviews[0].topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 80)
               ])
        
        collectionView.postsBoundsChangedNotifications = true
        NotificationCenter.default.addObserver(self, selector: #selector(didScroll(_:)),
                                               name: NSView.boundsDidChangeNotification,
                                               object: collectionView.enclosingScrollView?.contentView
        )
    }

collectionView   height: 3549.0
ScrollView       height: 628.0
StackView        height: --

Dysfunctional case:


    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView = NSScrollView(frame: .zero)
        scrollView.hasVerticalScroller = true
        scrollView.hasHorizontalScroller = false
        scrollView.scrollerStyle = .overlay
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(scrollView)
        vStack = NSStackView(frame: .zero)
        vStack.orientation = .vertical
        vStack.spacing = 12 * 2
        vStack.translatesAutoresizingMaskIntoConstraints = false
        
        let hStack = NSStackView()
        hStack.orientation = .horizontal
        hStack.spacing = 12
        hStack.translatesAutoresizingMaskIntoConstraints = false

        let label1 = NSTextField(labelWithString: "Collection")
        
        hStack.addArrangedSubview(label1)
        
        let layout = PinterestLayout()
        layout.delegate = self
        
        collectionView = NSCollectionView(frame: .zero)
        collectionView.collectionViewLayout = layout
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView
            .register(
                ArtCardCell.self,
                forItemWithIdentifier: NSUserInterfaceItemIdentifier("ArtCardCell")
            )
        collectionView.backgroundColors = [.BG]
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        
        vStack.addArrangedSubview(hStack)
        vStack.addArrangedSubview(collectionView)
        
        scrollView.documentView = vStack

        NSLayoutConstraint.activate([
                   scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                   scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
                   scrollView.topAnchor.constraint(equalTo: view.topAnchor),
                   scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
                   
                   vStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
                   vStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
                   vStack.topAnchor.constraint(equalTo: scrollView.topAnchor),
                   vStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
                   vStack.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
                   
                   collectionView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
                   
                   vStack.arrangedSubviews[0].leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 12),
                   vStack.arrangedSubviews[0].trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -12),
                   vStack.arrangedSubviews[0].topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 80)
               ])
    }

collectionView   height: 508.0
ScrollView       height: 628.0
StackView        height: 628.0

Boost