iPhone X - space above safe area issue - ios

Question

This question does already poses the exact same issue that I'm having:
iPhone X - How are we supposed to handle the space above table section headers? It's showing through the content
I've got a UICollectionView with a header at the top which holds a few buttons.
When the UICollectionView scrolls up, so it goes under the header and then shows through in the space above the header.
Unfortunately I'm not quite following the answer given by Matt, how does one:
"It's just a matter of giving the table view controller a parent view controller with a black background. You can do that in code, or you can configure it entirely without code in the storyboard."
I would of contacted Matt directly but there isn't an option for this.
EDIT:
Screenshot of my storyboard, would greatly appreciate advice on what I need to do (please talk as if you would to a dog or small child'(!)

Answer 1

Basically, Apple really doesn't support a table view controller or collection view controller that isn't a child view controller of some surrounding view controller. It could be a custom parent view controller (as in #AamirR's answer), but the most common approach is to put it inside a navigation interface (a UINavigationController). Now the navigation bar occupies the top of the screen. It automatically grows up behind the "notch" in the iPhone X. It covers the cells as they go above the header.
If you look at Apple's apps, they all work like that. For example, look at the Moments view in the Photos app, or the Month view in the Calendar app. They all have a navigation bar at the top.
So, embed your Subject View Controller in a Navigation Controller.
iPhone 5:
iPhone X:

Answer 2

You have to create a parent view controller for UICollectionViewController and add SubjectViewController as a child of that parent, like so:
class SubjectParentViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .gray
// Add collection view as a child view controller
let collectionViewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "SubjectVC")
collectionViewController.willMove(toParentViewController: self)
self.addChildViewController(collectionViewController)
let collectionView: UIView = collectionViewController.view
collectionView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(collectionView)
collectionViewController.didMove(toParentViewController: self)
// add auto-layout constraints to layout guides
var guide: UILayoutGuide!
guide = self.view.layoutMarginsGuide
collectionView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
collectionView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
guide = self.view.safeAreaLayoutGuide
collectionView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0).isActive = true
collectionView.bottomAnchor.constraintEqualToSystemSpacingBelow(guide.bottomAnchor, multiplier: 1.0).isActive = true
}
}
Edit your storyboard with these 2 steps:
Create a view controller, and set its class to be above custom class SubjectParentViewController
Move all segues from SubjectViewController to SubjectParentViewController
Finally, create a File SubjectParentViewController.swift and paste the class
This sets UITableViewController/UICollectionViewController's view aligned to layout margins and safe-area guides: