Scroll UIView to expand into iPhone X top notch

Question

I have the following layout:

• UIImageView
• UIView (with UILabel)
• UITableView

As the tableView is scrolled up, the height of the imageView is decreased before actually scrolling the tableView. The following code is used for that:

let headerImageViewMaxHeight: CGFloat = 200
let headerImageViewMinHeight: CGFloat = UIApplication.shared.statusBarFrame.height

@IBOutlet var headerImageViewHeightConstraint: NSLayoutConstraint!
@IBOutlet var headerImageView:                 UIImageView!

@IBOutlet var subtitleView:  UIView!
@IBOutlet var subtitleLabel: TextLabel!

private var contentOffsetDictionary: NSMutableDictionary!

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.isKind(of: UICollectionView.self) {

        let horizontalOffset: CGFloat = scrollView.contentOffset.x
        let collectionView: UICollectionView = scrollView as! UICollectionView
        contentOffsetDictionary.setValue(horizontalOffset, forKey: collectionView.tag.description)

    } else if scrollView == tableView {

        let y: CGFloat = scrollView.contentOffset.y
        let newHeaderImageViewHeight: CGFloat = headerImageViewHeightConstraint.constant - y

        if newHeaderImageViewHeight > headerImageViewMaxHeight {
            headerImageViewHeightConstraint.constant = headerImageViewMaxHeight

        } else if newHeaderImageViewHeight < headerImageViewMinHeight {
            headerImageViewHeightConstraint.constant = headerImageViewMinHeight

        } else {
            headerImageViewHeightConstraint.constant = newHeaderImageViewHeight
            scrollView.contentOffset.y = 0

        } 
    }
}

The following two images shown the current states of scrolled down or up:

Scrolled down (initial state).

Scrolled up.

As you can see, initially the grey bar saying To Table -> Table 1 is scrolled down and is about 60 high. When it's scrolled up, it scrolles until the safeArea. What I want to achieve is that once it reaches the safe area, it continues scrolling up into the safeArea (top notch), while keeping the text in exactly the same place (topSpace to safeArea of the text should stay the same). So, basically growing the UIView to go into the safeArea.

This image shows the ViewController layout.

• Header View can be ignored, as that is aligned to the top of the viewController, but no constraints to anything else than superView.
• TopSpace of the view in question, is 0 to the UIImageView.

Changing headerImageViewMinHeight to 0, makes it scroll up to the actual top of the screen, without expanding it. So this seems like a good start, but needs some extra logic or constraints.

As the UIView doesn't have a specific height constraint, changing its UILabel's top space from = 16 to => 16, there's the warning of missing Y constraint or height. Otherwise that, together with UILabel's top space to the viewController's safeArea of => 8 sounds like it could work.

Any ideas are welcome.

EDIT: The following picture basically shows what I want, except that here the UILabel's top is not aligned to the safe area. What this picture shows is achieved by changing headerImageViewMinHeight to 0.

Answer 1

Add constriant

Uncheck constraint to margin

double click on Align bottom/ Align top

click on last baseline (for bottom)/ first baseline (for top constrraint)

DONE