[iOS] 탭에 따라 tabBar 배경, tabBarItem 색상 변경 - Delegate 사용

 📌 필요한 기능

인스타그램 클론코딩을 하면서 탭바를 구현하였는데 메인탭에 진입시에는 흰색 탭바 배경과 검정색의 아이콘들이 필요했고,

릴스탭을 누를 때는 탭바 배경색은 black으로, item들 색은 white로 변경해야 했다.

구현 후 화면은 다음과 같다.

인스타그램 메인

 📌 초기 설정

* 스토리보드로 구현하였기 때문에 인스펙터 창에서 설정해주었습니다.

먼저 초기 설정을 위해 TabBarController가 있는 스토리보드에서 탭바를 선택하고 오른쪽 인스펙터 창에서 Background로 White Color로 설정하였다.

그리고 User Defined Runtime Attributes에서 unselectedItemTintColor와 tintColot를 Black으로 설정하였다.

* tintColor는 선택된 탭바아이템, unselectedItemTintColor는 나머지 탭바아이템 색상이다.

 

이렇게 하면 메인화면으로 진입 시 아래와 같이 나온다.

 

 📌 Delegate

릴스탭을 선택할 경우 색상들을 바꿔주기 위해 Delegate를 사용했다.

코드를 먼저 보고 설명하도록 하겠다.

import UIKit

class TabBarController: UITabBarController {
    
    // MARK: - Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setDelegate()
    }
}

// MARK: - Custom Methods
extension TabBarController {
    private func setDelegate() {
        self.delegate = self
    }
}

// MARK: - UITabBarControllerDelegate
extension TabBarController: UITabBarControllerDelegate {
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        if selectedIndex == 2 {
            tabBar.backgroundColor = .black
            tabBar.tintColor = .white
            tabBar.unselectedItemTintColor = .white
        } else {
            tabBar.backgroundColor = .white
            tabBar.tintColor = .black
            tabBar.unselectedItemTintColor = .black
        }
    }
}

먼저 UITabBarControllerDelegate 프로토콜 채택 작업을 진행한다. 아래 부분에 해당한다.

extension TabBarController: UITabBarControllerDelegate {}

* 저는 가독성을 위해 extension으로 빼준 것이므로 아래와 같이 작성해주는 것도 가능합니다.

class TabBarController: UITabBarController, UITabBarControllerDelegate {}

이후 Delegate 대리자를 설정해주어야 한다.

self.delegate = self

이 코드를 viewDidLoad()에 작성해준다.

* 저는 함수로 빼주었습니다.

 

해당 코드는 탭바 아이템을 선택했을 때 TabBarController가 delegate를 사용하기 위한 것이다.

 

 📌 색상 변경

func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
    if selectedIndex == 2 {
        tabBar.backgroundColor = .black
        tabBar.tintColor = .white
        tabBar.unselectedItemTintColor = .white
    } else {
        tabBar.backgroundColor = .white
        tabBar.tintColor = .black
        tabBar.unselectedItemTintColor = .black
    }
}

tabBarController 함수는 tabBar delegate method로 탭이 선택되었을 때 작동한다.

 

selectedIndex는 몇 번째 뷰컨을 선택했는지에 대한 인덱스 값이다.

인덱스 값은 0부터 시작하므로 릴스탭은 인덱스 값이 2이다.

 

따라서 selectedIndex 값이 2일 경우 배경을 검정으로, 아이템을 흰색으로 바꿔주는 작업을 하면 된다.

추가로 selectedIndex 값이 2가 아닐 경우는 다시 배경을 흰색으로, 아이템을 검정색으로 바꿔주는 작업이 필요하다.

 

총 세 개의 속성을 주면 된다!

tabBar.backgroundColor = .black // 탭바의 배경 색상을 바꿔준다.
tabBar.tintColor = .white // 선택된 탭바 아이템의 색상을 바꿔준다.
tabBar.unselectedItemTintColor = .white // 선택되지 않은 탭바 아이템의 색상을 바꿔준다.