Create NSScrollView Programmatically in an NSView - Cocoa

Go To StackoverFlow.com

8

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..

2012-04-04 17:42
by Kevin
If you create views programmatically they do not "connect" with interface builde - Otium 2012-04-04 18:22
What? Of course you can interrelate programmatic views with interface builder generated views - ctpenrose 2012-04-05 05:23


9

This code fragment should demonstrate how to create an NSScrollView programmatically and use it to display any view, whether from a nib or from code. In the case of a nib generated view, you simply need to load the nib file to your custom view prior, and have an outlet to your custom view (outletToCustomViewLoadedFromNib) made to File's Owner.

NSScrollView *scrollView = [[NSScrollView alloc] initWithFrame:[[mainWindow contentView] frame]];

// configure the scroll view
[scrollView setBorderType:NSNoBorder];
[scrollView setHasVerticalScroller:YES];

// embed your custom view in the scroll view
[scrollView setDocumentView:outletToCustomViewLoadedFromNib];

// set the scroll view as the content view of your window
[mainWindow setContentView:scrollView];

Apple has a guide on the subject, which I won't link to as it requires Apple Developer Connection access and their links frequently break. It is titled "Creating and Configuring a Scroll View" and can currently be found by searching for its title using Google.

2012-04-05 05:57
by ctpenrose
Thank you very much - Kevin 2012-04-05 07:19


7

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

2017-09-26 16:27
by brianLikeApple
I have searched for this so long! Thank you so much for providing this, it was exactly what I was looking for and saved me hours - chl 2018-01-22 11:27
Ads