184

Custom navigation trainsition iOS

Là một Developer iOS thì ai cũng quen với UINavigationController và chúng ta thường quen với các animation default. Nhưng với một số thiết kế đặc biệt chúng ta cần phải custom animation cho view controller transition.

Để custom view controller transition bạn cần hiểu về UIViewControllerAnimatedTransitioning

I. Overview UIViewControllerAnimatedTransitioning

UIViewControllerAnimatedTransitioning là một protocol cho phép bạn implement các animation cho custom view controller transition

Để implement protocol này thì có 2 việc ta cần phải làm

• Xác định duration cho animation bằng func

func transitionDuration( using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval

• Thực hiện animation traisition cho custom view controller

func animateTransition(using transitionContext: UIViewControllerContextTransitioning)

• UIViewControllerContextTransitioning bao gồm tất cả thông tin về transitioning như: toView, fromView, containerView…

Như vậy để custom view controller transition nó sẽ gói gọn trong func animateTransition

II. Sử dụng UIViewControllerAnimatedTransitioning cho custom view controller transition

Ở đây tôi sẽ hướng dẫn các bạn thực hiện custom animation push và pop thành animation của present(push -> bottom to top và pop -> top to bottom)

1. Tạo enum cho NavigationTransitionStyle

enum NavigationTransitionStyle {
    case nomal
    case bottom
}

• nomal: transition mặc định
• bottom: custom animation transition từ bottom to top cho push và ngược lại cho pop

2. Tạo class implement UIViewControllerAnimatedTransitioning

Để hỗ trợ cho pop và push ta cần define các variable như sau:

class CustomNavigationAnimationTransition: NSObject, UIViewControllerAnimatedTransitioning {
    var popStyle: Bool = false
       var navigationStyle: NavigationTransitionStyle = .nomal
}

• popStyle: flag để xác định là pop hay push
• navigationStyle: xác định animation dạng nomal hay bottom

2.1 Cài đặt duration cho animation

    func transitionDuration( using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.5
    }

2.2 Cài đặt method animationTransition cho view controller

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
}

• Điều hướng nếu là pop thì chúng ta sẽ xử lý animation pop ở method animatePop

if popStyle {
    animatePop(using: transitionContext)
    return
}

• Thực hiện get các variable cần thiết để animation view controller: fromView, toView, frameTransition, frameOffset

let fromView = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)!
let toView = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)!
let frameTransition = transitionContext.finalFrame(for: toView)
var frameOffset = frameTransition.offsetBy(dx: 0, dy: frameTransition.height)
if navigationStyle == .nomal {
     frameOffset = frameTransition.offsetBy(dx: frameTransition.width, dy: 0)
}

• Set frame cho toView và insert toView, fromView vào trong containerView

toView.view.frame = frameOffset
transitionContext.containerView.insertSubview(toView.view, aboveSubview: fromView.view)

• Thực hiện animation bottom to top cho push

UIView.animate( withDuration: transitionDuration(using: transitionContext),
                animations: {
                    toView.view.frame = frameTransition
                },
                completion: {_ in
                    transitionContext.completeTransition(true)
                })

2.3 Cài đặt method animatePop

Tương tự như ở method animationTransition ở đây ta sẽ bỏ bước set frame cho toView và thực hiện animation cho fromView

func animatePop(using transitionContext: UIViewControllerContextTransitioning) {

        let fromView = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)!
        let toView = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)!

        let frameTransition = transitionContext.initialFrame(for: fromView)
        var frameOffset = frameTransition.offsetBy(dx: 0, dy: frameTransition.height)
        if navigationStyle == .nomal {
            frameOffset = frameTransition.offsetBy(dx: frameTransition.width, dy: 0)
        }
        transitionContext.containerView.insertSubview(toView.view, belowSubview: fromView.view)

        UIView.animate( withDuration: transitionDuration(using: transitionContext),
                        animations: {
                            fromView.view.frame = frameOffset
                        },
                        completion: {_ in
                            transitionContext.completeTransition(true)
                        })
}

3. Sử dụng CustomNavigationAnimationTransition trong view controller

• Khỏi tạo variable custom animation bên trên

private let navigationAnimationTransition = CustomNavigationAnimationTransition()

• Sau đó config navigationStyle cho view controller và set delegate cho navigation controller

navigationAnimationTransition.navigationStyle = .bottom
navigationController?.delegate = self

• Implement UIViewControllerTransitioningDelegate trong view controller

extension ViewController: UIViewControllerTransitioningDelegate {
    func navigationController(
        _ navigationController: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from fromVC: UIViewController,
        to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        navigationAnimationTransition.popStyle = (operation == .pop)
        return navigationAnimationTransition

    }
}

Như vậy chúng ta vừa mới hoàn thành custom view controller transition. Ngoài cách tạo animation như trên thì bạn có thể làm bất cứ dạng animation nào mà bạn muốn.

Tài liệu tham khảo: https://developer.apple.com/documentation/uikit/uiviewcontrolleranimatedtransitioning