[SWIFT] Tạo navigation bar fade animation

Tram Ho

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 backgroundImageshadowImage = UIImage() -> Tạo Transparent Navigation Bar

Ta thêm statusBarView vào extension UIApplication để gọi các properties của status bar.

Bước 2: CollectionView Delegate and DataSource

Bước 3: Tạo fade animation cho navigation bar

Ta set tintColor, backgroundColor, titleColor cho NavigationBarbackgroundColor cho statusBarView.
Giá trị alpha của whiteColorblackColor thay đổi theo giá trị offset.
Khi offset tăng dần đến 1, giá trị alpha = offsetNavigationBar từ từ hiện ra.
Khi offset > 1 (scroll down), ta set offset = 1 -> alpha = 1 và NavigationBar hiện ra 100%.

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

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo