[iOS｜프로젝트｜TravelTale] UITabBarAppearance로 탭바 반투명 제거

📌 문제 : 세 번째 탭에서 탭바의 색이 회색으로 변함

---

세 번째 탭에서 탭바가 회색으로 변하는 이유는 '스크롤 뷰'와 닿았기 때문이다.

💡 tabBar.backgroundColor = .white 를 해도 회색으로 변하는 이유

tabBar.backgroundColor = .white 만 설정할 경우, translucency와 backgroundImage의 영향을 받을 수 있기 때문.

-Translucency: true일 경우, 배경색이 탭바 뒤 컨텐츠와 블렌드 됨.

-BackgroundImage: transparency 또는 gradient effect가 적용된 default background image가 시스템에 의해 적용됨

 

 

💡 해결 : UITabBarAppearance 설정

---

let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white

tabBar.standardAppearance = appearance
tabBar.scrollEdgeAppearance = tabBar.standardAppearance

 

-configureWithOpaqueBackground() 메소드 사용 → 탭바를 불투명하게 함

-scrollEdgeAppearance 를 standardAppearance로 설정 → 스크롤뷰에서도 탭바의 외양이 유지되도록 함. (iOS 15 +)

 

UITabBarAppearance 사용은 미래지향적이며,TravelTale 앱의 minimum deployments가 iOS 15이므로 문제 없음.

(UITabBarAppearance: iOS 13+, scrollEdgeAppearance: iOS 15+)

https://developer.apple.com/documentation/uikit/uitabbar/3750912-scrolledgeappearance

 

⏸️ 시도한 다른 방법들

---

 

문제 정의 부분에서 기술했던 대로, tabBar의 색은 translucency와 backgroundImage의 영향을 받을 수 있다.

1번에서 translucency를 조정해보고,

2번에서 backgroundImage를 조정해보겠다.

 

1. tabBar.isTranslucent = false 👉 ❌

tabBar.isTranslucent = false
tabBar.backgroundColor = .white

탭바의 반투명 속성인 tabBar.isTranslucent 속성을 false로 변경해보았으나, (기본값: true)

탭바를 숨긴 뷰(tabBar.isHidden = true)에서 탭바 영역이 까매지는 치명적인 문제가 발생했다.

 

2.tabBar.backgroundImage = UIImage() 👉🔺

tabBar.backgroundImage = UIImage()
tabBar.backgroundColor = .white

backgroundImage를 UIImage()로 초기화하면 투명도를 발생시키는 default background image를 제거할 수 있다.

이 방법은 간단하고 성공적이지만, 미래지향적이지는 않다.

 

apple에서는 더 다양한 커스텀이 가능한 appearance API를 사용을 권장하고 있다.

이 방법은 appearance 사용이 어려울 때 차안으로 채택할 수 있을 것 같다.

 

 

🆕 추가 업데이트

---

> 탭바 아이템 색 설정 코드를 appearance로 변경