UITabBarAppearance
TabBar를 코드베이스로 구현하면서 궁금증이 생겼습니다.
탭바의 배경색은 어떻게 설정할 수 있고, 아래 세 가지 메서드의 차이는 무엇일까요?
세 가지 메서드를 비교해보면서 적용해보았지만, 비슷한 것 같으면서도 다른 것 같아서 한 번 분석해보았습니다.
iOS 13.0+
configureWithDefaultBackground
let appearance = UITabBarAppearance()
appearance.backgroundColor = UIColor.systemYellow
appearance.configureWithDefaultBackground()
tabBar.standardAppearance = appearance
print("backgroundColor: ", appearance.backgroundColor)
// backgroundColor: nil
print("shadowColor: ", appearance.shadowColor)
// shadowColor: Optional(… name = _systemChromeShadowColor>)
배경색상을 노란색으로 설정하고 configureWithDefaultBackground를 설정했는데,
배경색상이 불투명한 색상으로 표시됩니다. 왜 그럴까요?
메서드 설명을 살펴보면, 백그라운드와 그림자 객체를 기본값으로 재설정한다고 합니다.
배경색과 그림자색을 프린트로 출력해보면 다음과 같은 값이 나옵니다.
backgroundColor: nil
shadowColor: Optional(…; name = _systemChromeShadowColor>)
배경색상이 nil이면 불투명이 아니라 투명해야하는데 왜 그러는걸까요?
아래 UITabBar 계층이 어떻게 이루어져 있는지 살펴보겠습니다.
Debug View Hierarchy
UITabBar → UIBackground → UIVisualEffectView → UIVisualBackdropView
위 순서대로 계층이 이루어져 있습니다.
UIBackground는 실제로 nil인 것을 확인할 수 있습니다.
대신 UIVisualBackdropView가 UIBackground 상단에 위치한 것을 볼 수 있습니다.
그러면 Shadow는 뭘까?
UITabBar의 계층 구조를 살펴보면 다음과 같습니다.
UITabBar → UIBackground → UIBarBackgroundShadowView → UIBarBackgroundShadowContentImageView
위 순서대로 계층이 이루어져 있습니다.
상단에는 얇은 막대기 형태의 그림자가 ImageView 형태로 존재합니다.
기본적으로 그림자의 색상은 _systemChromeShadowColor입니다.
그림자가 존재하는지 여부를 확인하기 위해 nil 값을 할당하여 비교해보았습니다.
let appearance = UITabBarAppearance()
appearance.backgroundColor = UIColor.systemYellow
appearance.configureWithDefaultBackground()
appearance.shadowColor = nil
tabBar.standardAppearance = appearance
print("backgroundColor: ", appearance.backgroundColor)
// backgroundColor: nil
print("shadowColor: ", appearance.shadowColor)
// shadowColor: nil
위 코드를 실행해보면 다음과 같이 배경색과 그림자색 모두 nil값이 나오는걸 확인할 수 있습니다.
shadowColor: _systemChromeShadowColor
shadowColor: nil
차이가 느껴지시나요?
얇은 구분선이 사라진 것을 확인할 수 있습니다.
그러면 여기서 또 궁금한 게 생기죠.
바로 위에서 확인했던 UIBarBackgroundShadowView 계층은 존재할까요?
"Default"와 다르게 그림자 계층은 사라진 것을 확인할 수 있습니다.
그렇다면 다음으로 확인할 것은 "configureWithTransparentBackground"입니다.
배경색이 투명색이므로 BackgroundColor = nil이 나올 것이고,
UIVisualEffectView 혹은 UIVisualEffectBackdropView가 없을 것으로 예상됩니다.
그림자도 없을 것으로 예상되는데요, 바로 확인해 보죠.
configureWithTransparentBackground
let appearance = UITabBarAppearance()
appearance.backgroundColor = UIColor.systemYellow
appearance.configureWithTransparentBackground()
tabBar.standardAppearance = appearance
print("backgroundColor: ", appearance.backgroundColor) // backgroundColor: nil
print("shadowColor: ", appearance.shadowColor) // shadowColor: nil
메서드 이름대로 투명한 배경색을 확인할 수 있습니다.
또한 appearance.backgroundColor = UIColor.systemYellow 설정은
configureWithTransparentBackground()메서드가 덮어쓰게 됩니다.
그리고 배경색과 그림자색 모두 nil로 설정됩니다.
그럼 이어서 계층 구조를 한번 살펴볼까요?
Debug View Hierarchy
역시나 예상대로 UIBackground의 색상 값이 nil이기 때문에 투명하고,
UIVisualEffectView와 UIBarBackgroundShadowView 모두 계층에서 보이지 않습니다.
그럼 이어서 configureWithOpaqueBackground는 불투명한 배경을 설정하는 것 같은데,
default와 유사하지 않을까 생각이 듭니다. 바로 확인해보겠습니다.
configureWithOpaqueBackground
let appearance = UITabBarAppearance()
appearance.backgroundColor = UIColor.systemYellow
appearance.configureWithOpaqueBackground()
tabBar.standardAppearance = appearance
print("backgroundColor: ", appearance.backgroundColor)
// backgroundColor: Optional(... name = systemBackgroundColor>)
print("shadowColor: ", appearance.shadowColor)
// shadowColor: Optional(... name = _systemChromeShadowColor>)configureWithDefaultBackground
configureWithOpaqueBackground
처음에는 무슨 차이인지 궁금했는데,
동시에 비교해보니 배경의 투명도가 다른 것을 확인할 수 있습니다.
이 메서드도 마찬가지로 기존에 설정한 배경색은 보이지 않고 새로운 흰 배경색이 보입니다.
프린트로 배경색을 찍어보면 systemBackgroundColor로 설정되어 있는 것을 확인할 수 있습니다.
그러면 이어서 계층 구조를 확인해 보겠습니다.
Debug View Hierarchy
configureWithDefaultBackground
configureWithOpaqueBackground
이번에는 UIVisualEffectView가 아니라 UIImageView가 있네요?
아무래도 배경에 효과가 없고 단순히 배경색만 있으니 이미지 뷰로 대체한 것 같네요.
그렇다면 UIVisualEffectView는 이름 그대로 어떤 비주얼 효과를 줄 수 있을까요?
하. 지. 만 이펙트가 너무 많은 관계로 설명은 링크로 대체하겠습니다
https://developer.apple.com/documentation/uikit/uiblureffect/style
그럼 마지막으로 어떤 appearance도 설정하지 않은 상태를 확인해보겠습니다.
let appearance = UITabBarAppearance()
appearance.backgroundColor = UIColor.systemYellow
tabBar.standardAppearance = appearance
print("backgroundColor: ", appearance.backgroundColor)
// backgroundColor: Optional(...; name = systemYellowColor>)
print("shadowColor: ", appearance.shadowColor)
// shadowColor: Optional(... name = _systemChromeShadowColor>)
appearance에 배경 효과를 적용하지 않고, 바로 배경 색상만 systemYellow로 설정해 주었는데요.
배경색을 확인해 보면 systemYellow로 설정되어 있으며,
그림자 색 또한 다른 설정들과 마찬가지로 _systemChromeShadowColor로 설정되어 있습니다.
그럼 바로 계층구조를 확인해 보겠습니다.
Debug View Hierarchy
이번에는 정말 당황스러운데요...
당연히 Appearance에 배경 효과를 적용하지 않았기 때문에 Background ImageView만 존재할 줄 알았는데
UIVisualEffectView와 UIBarBackgroundShadowView 모두 계층에 존재합니다.
정말 애플은 Xcode Pro를 출시해주면 좋겠네요... 알다가도 모르겠습니다.
이상으로 TabBar의 Appearance 설정하는 방법과 계층 구조에 대해서 살펴봤습니다.
Uploaded by
N2T