UITabBarItem 이미지가 원본과 다르게 보이는 현상 해결하기

 

디자이너 분께서 주신 아래 이미지를 토대로 TabBarController의 TabBarItem에 적용하려고 했다. 

 

문제점 

하지만 아래와 같이 동그라미이긴 한데.. 다 채워져있다. 몹시 당황스럽다🙃.

 

 

Debug View Hierarchy에서도 분명 제공받은 이미지를 보여주는 것 같다. 하지만 이미지는 다르게 나오고 있다. 

 

일단 제공받은 이미지는 문제가 없다는 것을 알 수 있고, 

다만, 유추해볼 수 있는 것은,  아래 이미지를 확대해보면,  + 가 불투명이 아닌, 흰색으로 되어있다는 걸 알 수 있다.

( 만약 불투명이라면 배경에 있는 패턴들이 + 에서도 보여야 할 것이다 )  

 

 

원인

검색해본 결과 UITabBarItem은 이미지를 기본적으로 다르게 렌더링한다는 걸 알 수 있었다.

 

공식문서에서도, 이미지를 선택했을 때랑 아닌 경우로 제공할 수 있고,

기본적으로, TabBarItem은 제공한 이미지를 그대로 보여주지 않는다고 한다.

대신에 제공받은 이미지의 알파값으로부터 새로운 이미지를 생성하여 이를 tint한다고 써있다. 

이를 막기 위해서는 UIImage.renderingMode를 always original로 설정하는 방법이다. 

 

즉, 원본 이미지의 모든 색을 특정 색으로 변경하여 이를 사용한다라고 볼 수 있다.

그러므로, 원본 이미지의 따로 색을 지정하지 않아도, UITabBarController의 tabBar - tintColor를 지정하면 원하는 색으로 tint가 적용되는 것도 그때문이다. 

 

 

해결방법 

해결방법은 크게 2가지인 것 같다.

1. 애초에 받은 이미지를 Asset에 저장하고, Asset에 renderingMode를 변경하거나, 

( 이 방법은 만약 서버로부터 이미지를 받는 경우에 asset에 저장하지 않고 바로 적용하려고 한다면 안될 것 같다. ) 

 

2. UIImage를 생성할때, renderingMode를 지정하여 UITabBar에 지정하거나. 

이런 경우면 어디서든 유동적으로 변경할 수 있겠다. 

        let image = UIImage(named: "plus")?.withRenderingMode(.alwaysOriginal)
        let v2TabBarItem = UITabBarItem(title: nil, image: image, selectedImage: nil)
        v2.tabBarItem = v2TabBarItem

 

 

 

 

그러면 이제 받은 이미지 그대로 나오는 걸 볼 수 있다. 👍

 

 

 

 

---

참고 

https://stackoverflow.com/questions/34713453/setting-uitabbaritem-image-in-storyboard-but-different-looking-after-run-app

Setting UITabBarItem image in storyboard but different looking after run app

https://developer.apple.com/documentation/uikit/uitabbaritem

Apple Developer Documentation