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