How to Hide Content on Status Bar When Scrolling on iPhone X

797 Views Asked by At

I have a UICollectionView that scrolls vertically. The collection view is a form. It has multiple sections, each section has a few items in it. The top section has a header which is pinned to the top of the view so it remains in place as the content scrolls.

The problem is, as I scroll the content up, the items show against the status bar. How do I get the items to be hidden as I scroll? Can I set a color to the status bar, or set an inset on the view?

Notice in the behavior in the screenshot below:

enter image description here

1

There are 1 best solutions below

2
On

The usual thing is to pin the top of the collection view to the top Safe Area layout guide.

(But the whole thing looks a lot better, in my opinion, if you are also inside a navigation controller.)

EDIT It appears from your subsequent query (in a comment) that you are using a UICollectionViewController (you did not mention that in your question). So the answer boils down to: never use a "bare naked" UICollectionViewController. Always use it as a child view controller, in one of these ways:

  • As the child of a UINavigationController, because the collection view's top will then be concealed by the navigation bar

  • Or, through a Container View and an embed segue, because then you can pin the container view's top to the safe area top.