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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | final class ViewController: UIViewController { @IBOutlet private weak var collectionView: UICollectionView! override func viewDidLoad() { super.viewDidLoad() config() } private func config() { // CollectionView's Settings collectionView.delegate = self collectionView.dataSource = self collectionView.contentInsetAdjustmentBehavior = .never // NavigationController's Settings title = "Navigation Bar" navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) navigationController?.navigationBar.shadowImage = UIImage() navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor (red: 1.0/255.0, green: 1.0/255.0, blue: 1.0/255.0, alpha: 0)] } } |
We add statusBarView to the UIApplication extension to invoke the properties of the status bar.
1 2 3 4 5 6 | extension UIApplication { var statusBarView: UIView? { return value(forKey: "statusBar") as? UIView } } |
Step 2: CollectionView Delegate and DataSource
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | extension ViewController: UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 10 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath) as UICollectionViewCell return cell } } extension ViewController: UICollectionViewDelegateFlowLayout { func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: collectionView.frame.size.width, height: 300) } } |
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%.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | extension ViewController { func scrollViewDidScroll(_ scrollView: UIScrollView) { var offset = scrollView.contentOffset.y / 150 if offset > 1 { offset = 1 } let whiteColor = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: offset) let blackColor = UIColor (red: 1.0/255.0, green: 1.0/255.0, blue: 1.0/255.0, alpha: offset) navigationController?.navigationBar.tintColor = blackColor navigationController?.navigationBar.backgroundColor = whiteColor UIApplication.shared.statusBarView?.backgroundColor = whiteColor navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: blackColor] } } |
And this is the result: 
References:
https://www.youtube.com/watch?v=rNy6aQQYbuY
Link github:
https://github.com/ndhuy96/SwiftTips/tree/navBarFadeAnimation