Resize animation with auto-layout and "jumpy" focus rings - cocoa

I'm working on a macOS App that uses auto-layout in a view hierarchy with layer backed views. The App uses an NSStackView with several subviews that each feature a collapse/unfold button to resize the respective subview. Resizing of subviews is implemented by adding and removing layout constraints and an animation context is used to animate the size change. I implemented this as demonstrated on WWDC 2013, Session 213, starting at about minute 29:
#objc func disclosureToggeled(_ sender : Any) {
if isCollapsed {
self.addConstraint(collapseConstraint)
}
else {
self.removeConstraint(collapseConstraint)
}
NSAnimationContext.runAnimationGroup({ context in
context.allowsImplicitAnimation = true
self.window?.layoutIfNeeded()
})
}
The resize animation works as expected.
My problem: if I trigger a resize animation and a subview containing a focussed UI element is animated into a new position its focus ring immediately jumps from its starting to its final position while the UI element itself animates correctly.
Any idea what I am doing wrong?

I believe that this has to do with the issue that is discussed in that same video (jumpy window resize). The solutions, also discussed in the video are to either
Animate constraint constant (rather than add/remove constraint) explicitly through the constraint.animator.constant accessor or
Separately animate first the constraint in question, then the window frame, while keeping the constraint priority below the window resize priority so that animating the constraint doesn't resize the window.
I found approach 1 to be simpler if the constraint changes can be described by simple constant changes.

Related

NSTableView in NSScrollView doesn't autoscroll when dragging

I'm currently implementing drag and drop rearranging in a table view in my OS X app. While normal scrolling works fine, autoscroll while dragging it totally broken.
If I grab a cell and start dragging, autoscroll just tells the table to scroll to the top. If I manually scroll using the trackpad during dragging the table continually pops to the top. If I drag one of the top cells, the table will not autoscroll down when dragging near the bottom.
I subclassed NSScrollView and overrode the scrollClipView method. I see that it's being called by some internal autoscroll method with the coordinates of (0, 0).
Since I can't see what that internal method is doing, and Goggle and SO are turning up nothing, I'm a bit stuck.
Has anyone run into this issue before? From past experiences, I have the feeling it's something AutoLayout related, but I have no idea what. Or maybe it's something completely unrelated.
Any ideas on how to further troubleshoot?
I ran into the same issue. In my case, the problem was that I set the height of the NSTableCellView to 10,000 in Interface Builder so that the horizontal separators wouldn’t be displayed for empty rows below the actual rows.
However, the actual height of my NSTableCellViews loaded at run time was 43px.
So as soon as I started dragging a cell to re-order it, the NSScrollView was trying to scroll 10,000 pixels at a time instead of 43 at a time.
This seems like a bug, because my NSOutlineView subclass does implement the following method to dynamically set the height of each row.
func outlineView(_ outlineView: NSOutlineView, heightOfRowByItem item: Any) -> CGFloat
Apparently that method is ignored by the autoscroll mechanism during drag and drop operations, and only the value set in Interface Builder is used.
So I just changed the height of the dummy NSTableCellView to 43px in Interface Builder, and I’ll just live with the horizontal separators being displayed for empty rows.

Dynamically resizing views based based on NSOutlineView after expand/collapse animation

I'm using an NSOutlineView to display a hierarchy of tracks in a timeline, very similar to what would be seen in video editing packages. As the user expands/collapses items in the outline view, the corresponding objects in a scroll view alongside it appear and disappear.
Unfortunately, the outlineViewItemDidCollapse: and outlineViewItemDidExpand: delegate methods get called before the animation is complete, and calling frameOfCellAtColumn: on the outline view only gets the frame at that instant, while Cocoa is still animating its [dis]appearance.
As a workaround, I'm using performSelector:withObject:afterDelay: with a delay of 100ms (as is this Dynamically resize NSWindow based on NSOutlineView height person with a similar problem), but this isn't perfect (and it's smells bad). The animation isn't always finished inside 100ms, and any longer delay becomes quite noticeable.
-(void)outlineViewItemDidExpand:(NSNotification *)notification
{
// we need to delay the update to allow the outline view expand animation to
// complete. Perhaps 0.1s isn't long enough in all cases, but any longer seems
// too sluggish
[self performSelector:#selector(updateSubviewsForTimeline:) withObject:timelineView afterDelay:0.1];
}
Is there any way I can hook into the outlineViewDidExpand|Collase: methods after the animation is complete? Alternatively, can I somehow get a handle on the animation itself inside my outlineViewDidExpand|Collase: methods so I can install a callback on that?

Auto layout NSWindow respects minimum size in IB simulator, but not when running for real

I have a window I'm setting up with auto layout. There is a view in the middle of the window that contains three controls, and I would like the window to refuse to resize horizontally smaller than the intrinsic size of those three controls.
The outer buttons both have horizontal space constraints to "stick" them to the outside of their superview, and the checkbox in the middle has a horizontal space constraint sticking it to the left side of the "Sync text" button. There is also a >= constraint between the "Sync outline" button and the checkbox, to make sure they don't overlap, but the checkbox prefers to hang to the right. All these constraints have a priority of 1000. The window itself has no minimum size specified.
When I use the "Simulate Document" command in Xcode, everything works as I'd expect, and the window won't let you size it smaller than in the screenshot above. However, when I run my application, the window does allow resizing smaller than that width, so that the buttons start to shrink and eventually the controls overlap each other. I'm not implementing any of the size related window delegate methods, so I don't see any place in the app's code where it might be influencing the resizing.
Any ideas on what could be causing this difference in behavior?
OK, I finally figured out what the heck was going on here. It turns out the problem was that I was implementing the -splitView:constraintMinCoordinate:ofSubviewAt: delegate method (as well as the maxCoordinate one) to restrict the size of the split subviews in the vertical direction. Yes, restricting the vertical resizing of the split view affected the horizontal layout of the buttons.
It appears that what happens is that, if you implement those delegate methods, NSSplitView reverts back to using autoresizing masks to layout the subviews rather than auto layout constraints. Since the view containing those buttons is no longer participating in auto layout, the buttons smush together when you resize the window small. In the simulator, the split view doesn't have a delegate set, so all the auto layout stuff works fine in that environment. Note that merely having the methods implemented is enough to trigger this, even if they just return the proposed coordinates unchanged.
The solution ended up being quite easy, which was to delete the delegate methods and replace it with a vertical constraint on the subview to restrict its size instead.

How to stop interface builder resetting user constraints on UIScrollView?

I'm having trouble getting a UIScrollView to respect the constraints I put in interface builder.
All I need to be able to do is set the content size of the scroll view from within IB.
The UIScrollView contains a single UIView.
Constraints on the UIScrollView:
Constraints on the UIView:
I've read through the documentation, and so have set things up as follows:
the UIScrollView has constraints pinning it to its superview, thus defining its size from outside
the UIView (content) has a fixed size (through width and height constraints)
the UIView is pinned to the UIScrollView, thus defining the content size
However, IB won't let me enter these constraints. If I change the 'Bottom Space' constraint between the view and the scroll view, shown in the image as -2196, to 0 (thus pinning the lower edge of the scroll view), then the 'Top Space' constraint resets to a non-zero value. The same happens in reverse. (I haven't yet tried in Xcode 5, which has a far saner approach to invalid constraints in that it doesn't just throw yours away when it feels like it.)
What am I missing?
Every time I've tried to do something even mildly sophisticated with constraints in Xcode 4's Interface Builder, I've eventually given up and either written the constraints in code or switched back to springs'n'struts and layoutSubviews (usually after crashing Xcode a few times).
That said, there is another approach to laying out a scroll view with content in IB. Just make the scroll view as big as its content size, and rely on the view controller (or some containing view controller) to resize the scroll view (or its superview) and let the constraints shrink down the scroll view's frame at runtime. The window's root view controller will always set its view's frame to the screen size, regardless of its size in the nib or storyboard, and that resizing flows down the view hierarchy.
I described this approach in more detail in this answer.
If your scroll view's content size is really supposed to be 2196 points tall, this probably won't work so well. I don't have anything better to suggest in that case.

Resize animations on a scrollview

I am trying to create a resize toggle animation on this simple custom TUIScrollView class (from TwUI open source project and very similar to UIScrollView) that I have built. It is called TUILayout and supports horizontal layout as well as vertical, animated insertions and removals and has a more declarative way of supplying data to it's cells that I prefer over delegation. It recycles views similar to TUITableView or UITableView. Anyway if you want to follow along, it's just one class and is here.
https://github.com/mrjjwright/TUILayout.
In the example code, the user clicks the blue button in the lower left and all the rows shrink smoothly to a size where the user can reorder and delete some rows (right click on a row in the example to see this in action), etc... and then the user toggle the rows back out to their original size by clicking the blue button again.
While doing this resize in setObjectHeight:animated I first resize my model objects that represent the rows, recalculate and set the contentSize on the TUIScrollView, cycle in all the new views (say 10 more views will fit in the shrunk view so dequeueReusableView and addSubview gets called 10 times) and finally I animate the frames of all the views to their size and location in layoutSubviews.
The result is that the scrollview correctly shrinks to a size where the scrollbar no longer displays, the views that are on screen animate smoothly down to their reduced size, but the newly added subviews that can now fit in the visibleRect animate in much later as one block of subviews.
So all the newly added subviews lag behind the views that were on the screen and I can't figure out why the animation isn't all happening together. I have tried lots of different combos of things with no luck including CATransactions. I am wondering if it has to with how a CAScrollLayer works or if somebody can help me think through this.
The more general issue is how to smoothly handle resizing animations on scrollviews that recycles their views and I have looked at several other grids out there in the iOS world and have got some inspiration but am looking for more.
Thanks!
I think I might have solved my own issue here (as I was making my bed this morning it hit me). I forced the current runloop to run after cycling in all the necessary subviews and very importantly not setting the contentSize of the scrollview until after the run loop completes and adds the needed subviews for the animation. In order to get the run loop to fire I used the trick from this SO question:
skipLayout = YES;
[[NSRunLoop currentRunLoop] runMode: NSDefaultRunLoopMode beforeDate: [NSDate date]];
skipLayout = NO;
If skipLayout is set TUILayout just returns from layoutSubviews so that the views just added are not immediately removed by the recycling layout code. Forcing the run loop to run made sure that all subviews were on the screen for the animation. After this I performed the resize animated layout. I updated the code on github if anybody is interested. I will leave this question open for a while to gain some further insight.

Resources