0

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.

Half Times Two
  • 21
  • 4
  • You need to constrain to the top/bottom of the root view, not the top/bottom margins or safe area – Paulw11 Nov 15 '17 at 20:20
  • @Paulw11 You mean constraining to container margins or top & bottom layout guides? That will look different on different devices. – Half Times Two Nov 15 '17 at 21:07
  • I mean the absolute top and bottom edges of the container view, not the margins or layout guides; yes, it will look different on the iPhone X. You end up with a larger bottom border on your view on the iPhone X. The space below the safe area should not contain any user interactive elements, but you can extend your view into that section, effectively putting elements "under" the multi-tasking bar on the iPhone X. Perhaps you could add some images showing what you are trying to achieve – Paulw11 Nov 15 '17 at 21:21
  • @Paulw11 See the image I attached. There wouldn't be any UI elements under the multi-tasking bar, it would be a scrollview with text only. Much like how Safari looks on the iPhone X. How would you add constraints to the "absolute top and bottom edges of the container view"? The problem with doing what I'm doing is that on non-X iPhones, the view would be a bit above the top of the status bar and a bit below the bottom of the screen without manually adjusting the constraint constants. – Half Times Two Nov 15 '17 at 22:42
  • Do you really want the text to go under the multi-tasking bar? It should end above that – Paulw11 Nov 16 '17 at 04:59
  • If you edit the constraint for the top of the image view you can select "superview" instead of "safe area" and set the value to 0 then the top of the image view will be at the top of the visible screen on all devices, but that can result in your image being obscured by the "notch" – Paulw11 Nov 16 '17 at 05:30
  • Thanks, the reason that wasn't working was because I had a table view, but I figured out how to get it working for those as well and posted an answer. – Half Times Two Nov 16 '17 at 21:48

1 Answers1

2

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'
Half Times Two
  • 21
  • 4