[iOS] TabBarItem으로 들어간 이미지가 제대로 표시되지 않을 때

 발생한 문제

TabBarItem으로 넣었던 에셋들 중 프로필 이미지가 정상적으로 표시되지 않았다.

추가했던 Asset 집합으로 가서 Render As를 Always Template Mode로 걸어주어도 마찬가지였다.

 

원인

(약간의 의역이 있습니다)

출처: [Apple Developer - UITabBarItem]

• 기본적으로, tabBarItems는 사용자가 넣은 이미지를 그대로 표시하지 않는다.
• 대신에, alpha 값과 tints를 더한 새로운 이미지를 생성한다.
• 원본 그대로 표시하고 싶다면, 랜더링 모드의 UIIage.RenderingMode.alwaysOriginal을 사용하라.

 

해결

두 가지 방법이 있다.

1. 코드로 잡아주기
2. Asset 자체에서 설정해주기

 

코드로 잡아주려면 UIImage를 생성할 때 아래처럼 해주면 되고

let profileIcon =  UIImage(named: "icn_profile")?.withRenderingMode(.alwaysOriginal)

 

Asset 자체에서 설정해주려면 인스펙터 창의 Image Set → Render As에서 설정해주면 된다.

(하지만 서버로부터 이미지를 받아와야 하는 경우에는 보통 Asset에 따로 저장되지 않기 때문에 적용이 되지 않는다고 한다.)

 

두 번째 방법을 사용했고, 정상적으로 표시되는 것을 확인할 수 있었다.

 

그 외 알게된 것

• alwaysOriginal → 원본 이미지를 항상 template 취급하지 않고 그대로 그려주는 것
• alwaysTemplate → 이미지의 색상에 관련된 정보를 무시하고 항상 template 이미지 그대로 그려주는 것 (= 이미지를 배경 취급)

나는 탭바 아이템의 모든 항목에 대해서 색을 반전시켜주는 코드를 넣어줬는데, 그래서 alwaysTemplate을 걸었을 때 프로필 아이콘이 정상적으로 표시되지 않았던 것 같다.

 

---

 

 

참고

UITabBarItem 이미지가 원본과 다르게 보이는 현상 해결하기
Setting UITabBarItem image in storyboard but different looking after run app
UIImage.RenderingMode.alwaysOriginal
UIImage.RenderingMode.alwaysTemplate​