Autolayout with a dynamic UIView in a ScrollView

Question

I'm using a mix of Xamarin and XCode Interface Builder to build my UI.

As you can see in the screen shots the PlaceholderView at the top can have different content. The problem I'm having is trying to keep the Submit button at the bottom of the ContentView.

I'm using the ScrollView with ContentView approach and setting constraints in IB.

In ViewDidLoad() I load the contents for the PlaceholderView and then I set the height constraint of the PlaceholderView programmatically.

public override void ViewDidLoad()
{
   onlineSuspectDetails = OnlineSuspectDetailsView.Create();
   onlineSuspectDetails.BackgroundColor = UIColor.Gray;                    
   SuspectDetailsPlaceholderView.AddSubview(onlineSuspectDetails);
   SuspectDetailsPlaceholderView.HeightAnchor.ConstraintEqualTo(onlineSuspectDetails.HeightAnchor, 1).Active = true;
}

Now of course I had to set a Top and Bottom constraint for the Submit Button so it's working for one type but I can't see a way to change it depending on height of the PlaceholderView in order to keep the Submit Button at the bottom.

If I could access the Bottom constraint I can calculate the new Top constraint but I can't find a way to access the Bottom constraint. How can I do this?

Are there any alternative suggestions to how I can solve this problem?

Answer 1

Hmmm... a bit tricky...

There may be better ways to do it, but here is one approach:

• Orange = main view background
• Pale Yellow = scroll view background
• Gray = UIView ... "label / field pairs" container; label/field pairs are in a standard UIStackView
• Cyan = UIView ... "details" container
• Dark Green = button
• Red = UIView ... this is the tricky part... is a "Shim" to hold the button at the bottom

View constraints are inset by 8 so we can see them easier than if they're taking up the full screen/view.

Gray view and Details view constraints for positions / sizes are straight-forward (looks like you have no problem with that aspect).

In this method, we use a "Shim" view, and some greater-than-or-equal-to constraints to manage the Button's position.

The Shim is pinned leading and top to Zero, and its Height constraint is set to >= -30 relative to the scroll view height. Its bottom constraint is also set to >= 8 relative to the bottom of the Details view.

This tells auto-layout to put the bottom of the Shim no more than 30-pts from the bottom of the scroll view AND at least 8-pts below the bottom of the Details view.

Then the top of the Submit button is constrained to the bottom of the Shim view.

One "quirk" that I've found when working with scroll views in Interface Builder - it can be really tough (maybe impossible?) to get IB to be happy with the necessary constraints. It will show conflicts, but if you follow IB's "fixes" the desired layout then fails.

I don't actually work with IB / Storyboards, so I just focus on avoiding auto-layout / constraint conflicts at runtime.

This is probably easier to understand by seeing the actual file, so I put this up as a GitHub repo: https://github.com/DonMag/SWMoreScrollViewStuff

Answer 2

How are you actually adding the button to the main view? I have done something like this before by having a master UIView for everything except the button. And then I just put the button below the view and applied auto layout to everything (should just be 0,0,0,0 on the view and button). This way your button is always at the front of your view and you can do everything else in the contained view!