Scroll hesitation with floating view in UIScrollView using auto layout - ios

Question

QUESTION:
I'll simplify the question but keep my original for reference...
I am modifying the priority of existing constraints, but the result only changes the position of one of the UIScrollView subviews. All remaining subviews maintain their original size and position, yet it looks like I am incurring a layout pass on all subviews below the one I am modifying constraints on. So, why is ViewWillLayoutSubviews and UpdateViewConstraints being called on things that haven't changed?
[Original question]
See the details below. What is the cause of the scrolling hesitation seen in the included screencasts and how can I fix it?
BACKGROUND:
I’ve built an accordion style list control that hosts the views of several child UIViewControllers, each paired with a header view to enable the user to toggle visibility of its content view. I’ve created this list control using a UIScrollView with auto layout. I’ve become very familiar with the intricacies of auto layout with a UIScrollView but admit that I am pretty new to auto layout in general. I’ve relied heavily on Apple’s documentation and related blog posts from the community:
Apple's Documentation
Relevant StackOverflow questions
among many, many others.
I’ve implemented this control so that the header views can be floated above other UIScrollView content. Very much like the section views of a grouped UITableView, they will stick to the top of the UIScrollView as the user scrolls down to view more content. Incidentally, I originally built this using a UITableView, but the way it manages visible cells caused scrolling performance issues of its own.
PROBLEM:
I’m having some performance issues when scrolling content. I’ve done some troubleshooting, and I’ve found that when the “floating header” feature is disabled, scrolling performance is pretty good (although there is still some hesitation on expanding/collapsing a section which may have the same cause as my scrolling performance issue). But when this feature is enabled, scrolling hesitates as each header view is floated. I’ve included a screencast of my prototype running on my iPod Touch 5.
Screencast of prototype running on iPod Touch 5
It’s a very minor hesitation, but this prototype has significantly less complex content views. The final project shows hesitation of up to about a second.
DETAILS:
The prototype has been built using Xamarin, but I'm proficient in Objective-C if that's how you want to answer. Here’s how I’ve set up my constraints to support this feature. I’ve done this in a Reload() method that modifies the UIScrollView subviews.
UIView previousContent = null;
for (var sectionIdx = 0; sectionIdx < this.Source.NumberOfSections (this); sectionIdx++) {
var vwHeader = this.Source.GetViewForHeader (this, sectionIdx);
var vwContent = this.Source.GetViewForSection (this, sectionIdx);
this.scrollView.AddSubview (vwHeader);
this.scrollView.AddSubview (vwContent);
this.scrollView.BringSubviewToFront (vwHeader);
var headerHeight = this.Source.GetHeightForHeader (this, sectionIdx);
var isSectionCollapsed = this.Source.GetIsSectionCollapsed (this, sectionIdx);
// This will never change, so set constraint priority to Required (1000)
var headerHeightConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.Height, 1.0f, headerHeight);
headerHeightConstraint.Priority = (float)UILayoutPriority.Required;
this.AddConstraint (headerHeightConstraint);
// This constraint is used to handle visibility of a section.
// This is updated in UpdateConstraints.

 var contentZeroHeightConstraint = NSLayoutConstraint.Create (vwContent, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.Height, 1.0f, 0.0f);
if (isSectionCollapsed)
contentZeroHeightConstraint.Priority = (float)UILayoutPriority.Required - 1.0f;
else
contentZeroHeightConstraint.Priority = (float)UILayoutPriority.DefaultLow;

 this.AddConstraint (contentZeroHeightConstraint);

 // Set initial state of dictionary that keeps track of all inline and floating header constraints
if (!this.inlineConstraints.ContainsKey (sectionIdx))
this.inlineConstraints.Add (sectionIdx, new List<NSLayoutConstraint> ());
this.inlineConstraints [sectionIdx].Clear ();
if (!this.floatConstraints.ContainsKey (sectionIdx))
this.floatConstraints.Add (sectionIdx, new List<NSLayoutConstraint> ());
this.floatConstraints [sectionIdx].Clear ();

 // If this is the first section, pin top edges to the scrollview, not the previous sibling.

 if (previousContent == null) {
// Pin the top edge of the header view to the top edge of the scrollview.
var headerTopToScrollViewTopConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Top, 1.0f, 0.0f);
headerTopToScrollViewTopConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
// Add this constraint to the dictionary that tracks inline constraints, because we will need to change it when this header view needs to float.
this.inlineConstraints [sectionIdx].Add (headerTopToScrollViewTopConstraint);
this.AddConstraint (headerTopToScrollViewTopConstraint);
// Also pin the top edge of the content view to the top edge of the scrollview, with a padding of header height.
// This is done to minimize constraints that need to be modified when a header is floated.

 // May be safely changed to pin to the bottom edge of the header view.
var contentTopToScrollViewTopConstraint = NSLayoutConstraint.Create (vwContent, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Top, 1.0f, headerHeight);
contentTopToScrollViewTopConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
this.AddConstraint (contentTopToScrollViewTopConstraint);
} else {
// Pin the top edge of the header view to the bottom edge of the previous content view.
var previousContentBottomToHeaderTopConstraint = NSLayoutConstraint.Create (previousContent, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, vwHeader, NSLayoutAttribute.Top, 1.0f, 0.0f);
previousContentBottomToHeaderTopConstraint.Priority = (float)UILayoutPriority.DefaultHigh;

 // Add this constraint to the dictionary that tracks inline constraints, because we will need to change it when this header view needs to float.

 this.inlineConstraints [sectionIdx].Add (previousContentBottomToHeaderTopConstraint);

 this.AddConstraint (previousContentBottomToHeaderTopConstraint);
// Also pin the top edge of the content view to the bottom edge of the previous content view.
// This is done to minimize constraints that need to be modified when a header is floated.
// May be safely changed to pin to the bottom edge of the header view.

 var previousContentBottomToContentTopConstraint = NSLayoutConstraint.Create (previousContent, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, vwContent, NSLayoutAttribute.Top, 1.0f, -headerHeight);

 previousContentBottomToContentTopConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
this.AddConstraint (previousContentBottomToContentTopConstraint);
}
// If this is the last section, pin the bottom edge of the content view to the bottom edge of the scrollview.
if (sectionIdx == this.Source.NumberOfSections (this) - 1) {
var contentBottomToScrollViewBottomConstraint = NSLayoutConstraint.Create (vwContent, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Bottom, 1.0f, 0.0f);
contentBottomToScrollViewBottomConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
this.AddConstraint (contentBottomToScrollViewBottomConstraint);
}
// Pin the leading edge of the header view to the leading edge of the scrollview.
var headerLeadingToScrollViewLeadingConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Leading, 1.0f, 0.0f);
headerLeadingToScrollViewLeadingConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
// Add this constraint to the dictionary that tracks inline constraints, because we will need to change it when this header view needs to float.
this.inlineConstraints [sectionIdx].Add (headerLeadingToScrollViewLeadingConstraint);
this.AddConstraint (headerLeadingToScrollViewLeadingConstraint);
// Pin the leading edge of the content view to the leading edge of the scrollview.
var contentLeadingToScrollViewLeadingConstraint = NSLayoutConstraint.Create (vwContent, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Leading, 1.0f, 0.0f);
contentLeadingToScrollViewLeadingConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
this.AddConstraint (contentLeadingToScrollViewLeadingConstraint);
// Pin the trailing edge of the header view to the trailing edge of the scrollview.
var headerTrailingToScrollViewTrailingConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Trailing, 1.0f, 0.0f);
headerTrailingToScrollViewTrailingConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
// Add this constraint to the dictionary that tracks inline constraints, because we will need to change it when this header view needs to float.
this.inlineConstraints [sectionIdx].Add (headerTrailingToScrollViewTrailingConstraint);
this.AddConstraint (headerTrailingToScrollViewTrailingConstraint);
// Pin the trailing edge of the content view to the trailing edge of the scrollview.
var contentTrailingToScrollViewTrailingConstraint = NSLayoutConstraint.Create (vwContent, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Trailing, 1.0f, 0.0f);
contentTrailingToScrollViewTrailingConstraint.Priority = (float)UILayoutPriority.DefaultHigh;
this.AddConstraint (contentTrailingToScrollViewTrailingConstraint);
// Add a width constraint to set header width to scrollview width.
var headerWidthConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Width, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Width, 1.0f, 0.0f);
headerWidthConstraint.Priority = (float)UILayoutPriority.Required;
this.AddConstraint (headerWidthConstraint);
// Add a width constraint to set content width to scrollview width.
var contentWidthConstraint = NSLayoutConstraint.Create (vwContent, NSLayoutAttribute.Width, NSLayoutRelation.Equal, this.scrollView, NSLayoutAttribute.Width, 1.0f, 0.0f);
contentWidthConstraint.Priority = (float)UILayoutPriority.Required;
this.AddConstraint (contentWidthConstraint);
// Add a lower priority constraint to pin the leading edge of the header view to the leading edge of the parent of the scrollview.
var floatHeaderLeadingEdgeConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, this, NSLayoutAttribute.Leading, 1.0f, 0.0f);
floatHeaderLeadingEdgeConstraint.Priority = (float)UILayoutPriority.DefaultLow;
// Add this constraint to the dictionary that tracks floating constraints, because we will need to change it when this header view needs to be inline.
this.floatConstraints [sectionIdx].Add (floatHeaderLeadingEdgeConstraint);
this.AddConstraint (floatHeaderLeadingEdgeConstraint);
// Add a lower priority constraint to pin the top edge of the header view to the top edge of the parent of the scrollview.
var floatHeaderTopEdgeConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this, NSLayoutAttribute.Top, 1.0f, 0.0f);
floatHeaderTopEdgeConstraint.Priority = (float)UILayoutPriority.DefaultLow;
// Add this constraint to the dictionary that tracks floating constraints, because we will need to change it when this header view needs to be inline.
this.floatConstraints [sectionIdx].Add (floatHeaderTopEdgeConstraint);
this.AddConstraint (floatHeaderTopEdgeConstraint);
// Add a lower priority constraint to pin the trailing edge of the header view to the trailing edge of the parent of the scrollview.
var floatHeaderTrailingEdgeConstraint = NSLayoutConstraint.Create (vwHeader, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, this, NSLayoutAttribute.Trailing, 1.0f, 0.0f);
floatHeaderTrailingEdgeConstraint.Priority = (float)UILayoutPriority.DefaultLow;
// Add this constraint to the dictionary that tracks floating constraints, because we will need to change it when this header view needs to be inline.
this.floatConstraints [sectionIdx].Add (floatHeaderTrailingEdgeConstraint);
this.AddConstraint (floatHeaderTrailingEdgeConstraint);
previousContent = vwContent;
}
All content in a UIScrollView needs leading, top, trailing and bottom edge constraints, so that the UIScrollView can determine its ContentSize, so I have done that. As you can see, I’ve added the floating header constraints, even though at execution time no headers should float. I’ve given them a lower priority so that they’re not applied by default. I’ve done the same with a content height constraint for a collapsed section. I’ve done this so that I don’t have to add/remove constraints to float a header or collapse a section, I just need to modify constraint priorities. I don't know if that's good practice but I thought it might help avoid unnecessary layout passes.
I’m keeping track of the constraints that apply to both inline and floating headers. When it’s determined that a header should be floated, I lower the priority of the relevant inline header constraints to DefaultLow and increase the priority of the relevant floating header constraints to DefaultHigh. I do that in an event handler for the UIScrollView’s Scrolled event. I determine which section is occupying the space at ContentOffset and float its header. I’m keeping track of the last index of the header that’s been floated, just to avoid inlining something that doesn’t need to be inlined.
private int lastFloatHeaderIdx = -1;
private void scrolled (object sender, EventArgs e) {
// Restore the code below to see the scroll hesitation from what I think are unnecessary calls to ViewWillLayoutSubviews and UpdateViewConstraints
// How can I achieve this behavior without incurring the unnecessary expense?
if (this.Source != null) {
for (var idx = 0; idx < this.Source.NumberOfSections (this); idx++) {
var headerHeight = this.Source.GetHeightForHeader (this, idx);
var vwContent = this.Source.GetViewForSection (this, idx);
var sectionFrame = new CGRect (new CGPoint(vwContent.Frame.X, vwContent.Frame.Y - headerHeight), new CGSize(vwContent.Frame.Width, headerHeight + vwContent.Frame.Height));
var scrollContent = new CGRect (this.scrollView.ContentOffset.X, this.scrollView.ContentOffset.Y, this.scrollView.Frame.Width, 1.0f);
if (sectionFrame.IntersectsWith (scrollContent)) {
this.floatHeader (idx);
 } else if (idx > this.lastFloatHeaderIdx) { // This is an unnecessary optimization. Appears to have no effect.
var inlines = this.inlineConstraints [idx];
if (inlines.Count > 0 && inlines [0].Priority < (float)UILayoutPriority.DefaultHigh) { // This is also an unnecessary optimization. Appears to have no effect.
this.inlineHeader (idx);
}
}
}
}
}
I’ve done some additional troubleshooting by added logging to the ViewWillLayoutSubviews and UpdateViewConstraints of the child UIViewControllers, and I can see that when a header is floated, a layout pass is done on the previous content view and all views below it. I believe this is the cause of the hesitation. I don’t think its a coincidence that the layout pass includes the previous content. To float the header, I have to deprioritize the constraint pinning its top edge to the bottom of the previous content view and increase the priority on the constraint pinning its top edge to the top edge of the UIScrollView.
But since the size and position of the content views inside the UIScrollView don’t change, I don’t think I should be incurring a layout pass on anything. And, I’ve found that sometimes I don’t. For example, if I flick to quickly scroll to the bottom, the headers are floated one after the other as expected, but no layout passes occur — at least not until the scroll velocity slows. I’ve included a screencast of my prototype running in the simulator, with console output.
Screencast of prototype running in the simulator with console output
I’ve also included a link to the source.
Archive of source

Answer 1

While I think you'd probably be better served addressing your mentioned performance problems via UITableView rather than reinventing UITableView, there are definitely some places here that look suspicious. You should first run your code through Instruments to see where the real problems are. Trying to optimize without spending some time profiling is usually a goose-chase.
But still, let's look at some parts of your loop. Loops are often where are problems are.
for (var idx = 0; idx < this.Source.NumberOfSections (this); idx++) {
var headerHeight = this.Source.GetHeightForHeader (this, idx);
var vwContent = this.Source.GetViewForSection (this, idx);
var sectionFrame = new CGRect (new CGPoint(vwContent.Frame.X, vwContent.Frame.Y - headerHeight), new CGSize(vwContent.Frame.Width, headerHeight + vwContent.Frame.Height));
var scrollContent = new CGRect (this.scrollView.ContentOffset.X, this.scrollView.ContentOffset.Y, this.scrollView.Frame.Width, 1.0f);
This is calling a lot of functions repeatedly that you shouldn't need to. NumberOfSections should only be called once. GetHeightForHeader had better be very cheap, or else you should cache its results in an array. Similarly GetViewForSection. If that isn't a simple array lookup, you should turn it into one. You're also generating scrollContent for every section, but it's always the same.
Finally, I would give a strong look at floatHeader and inlineHeader. Make sure that these already know their exact values and don't have to calculate a lot of stuff. Your loop should do nothing but find what view has a range of Y coordinates that overlap the current Y coordinate (you don't need a full IntersectsWith, just the Y coordinate), and then adjust either 1 or 2 view's Y coordinate (the current floating view, or the previous floating view and the new one). You shouldn't need anything else going on here.
But step one is to run it through Instruments and see what jumps out.