iOS) 탭바를 버튼처럼 사용하기

 

 

유튜브처럼 일부 앱의 경우에는 특정 탭바를 버튼처럼 사용하는 경우가 있다.

 

일단 큰 줄기(?)를 보자면

1. 버튼으로 사용하려는 탭바의 기능(View가 전환되는 기능)을 작동하지 않도록 만든다.

2. 탭바 버튼으로 작동할 기능을 작성한다.

3. 탭바 버튼에 사용할 이미지를 적용한다.

 

그러하다.. 이런 느낌?

 

 

---

 

탭바 버튼 만들기

 

1. TabBarController에 5개의 ViewController를 연결한다. (탭바 버튼으로 사용할 View 포함)

 

 

2. 탭바 컨트롤러에 적용할 CustomTabBarController를 생성하고, 탭바 컨트롤러의 클래스를 CustomTabBarController로 설정해준다.

class CustomTabBarController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // delegate 지정
        self.delegate = self
    }
}


// UITabBarControllerDelegate 채택
extension CustomTabBarController: UITabBarControllerDelegate {
    
    // return값이 true = View전환 기능 on, false = off
    func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {

        // tag는 스토리보드 탭바의 속성에서 지정
        if viewController.tabBarItem.tag == 4{
            
            // 탭바 버튼(tag == 4)이 눌렸을 때 동작할 코드
            // 아래 코드는 BottomSheet를 올려주는 코드
            print("+버튼")
            guard let tabbarBottomSheetVC = storyboard?.instantiateViewController(withIdentifier: "TabBarButtonNavigationController") as? UINavigationController else {
                return false
            }
            let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: tabbarBottomSheetVC)
            bottomSheet.mdc_bottomSheetPresentationController?.preferredSheetHeight = 500
            present(bottomSheet, animated: true)
            
            return false
        }

        return true
}

 

위 코드의 extension함수에서는 탭바 아이템의 tag == 4인 탭바는 false를 리턴시키고(View 전환 기능을 끄고) BottomSheet가 올라오도록 코드를 작성했다.

 

 

탭바 아이템의 tag지정 방법

 

 

3. 탭바 버튼으로 사용할 이미지의 설정값을 Original Image로 변경한다.

이미지 파일 선택하고  Render As값을 Original Image로 변경

 

 

4. 탭바 버튼을 사용할 VC의 TabBarItem 이미지를 변경

 

 

5. 탭바 버튼의 크기를 Image Inset을 사용하여 적당히 조절해준다.