[iOS] TabBarItem 이미지 변경할 때 주의할 점

TabBarController를 추가해서 TabBarItem의 이미지를 변경하면서 겪은 것들!

스토리보드로 변경하기, 코드로 변경하기 모두 시도해보았다.

 

1. 스토리보드로 변경하기

시도 1 - TabBarItem의 Attributes Inspector에서 Tab Bar Item의 System Item 설정 → 이미지 표시되지만, selected/unselected 구분 X

시도 2 - TabBarItem의 Attributes Inspector에서 Tab Bar Item의 Selected Image 설정 → 이미지 표시 X

시도 3 - TabBarItem의 Attributes Inspector에서 Bar Item의 Image만 설정 → 이미지 표시 X

시도 4 - TabBarItem의 Attributes Inspector에서 Tab Bar Item의 System Item, Bar Item의 Image 모두 설정 → 이미지 표시 O, selected/unselected 구분 O

⇒ 스토리보드에서 TabBarItem의 이미지를 변경하려면, Tab Bar Item의 System Item, Bar Item의 Image를 모두 설정해야한다!!!!

 

2. 코드로 변경하기

먼저 3가지 방식으로 시도를 했는데, 3번의 시도 모두 값을 print하여 확인하니 값은 제대로 들어간 것을 확인할 수 있었다.

시도 1 - 이미지 표시 X

print(tabBarItem.image, tabBarItem.selectedImage) // nil nil
self.tabBarItem.image = UIImage(systemName: "photo.artframe")
self.tabBarItem.selectedImage = UIImage(systemName: "photo.fill")
print(tabBarItem.image, tabBarItem.selectedImage) // not nil. 값 있음.

시도 2 - 이미지 표시 X

print(tabBarItem.image, tabBarItem.selectedImage) // nil nil
self.tabBarItem.image = UIImage(systemName: "photo.artframe")?.withRenderingMode(.alwaysOriginal)
self.tabBarItem.selectedImage = UIImage(systemName: "photo.fill")?.withRenderingMode(.alwaysOriginal)
print(tabBarItem.image, tabBarItem.selectedImage) // not nil. 값 있음.

시도 3 - 이미지 표시 X

print(tabBarController?.tabBarItem.image, tabBarController?.tabBarItem.selectedImage) // nil nil
self.tabBarController?.tabBarItem.image = UIImage(systemName: "photo.artframe")
self.tabBarController?.tabBarItem.selectedImage = UIImage(systemName: "photo.fill")
print(tabBarController?.tabBarItem.image, tabBarController?.tabBarItem.selectedImage) // not nil. 값 있음.

 

아래 사진은 세번째 시도 후 출력한 값이다.

 

 

 

그리고 대망의 4번째 시도. 드디어 성공했다.

시도 4 - 이미지 표시 O

self.tabBarController?.tabBar.items?[0].image = UIImage(systemName: "photo.artframe")
self.tabBarController?.tabBar.items?[0].selectedImage = UIImage(systemName: "photo.fill")

개선 코드

if let tabBarItem = self.tabBarController?.tabBar.items?[0] {
    tabBarItem.image = UIImage(systemName: "photo.artframe")
    tabBarItem.selectedImage = UIImage(systemName: "photo.fill")
}

 

 

tabBarItem의 속성을 변경해주었는데도 변경되지 않았던 이유는 뭘까..?

tabBarItem 속성은 UITabBarController와 관련되어있지만 사실 UIViewController의 속성이다. 

즉, FirstViewController가 TabBar에 들어갈 때 TabBarItem으로 표시될 정보를 저장하는 곳이므로 이미 TabBar에 들어간 후에 이미지가 바뀌는 것은 결국 아무 의미가 없다.

tabBar.Items 속성은 UITabBarController의 탭바 아래에 있는 여러 뷰 컨트롤러와 함께 보여주는 속성이다. 그렇기 때문에 여기서 이미지를 변경하면 적용이 되는 것이다!

 

두 속성이 비슷해서 엄청 헷갈렸는데 이번 기회에 잘 알아두기..⭐️