[SWIFT] Create navigation bar fade animation

Tram Ho

Development environment:

  • Swift Language Version: Swift 5
  • Xcode: Version 10.3
  • Deployment Target: 12.0

Step 1: Initialize the ViewController screen

We create the ViewController screen as shown below:

In particular, ViewController includes the following components:

  • CollectionView: Add leading, trailing constraint with View’s Safe Area and top, bottom constraint with superView.
  • CollectionViewCell: with Identifier = “CollectionCell”
  • image1: Add top, leading, trailing, bottom constraint with CollectionViewCell. ContentMode = ScaleToFill.

We set backgroundImage and shadowImage = UIImage () -> Create Transparent Navigation Bar

We add statusBarView to the UIApplication extension to invoke the properties of the status bar.

Step 2: CollectionView Delegate and DataSource

Step 3: Create fade animation for the navigation bar

We set tintColor , backgroundColor , titleColor for NavigationBar and backgroundColor for statusBarView . The alpha values ​​of whiteColor and blackColor change according to the offset value. As the offset increases to 1, the value alpha = offset and the NavigationBar slowly appear. When offset > 1 (scroll down), we set offset = 1 -> alpha = 1 and the NavigationBar appears 100%.

And this is the result:



Link github:


Share the news now

Source : Viblo