Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to collapse an NSSplitView pane with animation while using Auto Layout?

I've tried everything I can think of, including all the suggestions I've found here on SO and on other mailing lists, but I cannot figure out how to programmatically collapse an NSSplitView pane with an animation while Auto Layout is on.

Here's what I have right now (written in Swift for fun), but it falls down in multiple ways:

@IBAction func toggleSourceList(sender: AnyObject?) {
    let isOpen = !splitView.isSubviewCollapsed(sourceList.view.superview!)
    let position = (isOpen ? 0 : self.lastWidth)

    if isOpen {
        self.lastWidth = sourceList.view.frame.size.width
    }

    NSAnimationContext.runAnimationGroup({ context in
        context.allowsImplicitAnimation = true
        context.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        context.duration = self.duration

        self.splitView.setPosition(position, ofDividerAtIndex: 0)
    }, completionHandler: { () -> Void in
    })
}

The desired behavior and appearance is that of Mail.app, which animates really nicely.

I have a full example app available at https://github.com/mdiep/NSSplitViewTest.

like image 774
mdiep Avatar asked Oct 30 '14 22:10

mdiep


1 Answers

For some reason none of the methods of animating frames worked for my scrollview. I didn't try animating the constraints though.

I ended up creating a custom animation to animate the divider position. If anyone is interested, here is my solution:

Animation .h:

@interface MySplitViewAnimation : NSAnimation <NSAnimationDelegate>

@property (nonatomic, strong) NSSplitView* splitView;
@property (nonatomic) NSInteger dividerIndex;
@property (nonatomic) float startPosition;
@property (nonatomic) float endPosition;
@property (nonatomic, strong) void (^completionBlock)();

- (instancetype)initWithSplitView:(NSSplitView*)splitView
                   dividerAtIndex:(NSInteger)dividerIndex
                             from:(float)startPosition
                               to:(float)endPosition
                  completionBlock:(void (^)())completionBlock;
@end

Animation .m

@implementation MySplitViewAnimation

- (instancetype)initWithSplitView:(NSSplitView*)splitView
                   dividerAtIndex:(NSInteger)dividerIndex
                             from:(float)startPosition
                               to:(float)endPosition
                  completionBlock:(void (^)())completionBlock;
{
    if (self = [super init]) {
        self.splitView = splitView;
        self.dividerIndex = dividerIndex;
        self.startPosition = startPosition;
        self.endPosition = endPosition;
        self.completionBlock = completionBlock;

        [self setDuration:0.333333];
        [self setAnimationBlockingMode:NSAnimationNonblocking];
        [self setAnimationCurve:NSAnimationEaseIn];
        [self setFrameRate:30.0];
        [self setDelegate:self];
    }
    return self;
}

- (void)setCurrentProgress:(NSAnimationProgress)progress
{
    [super setCurrentProgress:progress];

    float newPosition = self.startPosition + ((self.endPosition - self.startPosition) * progress);

    [self.splitView setPosition:newPosition
               ofDividerAtIndex:self.dividerIndex];

    if (progress == 1.0) {
        self.completionBlock();
    }
}

@end

I'm using it like this - I have a 3 pane splitter view, and am moving the right pane in/out by a fixed amount (235).

- (IBAction)togglePropertiesPane:(id)sender
{
    if (self.rightPane.isHidden) {

        self.rightPane.hidden = NO;

        [[[MySplitViewAnimation alloc] initWithSplitView:_splitView
                                          dividerAtIndex:1
                                                  from:_splitView.frame.size.width  
                                                   to:_splitView.frame.size.width - 235                                                                                                             
                         completionBlock:^{
              ;
                                 }] startAnimation];
}
else {
    [[[MySplitViewAnimation alloc] initWithSplitView:_splitView
                                      dividerAtIndex:1                                                          
                                               from:_splitView.frame.size.width - 235
                                                 to:_splitView.frame.size.width
                                     completionBlock:^{          
        self.rightPane.hidden = YES;
                                     }] startAnimation];
    } 
}
like image 68
Jeff Pearce Avatar answered Feb 07 '23 01:02

Jeff Pearce