NSSplitView and autolayout

Question

How should I use auto layout constrains inside NSSplitView subview?

My NSSplitView subview has 3 subview: topPane, tableCont

Answer 1

NSSplitView has been a strange thing since the beginning and it would not surprise me if it'll be gone soon. After trying to get NSSplitView working with AutoLayout for a month now and sinking from one despair attack to another, I finally gave up.

My solution is to not use NSSplitView with AutoLayout at all. So either NSSplitView without Autolayout or Autolayout without NSSplitView: this isn't as complicated as it sounds: just lay out your subviews next to each other and add NSLayoutConstraints as IBOutlets. The constants of these constraints can then be set and changed from the controller in code. With that approach you can set the origin (negative offset to slide it out of the window), the width and the relations to other subviews - plus it's really easy to animate constraints with the view's animator (ever tried to animate a NSSplitView?)

The only thing missing is the mouse drag on the dividers, but this can be implemented with a couple of lines, tracking mouseEvents in your custom "SplitView".

There's an autolayout "splitview" example from Apple (unfortunately only vertical) and I've seen at least one new project on github lately. Though for me, I thought it'd be easier to start over with my custom solution for my app's specific needs, rather than trying to create something very universal (thus making it too complex to handle).

Edit: I now completed my custom splitView that loads its subviews from separate nibs. No constraint issues, no autolayout warnings. Compared to the whole month of trying to get it work with NSSplitView, I have now a working custom splitView based on constraints, easily animatable, created in only one evening. I definitely recommend taking this route!

Answer 2

I load all by a nib file and setTranslatesAutoresizingMaskIntoConstraints:NO afterwards.

So maybe you should first add by [mySplitView addSubview:myView]; your views and disable afterwards the translation of the autosizing mask to constraints and after this you add your contraint to myView.

EDIT:

Ok it seems I missunderstand the myView. You have to add the constraint to the subviews and not to the splitview.

[topPane addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[topPane(34)]" options:0 metrics:nil views:views]];

[bottomPane addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bottomPane(24)]" options:0 metrics:nil views:views]];

You don't have to add edge constraints (the "|" in "V:|[topPane(34)]") because the subviews in NSSplitView are already autoresizing.

This lead to this e.g. for the topPane constraint:

NOTE: ignore the subview content, they are just placeholders

Answer 3

It took me some time to get my autolayout clean of warnings but I did get it handled in IB (several splitviews and subviews).

My layout looks like:

RootView
  |--1st NSSplitView (3 vertical subviews)
      |----UIView (left)
      |----2nd NSSplitView (center & 2 horizontal subviews)
           |---UIView (top)
           |---3rd NSSplitView (bottom & 3 vertical subviews)
               |---UIView (left)
               |---UIView (center)
               |---UIView (right)
      |----UIView (right)

My problem was, that I had 19 Warnings in all my subviews but my layout looked fine and worked how it should be. After a while I found the cause of my warnings: the constraints of the outer views in my first splitview.

Both views (left and right) had a width-constraint with "width >= 200" and the center view (2nd splitview) had no constraints (because its min-width and max-width where handled by its subviews).

The warnings showed me that autolayout wants to shrink my IB-UI-Layout because the calculated min-widths where smaller than my layout but I didn´t want to shrink it in IB.

I added a fixed constraint "width = 200" to both of the outer subviews of my first splitview and checked "remove at build time".

Now my layout is free of warnings and everything works how it should be.

My conclusion:

I think the problem with autolayout and splitviews is that autolayout can not handle the width-constraints of the subviews. The reason we want to use splitviews is, that we want dynamic width of the views and we want it in both directions, shrink and expans.

So there is no width <= xxx && width >= xxx . Autolayout can only handle one of it and we get warnings in IB. You can fix this problem with a temporary constraint in IB which will removed before runtime.

I hope it makes sense what I wrote but it worked fine in my project.

PS: I could not found any solution until today where I found this thread.. so I guess your posts inspired me :-)

Answer 4

10.8 fixed that problem, see its release notes.

Here is my solution for 10.7 (a custom split view): https://github.com/benuri/HASplitView.git

Answer 5

I used this class as a workaround, it's not perfect (the subviews stutter a bit) but it unblocked me. I use this class as the custom class inside each split view pane.

@interface FBSplitPaneView : NSView

@end

@implementation FBSplitPaneView

- (void)setFrame:(NSRect)frame
{
  for (NSView *subview in self.subviews) {
    subview.frame = self.bounds;
  }
  [super setFrame:frame];
}

@end

Answer 6

You do not want to disable translatesAutoresizingMaskIntoConstraints at all. You shouldn't mess with system views constraints. NSSplitView handles the sizing for the individual views itself and you are essentially trying to rip it's control away. Not to mention, you forgot to account for the splitter.

The correct way to set a minimum or maximum (or constant for that matter) width/height on a splitview is to set those things on the views individually. In particular, if you are doing this in code you will need to use 2 separate calls to constraintsWithVisualFormat, because otherwise the visual format language will create constraints between the views.

You can do all of this in IB just fine. You can even set the priority of each view in the split view, which will cause one or the other view to resize when the window does rather than distributing the resize equally.