How to remove extra space between the Navigation Bar and the Scroll View?

Objectives of the blog

After reading this blog we will be able to understand the reason for the extra space between top Navigation Bar and Scroll View in iOS app in versions iOS 7 to iOS 10.

Problem Statement

When we add a scroll view or table view (any scrollable view) in a view controller that contains a Navigation Bar at top, we face a common issue that were is some extra space between the top Navigation Bar and the Scroll View.

Why the current issue is there

From iOS 7 to iOS 10, when we add a Navigation Bar on top of any ViewController, then Xcode provides us an option to make the Navigation bar translucent. So that we can see through the Navigation Bar and the scrolling of the page can be seen through the navigation bar.

Now the reason for the issue is that when a Scroll View is added in the ViewController and Navigation Bar is set and translucent, the ScrollView leaves a margin from the main view for navigation bar. But the navigation bar added on the run time and it moves the main view downed so that Navigation Bar can fit on the top. So in that case, the view is shifted downward by Navigation bar and scroll view leaves margin for Navigation bar. Here we observe that the extra spacing added two times.

This was the only reason that we see extra space between the Navigation Bar and the Scroll view.

Procedure to Solve the issue-

There are two ways to resolve the issue. In both the cases we restrict the scroll view to leave extra margin for the Navigation Bar.

1. We can set the Translucent option for Navigation Bar to “False” in Xcode

— This will make the navigation bar Opaque and then the scroll view is not required to scroll under the Navigation Bar. So that Scroll View will leave no space for Navigation Bar.

In the below Gif you can see that the view’s layout constraint changes when we enable/disable the “Translucent” property of the navigation Bar.

2. We can disable “Adjust Scroll View Insets” property of the ViewController.

— This will restrict the Scroll View to leave extra space for the Navigation bar on top.

Summary

After following the above procedure, you will be able to remove the extra space between the Navigation Bar and Scroll View.

If you face any issues, please feel free to reach us at support@knowband.com. We also provide No Code Mobile App Builder for Prestashop, Opencart, Magento 2 and Woocommerce. Know more here: