Search code examples
xcodemacoscocoaxcode11

How Can I Make a View, With a Tab View in It, Scrollable?

I got an NSTabView inside an NSView. That NSView is in an NSClipView, which in turn is in an NSScrollView. It looks like this (NSTabView in green, and NSView in red):

enter image description here

As you can see, the content of NSTabView gets clipped, and no scrollbars appear (since the view doesn't expand beyond the window).

How can I make NSTabView take up as much space as it needs (doesn't clip out), and expand the NSView with it? Then, NSScrollView can deal with the scrolling of the overgrown NSView.

Since my content changes dynamically, I don't want to put in some hard values for the width and height of NSTabView's superview.

This is only part of it; here's now the overall hierarchy looks:

enter image description here

I want the NSTabView's superview to be scrollable instead of clipping out, like this:

enter image description here

Solution

  • The setup I'll describe is for an NSTabView that will pin to the top, left, and right sides of the scroll view. Note the NSTabView could be replaced with any other NSView, the setup is the same.

    enter image description here

    Starting with you putting a scroll view into the xib/storyboard, you'll have NSScrollView -> NSClipView -> NSView (document view). Constrain the NSScrollView to the edges of the window. Drop your NSTabView onto the NSView instance. Add constraints so that your NSTabView edge constraints equal the NSView and define a height constraint either explicitly or implicitly with other content inside the tab view that defines it.

    enter image description here

    Personally I like to change the NSView instance (document view) layout to use constraints, by default it uses autoresizing masks and this makes it difficult to keep it in sync with the NSTabView. We want the document view to be pinned to the top, left, and right sides of the scroll view. The size of this view is what determines the scrollable region so we want it to be the same size as the NSTabView so the height of the tab view will determine the scrollable area.

    To change this, select the document view, and under the Size Inspector we want to change the "Layout" type to "Automatic".

    enter image description here

    Lastly, add constraints to the top, left, and right and you should be good to go.

    If you want the scroll view to start at the top rather than the bottom, you should subclass the document view and override isFlipped:

    class FlippedView: NSView {
    override var isFlipped: Bool { true }
}