In this blog post, we’ll discuss a common scenario in iOS development: adjusting the layout of your views based on the presence of a navigation bar and the safe area insets of the device. This is particularly relevant for devices with notches, like the iPhone X and later models, where the safe area insets can affect the positioning of your views. Let’s start by examining a snippet of Swift code:

This code is doing a few things:

Checking for a navigation bar: The if let navigationBar = self.navigationController?.navigationBar line checks if the current view controller is embedded in a navigation controller and has a navigation bar.

Calculating the navigation bar height: If a navigation bar exists, the code calculates its height with navigationBar.bounds.height.

Calculating the total height: The totalHeight is calculated as the distanceFromTop (a predefined constant) minus the navigationBarHeight. This gives us the distance from the top of the view to the desired position, taking into account the height of the navigation bar.

Adjusting for safe area insets: The code then checks the top safe area inset of the first window of the application. The safe area insets represent the parts of the view that are not covered by system UI, like the status bar, notch, or home indicator. The top safe area inset is the distance from the top edge of the window to the top edge of the safe area.

Adjusting the final total height: Depending on the value of the top safe area inset, the code adjusts the finalTotalHeight:

If the top safe area inset is greater than or equal to 51, the code adds 5.0 to the totalHeight. This could represent a situation where there is a “dynamic island” (a UI element that adjusts its position based on the safe area insets) at the top of the screen.

If the top safe area inset is greater than or equal to 20, the code leaves the totalHeight as it is. This could represent a situation where there is a notch at the top of the screen.

If the top safe area inset is less than 20, the code sets the finalTotalHeight to 0. This could represent a situation where there is no notch and no “dynamic island” at the top of the screen.

Setting the top constraint: Finally, the code sets the top constraint of the view to be equal to the finalTotalHeight from the superview’s top edge.

This code demonstrates how you can adjust your layout based on the presence of a navigation bar and the safe area insets of the device. By taking these factors into account, you can ensure that your views are positioned correctly on all devices, regardless of their physical characteristics.