Môi trường phát triển:
- Swift Language Version: Swift 5
- Xcode: Version 10.3
- Deployment Target: 12.0
Bước 1: Khởi tạo màn hình ViewController
Ta tạo màn hình ViewController như hình dưới đây:
Trong đó, ViewController gồm các thành phần sau:
- CollectionView: Thêm leading, trailing constraint với View’s Safe Area và top, bottom constraint với superView.
- CollectionViewCell: với Identifier = “CollectionCell”
- image1: Thêm top, leading, trailing, bottom constraint với CollectionViewCell. ContentMode = ScaleToFill.
Ta set backgroundImage và shadowImage = UIImage() -> Tạo 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)] } } |
Ta thêm statusBarView vào extension UIApplication để gọi các properties của status bar.
1 2 3 4 5 6 | extension UIApplication { var statusBarView: UIView? { return value(forKey: "statusBar") as? UIView } } |
Bước 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) } } |
Bước 3: Tạo fade animation cho navigation bar
Ta set tintColor, backgroundColor, titleColor cho NavigationBar và backgroundColor cho statusBarView.
Giá trị alpha của whiteColor và blackColor thay đổi theo giá trị offset.
Khi offset tăng dần đến 1, giá trị alpha = offset và NavigationBar từ từ hiện ra.
Khi offset > 1 (scroll down), ta set offset = 1 -> alpha = 1 và NavigationBar hiện ra 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] } } |
Và đây là kết quả:
Tài liệu tham khảo:
https://www.youtube.com/watch?v=rNy6aQQYbuY
Link github:
https://github.com/ndhuy96/SwiftTips/tree/navBarFadeAnimation