Extend the View Underneath the Status Bar and Multi-tasking Bar on iPhone X Without Manually Adjusting Constraints in Code?

Question

I was wondering if there's a way to extend a view to be underneath the status bar and multi-tasking bar of the iPhone X without manually adjusting constraints in code based on the device. Using the safe area, container, container margins and top/bottom layout guides doesn't seem to help because the status bar is a different height on the iPhone X vs the previous iPhones and the safe area ends at the top of the multi-tasking bar whereas it ends at the bottom of the screen for previous iPhones. On top of that, the container margins, and top & bottom layout guides are the same as the safe area so those don't seem to work either. It seems like the only way is to make IBOutlets to the layout constraints and adjust the constants in code based on the device. Is there a way to do this purely through Interface Builder?

Here's an example of what I want to accomplish

Here's how it looks on a non-X iPhone. Notice how the scrollview ends off-screen at the bottom and the pineapple gets cut off at the top.

Answer 1

I figured out how to fix the issue. First turn on safe area in your storyboard, then:

1. for normal view controllers, constrain your view to the superview (top and/or bottom). If you did it right, the constant should be 0 and the view should be flush with the absolute top and/or bottom of the view controller
2. for table views, do step 1, then with your table view still selected, under size inspector, uncheck 'Insets To Safe Area' and set Content Insets to 'Never'