Create NSScrollView Programmatically in an NSView - Cocoa

Kevin picture Kevin · Apr 4, 2012 · Viewed 9.6k times · Source

I have an NSView class which takes care of a Custom View created in the nib file.

Now I want to add an NSScrollView to the custom view, but I need to do it programmatically and not using Interface Builder (Embed Into Scroll View).

I have found this code:

NSView *windowContentView = [mainWindow contentView];
NSRect windowContentBounds = [windowContentView bounds];
scrollView = [[NSScrollView alloc] init];
[scrollView setBorderType:NSNoBorder];
[scrollView setHasVerticalScroller:YES];
[scrollView setBounds: windowContentBounds];
[windowContentView addSubview:scrollView];

Assuming I declare as IBOutlets the variables 'mainWindow' and 'scrollView' above, how would I go about connecting them to the proper components in Interface Builder? Does it make any sense to do it this way?

Or is there a better way to add a scroll view programmatically?

P.S. I cannot connect them in the usual way because I cannot create an NSObject Object from Interface Builder, or use the File Owner..

Answer

brianLikeApple picture brianLikeApple · Sep 26, 2017

I have a difficult to create NSScrollView with AutoLayout programmatically, but finally got it work. This is Swift version.

    // Initial scrollview
    let scrollView = NSScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.borderType = .noBorder
    scrollView.backgroundColor = NSColor.gray
    scrollView.hasVerticalScroller = true

    window.contentView?.addSubview(scrollView)
    window.contentView?.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[scrollView]|", options: [], metrics: nil, views: ["scrollView": scrollView]))
    window.contentView?.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[scrollView]|", options: [], metrics: nil, views: ["scrollView": scrollView]))

    // Initial clip view
    let clipView = NSClipView()
    clipView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.contentView = clipView
    scrollView.addConstraint(NSLayoutConstraint(item: clipView, attribute: .left, relatedBy: .equal, toItem: scrollView, attribute: .left, multiplier: 1.0, constant: 0))
    scrollView.addConstraint(NSLayoutConstraint(item: clipView, attribute: .top, relatedBy: .equal, toItem: scrollView, attribute: .top, multiplier: 1.0, constant: 0))
    scrollView.addConstraint(NSLayoutConstraint(item: clipView, attribute: .right, relatedBy: .equal, toItem: scrollView, attribute: .right, multiplier: 1.0, constant: 0))
    scrollView.addConstraint(NSLayoutConstraint(item: clipView, attribute: .bottom, relatedBy: .equal, toItem: scrollView, attribute: .bottom, multiplier: 1.0, constant: 0))

    // Initial document view
    let documentView = NSView()
    documentView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.documentView = documentView
    clipView.addConstraint(NSLayoutConstraint(item: clipView, attribute: .left, relatedBy: .equal, toItem: documentView, attribute: .left, multiplier: 1.0, constant: 0))
    clipView.addConstraint(NSLayoutConstraint(item: clipView, attribute: .top, relatedBy: .equal, toItem: documentView, attribute: .top, multiplier: 1.0, constant: 0))
    clipView.addConstraint(NSLayoutConstraint(item: clipView, attribute: .right, relatedBy: .equal, toItem: documentView, attribute: .right, multiplier: 1.0, constant: 0))

    // Subview1
    let view1 = NSView()
    view1.translatesAutoresizingMaskIntoConstraints = false
    view1.wantsLayer = true
    view1.layer?.backgroundColor = NSColor.red.cgColor
    documentView.addSubview(view1)
    documentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[view1]|", options: [], metrics: nil, views: ["view1": view1]))

    // Subview2
    let view2 = NSView()
    view2.translatesAutoresizingMaskIntoConstraints = false
    view2.wantsLayer = true
    view2.layer?.backgroundColor = NSColor.green.cgColor
    documentView.addSubview(view2)
    documentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[view2]|", options: [], metrics: nil, views: ["view2": view2]))

    // Subview3
    let view3 = NSView()
    view3.translatesAutoresizingMaskIntoConstraints = false
    view3.wantsLayer = true
    view3.layer?.backgroundColor = NSColor.blue.cgColor
    documentView.addSubview(view3)
    documentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[view3]|", options: [], metrics: nil, views: ["view3": view3]))

    // Vertical autolayout
    documentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[view1(==100)][view2(==200)][view3(==300)]", options: [], metrics: nil, views: ["view1": view1, "view2": view2, "view3": view3]))
    documentView.addConstraint(NSLayoutConstraint(item: documentView, attribute: .bottom, relatedBy: .equal, toItem: view3, attribute: .bottom, multiplier: 1.0, constant: 0))

enter image description here