[Swift] 코드로 TabBar 커스텀 아이콘 적용하기

오늘의 목표

애플에서 기본으로 제공해주는 SF Symbols (= SystemImage) 를 쓰면 쉽고 빠르지만 많은 경우에 별도의 커스텀 아이콘을 적용해야 하는 경우가 생긴다. 

그냥 별도의 세팅 없이 이미지를 넣었더니 깨지거나 사이즈가 안맞는 경우가 많아 간략하게 커스텀 탭바 아이콘을 적용시킬 수 있는 방법을 정리했다.

맨 마지막에 전체 코드 있음!

 

스토리보드 세팅

스토리보드에서 간단히 tabBarController와 연결할 ViewController 들을 세그로 연결해준 상태다. (탭 간 구분을 위해 배경색 추가)

 

TabBar Items

그 다음, 탭바 아이템들을 다루기 위해 UITabBarController 의 서브클래스 파일을 하나 만들어주었다.

이제 viewDidLoad 함수 안에 탭바 아이콘을 세팅해주자.

 self.tabBar.items   로 탭바 아이템 리스트를 다룰 수 있다.

 

탭바 아이템의 image 프로퍼티와 selectedImage 프로퍼티를 이용하면 기본 이미지 및 선택 시 이미지를 각각 설정할 수 있다.

지금 예제에서는 총 5개의 탭이 있으므로 인덱스 0부터 4까지의 기본 이미지와 선택시 나올 이미지를 설정해준다. 

(해당 이름의 이미지를 에셋 파일에 추가해준 상태)

리사이징

그런데 캡처처럼만 설정하면 대개 이미지 사이즈가 맞지 않는 경우가 많다.

애플의 HIG 탭바 가이드라인에 따르면 아이콘 사이즈는 23pt 로 권장한다고 한다.

더 좋은 방법이 있을 것 같지만 일단 리사이징용 함수를 만들어서 모두 적용시켜주었다.

https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/tab-bars/

Tab bars - Navigation and search - Components - Human Interface Guidelines - Design - Apple Developer

추가 - 아이콘 색깔 설정

탭바의  tintColor  프로퍼티와  unselectedTintColor  프로퍼티로 선택 된 아이콘 및 선택되지 않은 기본 아이콘 색깔을 각각 지정해 줄 수 있다.

전체 코드

class TabBarController: UITabBarController {
    
    func resizeImage(image: UIImage) -> UIImage {
        let size = CGSize(width: 23, height: 23)

        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        image.draw(in: CGRect(origin: .zero, size: size))
        let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return resizedImage!
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let tabBar = self.tabBar
        
        // tabBar Icon
        if let tabBarItems = tabBar.items{
            tabBarItems[0].image = resizeImage(image: UIImage(named: "home")!)
            tabBarItems[1].image = resizeImage(image: UIImage(named: "feed")!)
            tabBarItems[2].image = resizeImage(image: UIImage(named: "store")!)
            tabBarItems[3].image = resizeImage(image: UIImage(named: "worker")!)
            tabBarItems[4].image = resizeImage(image: UIImage(named: "person")!)
            
            tabBarItems[0].selectedImage = resizeImage(image: UIImage(named: "home.fill")!)
            tabBarItems[1].selectedImage = resizeImage(image: UIImage(named: "feed.fill")!)
            tabBarItems[2].selectedImage = resizeImage(image: UIImage(named: "store.fill")!)
            tabBarItems[3].selectedImage = resizeImage(image: UIImage(named: "worker.fill")!)
            tabBarItems[4].selectedImage = resizeImage(image: UIImage(named: "person.fill")!)
        
        }
		tabBar.tintColor = .blue
        tabBar.unselectedItemTintColor = .darkGray
    }
}