General approach for bottom layout guide and different screen formats

Question

So far most, if not all, screens i had developed had 2 kind of behaviours in the context of bottom layout guide:

1. The content is static and need to be anchored at the bottom:

   In this case typically i create a bottom layout guide from the bottom-est vc subview to it's superview (the vc root view, in place of the vc bottom safe area). And this works in both cases if the background color of the bottom aligned view and the root/parent view in the edge of the iphoneX is the same.

   

2. the content is scrollable or has to "overflow" or the background color of bottom subview and vc differ. For example a bottom button or tabbar will have to be aligned to the safe area, but their backgrounds will have to "continue" in the iPhoneX to the non-safe-area.

   In this case i either add a edge-inset/margin to the views that match the unsafe area (leading to an additional margin to normal squared screens) or i will have to adjust the constraint based on the device type.

In the light of these, is anybody aware of any technique to at generalize/simplify the 2nd point? If find it really ugly to have to add device dependent checks for almost every view controller.

This technically happens already with the "automatically adjust view controller edge insets" but only for scrollviews/tableviews.

TLDR; Is it possible to let a view "stretch" to the non-safe-area in the iphoneX? To obtain basically the same behaviour of the NavigationBar but for the bottom of the screen, without hardcoding anything?

Plus: if it is possible to generalize also including the 1st wanted behaviour with a flag or alike.

Answer 1

The way I typically do this:

• Setup the bottom constraint like you have posted
• Setup the top constraint relative to the bottom safe area (instead of the superview) with an offset for the height you want the view to be.

This way if there is safe area the view will stretch down naturally and retain its normal appearance on non-safe area phones, you just have to make sure to layout the contents of that view to stay between the safe area and the top. No device-specific code needed.