Wie auf-und Zuklappen NSSplitView Untersichten mit animation?

Ist es möglich zu animieren, die das kollabieren und expandieren von NSSplitView Untersichten? (Ich bin mir bewusst, die Verfügbarkeit von alternativen, würde aber lieber mit NSSplitView, die über die Animationen.)

Ich bin mit der Methode - (void)setPosition:(CGFloat)position ofDividerAtIndex:(NSInteger)dividerIndex zu führen, die das kollabieren und expandieren.

InformationsquelleAutor Johan Kool | 2011-06-11

Nach einigen weiteren versuchen, habe ich die Antwort gefunden: ja, es ist möglich.

Den code unten zeigt, wie es getan werden kann. Die splitView ist die NSSplitView ist vertikal unterteilt in mainView (Links) und der inspectorView (rechts). Die inspectorView ist die eine, die zusammenbricht.

- (IBAction)toggleInspector:(id)sender {
   if ([self.splitView isSubviewCollapsed:self.inspectorView]) {
        //NSSplitView hides the collapsed subview
        self.inspectorView.hidden = NO;

        NSMutableDictionary *expandMainAnimationDict = [NSMutableDictionary dictionaryWithCapacity:2];
        [expandMainAnimationDict setObject:self.mainView forKey:NSViewAnimationTargetKey];
        NSRect newMainFrame = self.mainView.frame;
        newMainFrame.size.width =  self.splitView.frame.size.width-lastInspectorWidth;
        [expandMainAnimationDict setObject:[NSValue valueWithRect:newMainFrame] forKey:NSViewAnimationEndFrameKey];

        NSMutableDictionary *expandInspectorAnimationDict = [NSMutableDictionary dictionaryWithCapacity:2];
        [expandInspectorAnimationDict setObject:self.inspectorView forKey:NSViewAnimationTargetKey];
        NSRect newInspectorFrame = self.inspectorView.frame;
        newInspectorFrame.size.width = lastInspectorWidth;
        newInspectorFrame.origin.x = self.splitView.frame.size.width-lastInspectorWidth;
        [expandInspectorAnimationDict setObject:[NSValue valueWithRect:newInspectorFrame] forKey:NSViewAnimationEndFrameKey];

        NSViewAnimation *expandAnimation = [[NSViewAnimation alloc] initWithViewAnimations:[NSArray arrayWithObjects:expandMainAnimationDict, expandInspectorAnimationDict, nil]];
        [expandAnimation setDuration:0.25f];
        [expandAnimation startAnimation];
    } else {
        //Store last width so we can jump back
        lastInspectorWidth = self.inspectorView.frame.size.width;

        NSMutableDictionary *collapseMainAnimationDict = [NSMutableDictionary dictionaryWithCapacity:2];
        [collapseMainAnimationDict setObject:self.mainView forKey:NSViewAnimationTargetKey];
        NSRect newMainFrame = self.mainView.frame;
        newMainFrame.size.width =  self.splitView.frame.size.width;
        [collapseMainAnimationDict setObject:[NSValue valueWithRect:newMainFrame] forKey:NSViewAnimationEndFrameKey];

        NSMutableDictionary *collapseInspectorAnimationDict = [NSMutableDictionary dictionaryWithCapacity:2];
        [collapseInspectorAnimationDict setObject:self.inspectorView forKey:NSViewAnimationTargetKey];
        NSRect newInspectorFrame = self.inspectorView.frame;
        newInspectorFrame.size.width = 0.0f;
        newInspectorFrame.origin.x = self.splitView.frame.size.width;
        [collapseInspectorAnimationDict setObject:[NSValue valueWithRect:newInspectorFrame] forKey:NSViewAnimationEndFrameKey];

        NSViewAnimation *collapseAnimation = [[NSViewAnimation alloc] initWithViewAnimations:[NSArray arrayWithObjects:collapseMainAnimationDict, collapseInspectorAnimationDict, nil]];
        [collapseAnimation setDuration:0.25f];
        [collapseAnimation startAnimation];
    }
}

- (BOOL)splitView:(NSSplitView *)splitView canCollapseSubview:(NSView *)subview {
    BOOL result = NO;
    if (splitView == self.splitView && subview == self.inspectorView) {
        result = YES;
    }
    return result;
}

- (BOOL)splitView:(NSSplitView *)splitView shouldCollapseSubview:(NSView *)subview forDoubleClickOnDividerAtIndex:(NSInteger)dividerIndex {
    BOOL result = NO;
    if (splitView == self.splitView && subview == self.inspectorView) {
        result = YES;
    }
    return result;
}

Hinweis für diejenigen, die diesen code verwenden, die in einem Speicher nicht verwalteten Kontext: NSViewAnimation Instanzen sind undicht.
In dieser Lösung nach der Erweiterung des inspectorView Trennlinie verschwindet. Es wird sichtbar nach einem Klick zwischen mainView und inspectorView. Ich recon, dass es sich nicht bewegt mit Aussicht. Wissen Sie, wie Sie dieses Problem lösen ?

InformationsquelleAutor Johan Kool

Hier ist eine einfachere Methode:

http://www.cocoabuilder.com/archive/cocoa/304317-animating-nssplitpane-position.html

(Link oben tot, neuer link hier.)

Was sagt eine Kategorie erstellen, auf NSSplitView wie folgt, und animieren Sie dann mit

[[splitView animator] setSplitPosition:pos];

Funktioniert für mich.

Kategorie:

@implementation NSSplitView (Animation)

+ (id)defaultAnimationForKey:(NSString *)key
{
    if ([key isEqualToString:@"splitPosition"])
    {
        CAAnimation* anim = [CABasicAnimation animation];
        anim.duration = 0.3;
        return anim;
    }
    else
    {
        return [super defaultAnimationForKey:key];
    }
}

- (void)setSplitPosition:(CGFloat)position
{
    [self setPosition:position ofDividerAtIndex:0];
}

- (CGFloat)splitPosition
{
    NSRect frame = [[[self subviews] objectAtIndex:0] frame];

    if([self isVertical])
        return NSMaxX(frame);
    else
        return NSMaxY(frame);
}

@end

InformationsquelleAutor Sofi Software LLC

Aus irgendeinem Grund keine der Methoden der Animation frames gearbeitet für mein scrollview.

Ich landete erstellen einer benutzerdefinierten animation animieren Sie die position der Trennlinie. Dies endete in weniger Zeit als ich erwartet hatte. Wenn jemand interessiert ist, hier ist meine Lösung:

Animation .h:

@interface MySplitViewAnimation : NSAnimation

@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];
    }
    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

Ich verwende es auch so - ich habe ein 3-Fenster Ansicht splitter, und ziehe den rechten Bereich ein - /durch einen festen Betrag (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];
    } 
}

InformationsquelleAutor Jeff Pearce

1

Gibt es eine Reihe von Antworten für diese. Im Jahr 2019, der beste Weg, dies zu tun ist die Festlegung von constraints, die auf Ihrem SplitView Scheiben, dann animieren Sie die Einschränkungen.

Angenommen ich habe eine SplitView mit drei Scheiben: leftPane, middlePane, rightPane. Ich will nicht einfach nur Zusammenbruch der beiden Bereiche auf der Seite, ich will auch wollen, dynamisch ändern Sie die Breite von verschiedenen Bereichen, wenn bestimmte Ansichten kommen in oder ausgehen.

In IB, ich habe ein BREITE Einschränkung für jeden der drei Bereiche. leftPane und rightPane breiten set an 250 mit einer Priorität von 1000 (required).

In code sieht es so aus:
```
@class MyController: NSViewController
{
    @IBOutlet var splitView: NSSplitView!

    @IBOutlet var leftPane: NSView!
    @IBOutlet var middlePane: NSView!
    @IBOutlet var rightPane: NSView!

    @IBOutlet var leftWidthConstraint: NSLayoutConstraint!
    @IBOutlet var middleWidthConstraint: NSLayoutConstraint!
    @IBOutlet var rightWidthConstraint: NSLayoutConstraint!


    override func awakeFromNib() {
        //We use these in our animation, but want them off normally so the panes
        //can be resized as normal via user drags, window changes, etc.
        leftWidthConstraint.isActive = false
        middleWidthConstraint.isActive = false
        rightWidthConstraint.isActive = false
    }


    func collapseRightPane() 
    {
        NSAnimationContext.runAnimationGroup({ (context) in

            context.allowsImplicitAnimation = true
            context.duration = 0.15

            rightWidthConstraint.constant = 0
            rightWidthConstraint.isActive = true

            //Critical! Call this in the animation block or you don't get animated changes:
            splitView.layoutSubtreeIfNeeded()

        }) { [unowned self] in

            //We need to tell the splitView to re-layout itself before we can
            //remove the constraint, or it jumps back to how it was before animating.
            //This process tells the layout engine to recalculate and update
            //the frames of everything based on current constraints:
            self.splitView.needsLayout = true
            self.splitView.needsUpdateConstraints = true
            self.splitView.needsDisplay = true

            self.splitView.layoutSubtreeIfNeeded()
            self.splitView.displayIfNeeded()

            //Now, disable the width constraint so we can resize the splitView
            //via mouse, etc:
            self.middleWidthConstraint.isActive = false
        }
    }
}


extension MyController: NSSplitViewDelegate
{
    final func splitView(_ splitView: NSSplitView, canCollapseSubview subview: NSView) -> Bool
    {
        //Allow collapsing. You might set an iVar that you can control
        //if you don't want the user to be able to drag-collapse. Set the
        //ivar to false usually, but set it to TRUE in the animation block
        //block, before changing the constraints, then back to false in
        //in the animation completion handler.
        return true
    }


    final func splitView(_ splitView: NSSplitView, shouldHideDividerAt dividerIndex: Int) -> Bool {
        //Definitely do this. Nobody wants a crappy divider hanging out
        //on the side of a collapsed pane.
        return true
    }
}
```
Können Sie mehr komplexe in dieser animation block. Zum Beispiel könnten Sie entscheiden, dass Sie möchten, reduzieren Sie den richtigen Bereich, sondern auch vergrößern die Mitte einer auf 500 Pixel an der gleichen Zeit.

Der Vorteil dieses Ansatzes gegenüber den anderen hier aufgeführten ist, dass Sie automatisch verarbeitet Fällen, in denen der Blendrahmen ist derzeit nicht groß genug, um Platz für "ausbau" auf einen ausgeblendeten Bereich. Plus, Sie können diese ändern, um die Scheiben' Größen in IRGENDEINER Weise, nicht nur auf-und Zuklappen Sie. Sie können auch alle diese änderungen passieren auf einmal in eine glatte, kombiniert animation.

Hinweise:
1. Offensichtlich die Aussicht, dass bis leftPane, middlePane, und rightPane nie ändern. Diese sind "Container", zu dem Sie hinzufügen/entfernen andere Ansichten als nötig. Wenn Sie entfernen den Bereich Aussicht von der SplitView, werden Sie zerstören die Einschränkungen, die du in IB.
2. Bei der Verwendung von AutoLayout, wenn Sie sich finden, setzen der Rahmen manuell, man kämpft das system. Sie Einschränkungen festlegen; die autolayout-engine setzt frames.
3. Die -setPosition:ofDividerAtIndex: Ansatz funktioniert nicht gut, wenn der splitView ist nicht groß genug, um den Teiler eingestellt, wo Sie es haben wollen. Zum Beispiel, wenn Sie wollen UN-Zusammenbruch einer rechten Seite und geben Sie 500 Breite, aber das ganze Fenster ist derzeit nur 300 breit. Dies bekommt auch chaotisch, wenn Sie müssen, um die Größe mehrerer Scheiben auf einmal.
4. Auf die Sie bauen können mit diesem Ansatz mehr zu tun. Zum Beispiel, vielleicht haben Sie möchten, setzen Sie die minimale und maximale breiten für verschiedene Bereiche in der splitView. Tun, mit Einschränkungen, dann ändern sich die Konstanten der min und max Breite Einschränkung wie nötig (vielleicht, wenn die unterschiedlichen Ansichten kommen in jeden Bereich, usw.).
KRITISCHER HINWEIS:

Dieser Ansatz schlägt fehl, wenn eine Untersicht in einem der Bereiche hat ein width oder minimumWidth Einschränkung der Priorität von 1000. Sie erhalten eine "kann nicht befriedigen Einschränkungen" - Hinweis in der log. Sie müssen sicherstellen, dass Ihre Untersichten (und Ihre untergeordneten Ansichten, ganz unten in der Hierarchie) nicht über eine Breite Einschränkung bei 1000 Priorität. Verwenden Sie die 999 oder weniger für solche Einschränkungen, so dass die splitView können immer überschreiben Sie zum ausblenden der anzeigen.
- Arbeit an ein etwas anderes problem und diese Antwort ist gelöst. Danke. (Habe es gerade ausprobiert und es scheint zu funktionieren mit Stapel sichten, zu.)
InformationsquelleAutor Bryan

Lösung für macOS 10.11.

Wichtigsten Punkte:

NSSplitViewItem.minimumThickness hängt von NSSplitViewItem .viewController.view Breite/Höhe, wenn nicht explizit gesetzt.
NSSplitViewItem .viewController.view Breite/Höhe richtet sich explizit Einschränkungen verbunden.
NSSplitViewItem (d.h. geordnet Untersicht NSSplitView) werden vollständig zusammengebrochen, wenn Sie es erreichen können Zero dimension (Breite oder Höhe).

So, wir brauchen nur zu deaktivieren, entsprechende Einschränkungen vor animation und erlauben Aussicht zu erreichen Zero dimension. Nach der animation, wir brauchen nur zu aktivieren, benötigt Einschränkungen.

class SplitViewAnimationsController: ViewController {

   private lazy var toolbarView = StackView().autolayoutView()
   private lazy var revealLeftViewButton = Button(title: "Left").autolayoutView()
   private lazy var changeSplitOrientationButton = Button(title: "Swap").autolayoutView()
   private lazy var revealRightViewButton = Button(title: "Right").autolayoutView()

   private lazy var splitViewController = SplitViewController()

   private lazy var viewControllerLeft = ContentViewController()
   private lazy var viewControllerRight = ContentViewController()
   private lazy var splitViewItemLeft = NSSplitViewItem(viewController: viewControllerLeft)
   private lazy var splitViewItemRight = NSSplitViewItem(viewController: viewControllerRight)

   private lazy var viewLeftWidth = viewControllerLeft.view.widthAnchor.constraint(greaterThanOrEqualToConstant: 100)
   private lazy var viewRightWidth = viewControllerRight.view.widthAnchor.constraint(greaterThanOrEqualToConstant: 100)
   private lazy var viewLeftHeight = viewControllerLeft.view.heightAnchor.constraint(greaterThanOrEqualToConstant: 40)
   private lazy var viewRightHeight = viewControllerRight.view.heightAnchor.constraint(greaterThanOrEqualToConstant: 40)
   private lazy var equalHeight = viewControllerLeft.view.heightAnchor.constraint(equalTo: viewControllerRight.view.heightAnchor, multiplier: 1)
   private lazy var equalWidth = viewControllerLeft.view.widthAnchor.constraint(equalTo: viewControllerRight.view.widthAnchor, multiplier: 1)

   override func loadView() {
      super.loadView()
      splitViewController.addSplitViewItem(splitViewItemLeft)
      splitViewController.addSplitViewItem(splitViewItemRight)
      contentView.addSubviews(toolbarView, splitViewController.view)
      addChildViewController(splitViewController)

      toolbarView.addArrangedSubviews(revealLeftViewButton, changeSplitOrientationButton, revealRightViewButton)
   }

   override func viewDidAppear() {
      super.viewDidAppear()
      splitViewController.contentView.setPosition(contentView.bounds.width * 0.5, ofDividerAt: 0)
   }

   override func setupDefaults() {
      setIsVertical(true)
   }

   override func setupHandlers() {
      revealLeftViewButton.setHandler { [weak self] in guard let this = self else { return }
         self?.revealOrCollapse(this.splitViewItemLeft)
      }
      revealRightViewButton.setHandler { [weak self] in guard let this = self else { return }
         self?.revealOrCollapse(this.splitViewItemRight)
      }
      changeSplitOrientationButton.setHandler { [weak self] in guard let this = self else { return }
         self?.setIsVertical(!this.splitViewController.contentView.isVertical)
      }
   }

   override func setupUI() {

      splitViewController.view.translatesAutoresizingMaskIntoConstraints = false
      splitViewController.contentView.dividerStyle = .thin
      splitViewController.contentView.setDividerThickness(2)
      splitViewController.contentView.setDividerColor(.green)

      viewControllerLeft.contentView.backgroundColor = .red
      viewControllerRight.contentView.backgroundColor = .blue
      viewControllerLeft.contentView.wantsLayer = true
      viewControllerRight.contentView.wantsLayer = true

      splitViewItemLeft.canCollapse = true
      splitViewItemRight.canCollapse = true

      toolbarView.distribution = .equalSpacing
   }

   override func setupLayout() {
      var constraints: [NSLayoutConstraint] = []

      constraints += LayoutConstraint.Pin.InSuperView.horizontally(toolbarView, splitViewController.view)
      constraints += [
         splitViewController.view.topAnchor.constraint(equalTo: contentView.topAnchor),
         toolbarView.topAnchor.constraint(equalTo: splitViewController.view.bottomAnchor),
         toolbarView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
      ]

      constraints += [viewLeftWidth, viewLeftHeight, viewRightWidth, viewRightHeight]
      constraints += [toolbarView.heightAnchor.constraint(equalToConstant: 48)]

      NSLayoutConstraint.activate(constraints)
   }
}

extension SplitViewAnimationsController {

   private enum AnimationType: Int {
      case noAnimation, `default`, rightDone
   }

   private func setIsVertical(_ isVertical: Bool) {
      splitViewController.contentView.isVertical = isVertical
      equalHeight.isActive = isVertical
      equalWidth.isActive = !isVertical
   }

   private func revealOrCollapse(_ item: NSSplitViewItem) {

      let constraintToDeactivate: NSLayoutConstraint
      if splitViewController.splitView.isVertical {
         constraintToDeactivate = item.viewController == viewControllerLeft ? viewLeftWidth : viewRightWidth
      } else {
         constraintToDeactivate = item.viewController == viewControllerLeft ? viewLeftHeight : viewRightHeight
      }

      let animationType: AnimationType = .rightDone

      switch animationType {
      case .noAnimation:
         item.isCollapsed = !item.isCollapsed
      case .default:
         item.animator().isCollapsed = !item.isCollapsed
      case .rightDone:
         let isCollapsedAnimation = CABasicAnimation()
         let duration: TimeInterval = 3 //0.15
         isCollapsedAnimation.duration = duration
         item.animations = [NSAnimatablePropertyKey("collapsed"): isCollapsedAnimation]
         constraintToDeactivate.isActive = false
         setActionsEnabled(false)
         NSAnimationContext.runImplicitAnimations(duration: duration, animations: {
            item.animator().isCollapsed = !item.isCollapsed
         }, completion: {
            constraintToDeactivate.isActive = true
            self.setActionsEnabled(true)
         })
      }
   }

   private func setActionsEnabled(_ isEnabled: Bool) {
      revealLeftViewButton.isEnabled = isEnabled
      revealRightViewButton.isEnabled = isEnabled
      changeSplitOrientationButton.isEnabled = isEnabled
   }
}

class ContentViewController: ViewController {

   override func viewDidLayout() {
      super.viewDidLayout()
      print("frame: \(view.frame)")
   }
}

Wie auf-und Zuklappen NSSplitView Untersichten mit animation?

InformationsquelleAutor Vlad

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Hinweise:

KRITISCHER HINWEIS: