이번 포스팅에서는 iOS에서 자주 사용되는 탭바 컨트롤러의 슬라이드 애니메이션 효과에 대해 알아보겠습니다.
슬라이드 애니메이션 효과는, 유저가 좌우로 Swipe Gesture 인풋을 주면, 자연스럽게 슬라이딩되면서 다음 탭 또는 이전 탭으로 화면이 전환되는 것을 말합니다.
만약 이 효과를 적용하지 않으면, 좌우로 스와이프를 해도 아무 것도 일어나지 않고, 탭바를 직접 클릭해서 화면을 전환해야겠죠?
생각보다 코드는 단순합니다.
스위프트에서 Swipe Gesture을 인식해서, 다음 화면으로 넘겨주는 원리인데요.
다음 순서로 진행합니다.
- Tab Bar Controller에 연결되는 swift 파일을 생성합니다. (탭바컨트롤러를 상속)
- 해당 스위프트 파일 안에 아래 코드를 입력합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
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
})
}
}
|
cs |
앱 실행 시, 유저의 제스쳐에 따라 화면이 자연스럽게 이동하는 것을 볼 수 있습니다.
'Developer > iOS, Swift' 카테고리의 다른 글
[Swift] 이미지에 Tint 색상 입히기 (programmatically) (0) | 2019.12.08 |
---|---|
[Swift] Alert Controller 기본 사용법 (0) | 2019.12.07 |
[Swift] 일반 View, ImageView, Label 액션 이벤트 생성하기 (2) | 2019.11.20 |
[Swift] 네이버 장소검색(search Place) API 사용하기 (2) | 2019.11.17 |
[Swift] Protocol과 delegate를 이용하여 뷰 간 데이터 전달하기 (271) | 2019.11.10 |
댓글