UITabBarController UITabBarItem original icon 적용

1. Problem

아이콘 디자인은 아래와 같이 앞 뒤의 아이콘 색상이 약간의 차이가 있다.

하지만 아래와 같이 일반적인 코드 작성으로 UITabBarController의 TabBarItem을 설정할 경우 원본 이미지와 다르게 tintColor가 적용된다,.

private func setTabBarAppearance() {

    UITabBar.appearance().tintColor = Color.main
    UITabBar.appearance().unselectedItemTintColor = Color.grey_4
        
    let fontAttributes = [NSAttributedString.Key.font: UIFont.autoPretendard(type: .sb_10)]
    UITabBarItem.appearance().setTitleTextAttributes(fontAttributes, for: .normal)
}

---

2. Search and Think

TabBarItem 관련해서 검색을 해보니, UITabBarController에서 설정을 변경해주는 것이 아니라, Asset에 아이콘을 추가할 때 적용하는 속성 값의 문제였다.

 

@ 참고

https://zhiblog.tistory.com/3

iOS) UITabBarController Setting: tab bar item image, text color

---

3. Solution and Apply

기존 Asset 파일 내에서 image의 Render As 속성 값은 default이다.

이를 Original Image로 변경해주면 된다.

---

4. Result

TabBarItem이 아래와 같이 activate인 경우와 inactivate인 경우 모두 디자인이 제대로 적용된 것을 볼 수 있다.

---

5. Learn

UIImage.RenderingMode

👉🏻 The rendering mode controls how UIKit uses color information to display an image

• automatic
  • Draw the image using the context’s default rendering mode.
• alwaysOriginal
  • Always draw the original image, without treating it as a template.
• alwaysTemplate
  • Always draw the image as a template image, ignoring its color information.

https://developer.apple.com/documentation/uikit/uiimage/renderingmode

Apple Developer Documentation