Flipping Notch

Updated 31 August 2020


What Flipping Notch

Flipping Notch is not a framework, it is just an Xcode project, embracing the notch.

1. Put a UICollectionView and constraint it in a ViewController.

The image below shows an example how to constraint it.

2. Add a cell in the UICollectionView.

3. Set up the UICollectionView in the ViewController by conforming to UICollectionViewDataSource.

4. The Notch View

  • Instantiate a view that represents the notch. The notchViewBottomConstraint is used to position the notchView into the view.

After instantiating the notchView, add it as a subview its parent view.  The notchView have a black background and rounded corners.  translatesAutoResizingMaskIntoConstraints needs to be set to false because we want to use auto layout for this view rather than frame-based layout.  Then, the notchView is constrained to the center of its parent view, with the same width as the notch, a height of (notch height - maximum scrolling offset what we want to give) and a bottom constrained to its parent view topAnchor + notch height.

The result in an iPhone 8:


5. Reacting while scrolling

(Looks clearer in an iPhone 8 what we are trying to do)

  • To do this, first we have to conform our ViewController to UICollectionViewDelegate and call scrollViewDidScroll delegate function. In there we write the logic to move the notchView down.
  • The scrollView should scroll until it reaches the maximum scrolling offset what we want to give
  • The bottom constrained of the notchView will increase while scrolling.

6. Drop the view from the notch

  • When the scroll did end dragging we want to create the view that will be part of the flipping animation.

  • We create the animatableView, reset notchBottomConstraint, and move down the collectionView and drop the animatableView (notchView clone) with an animation and we round its corners.

7. Flip it

  • After dropping the view, a snapshot of the collectionview cell is taken, the image is set on the animatableView and it is flipped with an animation.


The animation works as expected only in iPhone X in portrait mode


  •  when you implement a NavigationBar please include the case.

For more Blogs please click here


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home