Fixed / Float view in UIScrollView with AutoLayout

Question

In this technical Note Apple states that you can make a subview of UIScrollView fixed / floating by adding constraints to UISCrollView's superview. I tried that but I'm doing something wrong and I can't figure out whats the problem.

Note that you can make a subview of the scroll view appear to float (not scroll) over the other scrolling content by creating constraints between the view and a view outside the scroll view’s subtree, such as the scroll view’s superview.

That's what I did. I have a UIScrollView already set up and try to add the fixed view to the top of the scrollview like the following:

_testOverlay = [[UIView alloc] init];
_testOverlay.backgroundColor = [UIColor blueColor];
_testOverlay.translatesAutoresizingMaskIntoConstraints = NO;
[self.scrollView addSubview:_testOverlay];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[_testOverlay]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_testOverlay)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_testOverlay(64)]-(>=0)-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_testOverlay)]];

However, this does not work, the added view will move along with the scrollview and does not 'float'. Any ideas whats wrong here?

Answer 1

between the view and a view outside the scroll view’s subtree, such as the scroll view’s superview.

This part is critical. self.scrollView is a superview of _testOverlay. So, in @"|[_testOverlay]|" vertical bars reference self.scrollView. You have to replace this constraint with the constraint between _testOverlay and (I suppose) self.view. I'm not sure if it's possible with the visual format language, but you certainly can do it with constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant. It would go like this (I won't post the whole code, because it's looong):

[self.view addConstraint:[NSLayoutConstraint
                          constraintWithItem:self.view
                          attribute:NSLayoutAttributeLeft
                          relatedBy:NSLayoutRelationEqual
                          toItem:_testOverlay
                          attribute:NSLayoutAttributeLeft
                          multiplier:1.0
                          constant:0]];

Answer 2

Add the overlay view to scroll view's superview, not the scroll view itself.

[self.view addSubview:_testOverlay];