[Swift] Tab Bar Controller 슬라이드 애니메이션 효과 적용하기

이번 포스팅에서는 iOS에서 자주 사용되는 탭바 컨트롤러의 슬라이드 애니메이션 효과에 대해 알아보겠습니다.

슬라이드 애니메이션 효과는, 유저가 좌우로 Swipe Gesture 인풋을 주면, 자연스럽게 슬라이딩되면서 다음 탭 또는 이전 탭으로 화면이 전환되는 것을 말합니다.

만약 이 효과를 적용하지 않으면, 좌우로 스와이프를 해도 아무 것도 일어나지 않고, 탭바를 직접 클릭해서 화면을 전환해야겠죠?

생각보다 코드는 단순합니다.

스위프트에서 Swipe Gesture을 인식해서, 다음 화면으로 넘겨주는 원리인데요.

다음 순서로 진행합니다.

 

 

1. Tab Bar Controller에 연결되는 swift 파일을 생성합니다. (탭바컨트롤러를 상속)
2. 해당 스위프트 파일 안에 아래 코드를 입력합니다.

class TabBarControllerMain: UITabBarController {
 
    
    // Swipe Gesture Recognizer!!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        delegate = self
        
        let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeGesture))
        swipeRight.direction = .right
        self.view.addGestureRecognizer(swipeRight)
        
        let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeGesture))
        swipeLeft.direction = .left
        self.view.addGestureRecognizer(swipeLeft)
 
        // Do any additional setup after loading the view.
    }
 
 
    @objc func handleSwipeGesture(_ gesture: UISwipeGestureRecognizer) {
        
        if gesture.direction == .left {
            if (self.selectedIndex) < 2 { // 슬라이드할 탭바 갯수 지정 (전체 탭바 갯수 - 1)
                animateToTab(toIndex: self.selectedIndex+1)
            }
        } else if gesture.direction == .right {
            if (self.selectedIndex) > 0 {
                animateToTab(toIndex: self.selectedIndex-1)
            }
        }
    }
}
 
extension TabBarControllerMain: UITabBarControllerDelegate  {
    func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
        guard let tabViewControllers = tabBarController.viewControllers, let toIndex = tabViewControllers.firstIndex(of: viewController) else {
            return false
        }
        animateToTab(toIndex: toIndex)
        return true
    }
    
    func animateToTab(toIndex: Int) {
        guard let tabViewControllers = viewControllers,
            let selectedVC = selectedViewController else { return }
        
        guard let fromView = selectedVC.view,
            let toView = tabViewControllers[toIndex].view,
            let fromIndex = tabViewControllers.firstIndex(of: selectedVC),
            fromIndex != toIndex else { return }
        
        
        // Add the toView to the tab bar view
        fromView.superview?.addSubview(toView)
        
        // Position toView off screen (to the left/right of fromView)
        let screenWidth = UIScreen.main.bounds.size.width
        let scrollRight = toIndex > fromIndex
        let offset = (scrollRight ? screenWidth : -screenWidth)
        toView.center = CGPoint(x: fromView.center.x + offset, y: toView.center.y)
        
        // Disable interaction during animation
        view.isUserInteractionEnabled = false
        
        UIView.animate(withDuration: 0.3,
                       delay: 0.0,
                       usingSpringWithDamping: 1,
                       initialSpringVelocity: 0,
                       options: .curveEaseOut,
                       animations: {
                        // Slide the views by -offset
                        fromView.center = CGPoint(x: fromView.center.x - offset, y: fromView.center.y)
                        toView.center = CGPoint(x: toView.center.x - offset, y: toView.center.y)
                        
        }, completion: { finished in
            // Remove the old view from the tabbar view.
            fromView.removeFromSuperview()
            self.selectedIndex = toIndex
            self.view.isUserInteractionEnabled = true
        })
    }
}
 

 

앱 실행 시, 유저의 제스쳐에 따라 화면이 자연스럽게 이동하는 것을 볼 수 있습니다.