[UIKit] TabBar 숨기기 및 보이기(feat. animation)

일단 이글의 발단은 이전글인 탭바와 네비게이션뷰 동시에 적용하기 에서 시작됩니다.

 

현재 만들고 있는 앱에서 탭바와 네비게이션뷰를 동시에 구현하는데에는 성공했습니다.

하지만 버튼을 눌렀을때 다른 뷰컨으로 스토리보드를 전환하면서 탭바가 남아있더라구요?

그래서 탭바를 숨기는 방법을 알아봤습니다.

 

탭바 숨기기

매우 쉽습니다. 스토리보드상에서도 옆에 Inspector에서 할수있다고 합니다

그렇지만 우린 항상 숨겨놓고 싶은게 아니니까,

다시말해 특정 상황에서만 작동하도록 하고싶으니까 코드로 적용해봅시다.

tabBarController?.tabBar.isHidden = true

간단합니다. 위의 코드를 실행하고싶은 메소드안에 적으면 해당 메소드가 실행될때 바로 숨겨지겠죠?

 

근데 이제 애니메이션을 곁들인

이제 이게 좀 복잡하게 느껴질 수 있습니다.

우선 이전에는 간단하게 속성만 하나 바꾸는 거였지만 이번에는 UIView의 animate메소드를 사용할겁니다.

일단 구조는

UIView.animate(withDuration:, animations:, completion:)

이며 실제로 쓰는방법은 아래와 같습니다.

UIView.animate(withDuration: 실행될 초, animations: {
    //애니메이션 내용
}, completion: { in
    //애니메이션 끝나면 실행될 내용
})

withDuration에 얼마동안 실행될지 초 단위의 숫자를 입력합니다.

animations에 보여주고싶은 애니메이션 클로져를 입력합니다.

completion에 끝나면 실행될 클로져를 입력합니다.

 

해서 일단 결과적으로 작성될 메소드를 보여드리면 이렇습니다.

extension UITabBar {
	func changeTabBar(hidden:Bool, animated: Bool){
    	if self.isHidden == hidden { return }
        let frame = self.frame
        let offset = hidden ? frame.size.height: -frame.size.height
        let duration:TimeInterval = (animated ? 0.5 : 0.0)
        self.isHidden = false
        
        UIView.animate(withDuration: duration, animations: {
        	self.frame = frame.offsetBy(dx: 0, dy: offset)
        }, completion: { (true) in
        	self.isHidden = hidden
        })
        
    }
    
}

일단 해당 메소드는 보이는것처럼 여러 뷰컨에서 쓸수 있도록 하기 위해 UITabBar에 확장해놨습니다.

 

파라미터는

숨길지 보일지 결정하는 "hidden: Bool", 애니메이션을 구현할지 결정하는 "animated: Bool"

두가지 입니다.

 

동작을 어떻게 하는지 순서대로 봅시다.

1. 이미 숨겨져있는데 또 숨기려하거나 보이는데 또 보이게 하려는게 말이 안되니까 if문으로 체크합니다.

 

2. self의 frame을 frame에 저장합니다.

여기서 self는 tabBarController?.tabBar.changeTabBar로 불러오도록 extension한것이므로 tabbar를 의미합니다.

그리고 frame은 CGRect객체로 여기서는 tabbar의 사각형태인 크기, 위치등을 의미합니다.

 

3. offset값을 hidden에 따라 frame의 높이만큼 지정합니다.

4. duration을 TimeInterval 변수로 선언하는데 이 역시 animated의 값에 따라 딜레이를 줄지 말지 결정합니다.

5. tabBar가 숨겨져있던 아니던 일단 false를 줍니다. 이렇게 해야 일단은 화면상에 보이는 것이기에

    숨겨진상태에서 보여지는 애니메이션도 정상적으로 작동합니다.

 

6. UIView.animate 메소드를 실행합니다. 이때 앞서 결정된 duration, offset, hidden값을 이용합니다.

 

어때요 참 쉽죠?

아래 스택오버플로우와 블로그를 참고했습니다. 둘을 적절히 합쳐서 결론적으로 extension으로 빼서 어느 뷰컨이던 따로 선언하고 호출할 필요없이 바로 쓸수있게 만들어놨습니다.

 

스택오버플로우

https://stackoverflow.com/questions/31928394/ios-swift-hide-show-uitabbarcontroller-when-scrolling-down-up/31930858#31930858

iOS/Swift - Hide/Show UITabBarController when scrolling down/up

첫번째 블로그

https://me.innori.com/2594

swift UITabbar 숨김 애니메이션 만들기

두번째 블로그

https://g-y-e-o-m.tistory.com/60

[SWIFT] 스크롤할 때, 하단의 탭바 숨기기(보이기)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

swift - tabbar hide and show / silde up, slide down