탭 뷰의 배경색, 구분선 색상 지정을 하려면:

TabView {
	// 생략
}
.onAppear() {
	let appearance = UITabBarAppearance()
	appearance.configureWithTransparentBackground()
	appearance.shadowColor = UIColor(Color.blue) // <-- 구분선
	appearance.backgroundColor = UIColor(Color.white) // <-- 배경색
	
	UITabBar.appearance().scrollEdgeAppearance = appearance
}

하지만 이상하게 [[TabView]] 에서 띄워주는 하위 뷰의 내부가 [[ScrollView]]로 감싸져 있다면 다음과 같이 색상이 적용되지 않는 현상이 있음.

탭 뷰 배경색이 적용되지 않은 이미지

이걸로 삽질을 좀 열심히 했는데 … onAppear 에서 다음 한 줄 추가하는 것으로 해결함:

TabView {
	// 생략
}
.onAppear() {
	let appearance = UITabBarAppearance()
	appearance.configureWithTransparentBackground()
	appearance.shadowColor = UIColor(Color.blue) // <-- 구분선
	appearance.backgroundColor = UIColor(Color.white) // <-- 배경색

+	UITabBar.appearance().standardAppearance = appearance
	UITabBar.appearance().scrollEdgeAppearance = appearance
}

scrollEdgeAppearance 에 할당한 것을 빼면 [[ScrollView]]로 감싸져있지 않은 하위 뷰에서 [[TabView]] 배경색이 적용되지 않으므로, 두 개 다 할당해줘야 함.

scrollEdgeAppearance

The appearance settings for the navigation bar when the edge of scrollable content aligns with the edge of the navigation bar.

standardAppearance

The appearance settings for a standard-height navigation bar.

scrollEdgeAppearance 는 스크롤 가능한 컨텐츠일 때 스크롤이 가장자리(뷰의 최하단)에 닿은 경우 적용 standardAppearance 는 표준 높이의 네비게이션에 적용

그래서 scrollEdgeAppearance 만 적용되어 있는 경우에 스크롤이 있는 컨텐츠에서는 스크롤을 내려 하단에 닿지 않으면 appearance 가 적용되지 않았던 것.

잘 이해가 안 가는 부분은, standardAppearance 만 적용했을 때, 스크롤뷰로 감싸져 있지 않은 하위 뷰에서 appearance가 적용되지 않는 이유를 모르겠음. 설명에 나오는 standard-height 가 무엇인지 모르겠다…

참고 자료

  • https://stackoverflow.com/questions/75256478/how-to-make-swiftui-tabbar-background-always-transparent
  • https://developer.apple.com/documentation/uikit/uinavigationbar/3198027-scrolledgeappearance
  • https://developer.apple.com/documentation/uikit/uinavigationbar/3198028-standardappearance