How to install a floating layout constraint programmatically - objective-c

Question

According to Apple, we can create floating views in a scroll view by adding a constraint to something outside of the scroll view.
Evidence #1:
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.
Evidence #2:
Creating Anchored Views Inside a Scroll View
You may find you want to create an area inside a scroll view that doesn’t move when a user scrolls the contents of the scroll view. You accomplish this by using a separate container view.
This works great when the constraint is created before the scroll view has scrolled (e.g. via Interface Builder), but if I try to create said constraint after a scroll view has been scrolled, I get incorrectly positioned views.
How do I create this anchored or floating constraint programmatically even after the scroll view has been scrolled?
I am using the following code to install the constraint:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:self.pinkView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.scrollViewContainer
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0];
[self.scrollViewContainer addConstraint:constraint];
And this is what I want it to look like:
(Notice how the pink view is vertically aligned with the cyan view.)
However, if the user scrolls and then taps the button, this is what it ends up like:

Answer 1

TLDR: Floating constraints are special in that they constantly update their constant property as the scroll view is scrolled. Thus, when you create your constraint, you must ensure that is in sync with the scroll view by pre-populating the constant to equal the scroll view's content offset value.
In the simplest example, assume we have a scroll view with a button. When the button is tapped, a floating view should appear within the scroll view.
If the user scrolls before tapping the button, the floating view will not be aligned properly.
The problem is that when you create a floating view via a constraint, you are creating a special constraint which will constantly update its constant value as the scroll view scrolls. (Other constraints never update their constant value as things move around.) When you initially create the constraint, the constant value is initialized to 0, and thus has no idea about what happened to the scroll view so far. Auto layout has not had a chance to sync it with the scroll view since it wasn't installed previously, and thus there was no way for auto layout to know about it.
The reason it works when the constraint is installed before scrolling is because it was installed at 0, and then auto layout is updating its constant automatically for you. Thus you "accidentally" installed the constraint and synced it with the scroll view (since the offset starts off at 0).
By overriding scrollViewDidScroll:, we see evidence of this auto-updating constant:
Constraint constant: 95.00
Constraint constant: 98.50
Constraint constant: 101.50
Constraint constant: 105.50
Constraint constant: 106.50
The solution is to install the constraint with the constant property set to the current scroll view offset:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:self.pinkView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.scrollViewContainer
attribute:NSLayoutAttributeBottom
multiplier:1
constant:self.scrollView.contentOffset.y];
[self.scrollViewContainer addConstraint:constraint];
Other interesting things to note:
If you attempt to install the constraint with a 0 constant on view did appear and the view controller has a navigation bar, it will fail since the scroll view's position has already been moved to 64, which is not the same as 0.
Another way to think of this is this way:
Auto Layout is dumb. There is no way to set the floating view's position to anything but a relative value to the scroll view. Thus Apple was able to fake this effect by doing something tricky: go through all constraints that involve floating views, and continually update their constant property to reflect the scroll view's content offset.

Answer 2

Another alternative would be to make your scroll view a UICollectionView instead and make the floating view a supplementary view. Then you float it in your layout by implementing layoutAttributesForElementsInRect:
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *layoutAttributes = [super layoutAttributesForElementsInRect:rect];
NSMutableArray *mutableAttributes = [layoutAttributes mutableCopy];
UICollectionViewLayoutAttributes *floatingViewAttributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:#"my floating view" withIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]];
CGFloat floatingViewY = (self.collectionView.frame.size.height - floatingViewHeight) + self.collectionView.contentOffset.y;
CGRect frame = CGRectMake(floatingViewX, floatingViewY, floatingViewWidth, floatingViewHeight);
floatingViewAttributes.frame = frame;
floatingViewAttributes.zIndex = someLargePostiveInteger;
[mutableAttributes addObject:floatingViewAttributes];
return mutableAttributes;
}
A UICollectionView might not be appropriate for your application, but I thought I'd throw it out there as a possibility.