[iOS] NavigationBar backgorund color 설정하기 | 내비게이션 바 백그라운드 색 안바뀌는 이유

 

네비게이션 바의 백그라운드( 노치있는부분까지) 전부 컬러를 변경하고 싶었다.

 

기본적으로
navigationItem 을 통해 titleView를 바꿀 경우 GoodNews 영역의 UIView를 바꿀수 있습니다.

또한 prompt를 바꿀 경우 topItem Title위에 추가적인 글을 작성할 수 있습니다.

 

네비게이션바를 자세하 보면

기본적으로 UIKit에서 제공하는 설정을 사용하려면 barStyle을 설정해주면?

self.navigationController?.navigationBar.barStyle = .black

이렇게 스크롤했을 때만 잠깐 보이고 평상시에는 보이지 않습니다.

.isTransluecnt까지 변경해주어야 보입니다.

---

위 계층구조의 UIBarBackground가 힘이 없어진 모양인데,, 

GoodNews라는 titleView뒤에 navigatinoBar.background가 있는데, 이 백그라운드 컬러를 수정하고 빌드 실행해보면 백그라운드 색은 변하지 않습니다.

---

iOS 15부터 UINavigationBarAppearance라는 녀석을 UIKit에 Appearance 세팅으로 소개했기 때문에,, 위에서의 방식은 더이상 통하지 않습니다.

 

iOS15 부턴 네비게이션바의 백그라운드 등을 커스텀하기 위해선

standardAppearance, compactAppearance 그리고 scrollEdgeAppearance 를 사용해서 바꿔줘야 합니다.

 

•  네비게이션 컨트롤러가 네비게이션 바와 스크롤 뷰를 포함할 경우 스크롤뷰의 일부가 내비게이션 아래 나타난다. 스크롤뷰의 끝 엣지가 바에 닿으면 UIKit에선 appearance settings(=scrollEdgeAppearance)를 적용시킨다!!!! 
• 만약 nil일 경우 standardAppearance를 적용시킨다. 네비게이션 컨트롤러가 navigationBar를 관리하지 않을 경우에도 standardAppearance를 적용한다.

configureWithTransparentBackground()

이 메소드를 사용할 경우 background는 투명하고, shadow 또한 없는 bar appearance 객체를 생성합니다.

 

configureWithOpaqueBackground()

이 메소드를 사용할 경우 현재 테마에 맞는 opaque colors 를 bar appearance로 설정!

 

이외에도 configureWithDefaultBackground()가 있습니다.

---

기본적으로 사용할 때는

guard let navBar = self.navigationController?.navigationBar else {return}
let appearance	 = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .brown
// appearance설정을 합니다. 쉐도우를 넣어도되고 이미지를 넣어도되고,,

//이젠 네비게이션바에 커스터마이징을 하면 끝!
navBar.standardAppearance   = appearance
navBar.scrollEdgeAppearance = appearance
//저는 네비게이션 아이템의 titleView를 커스텀했습니다.
//기본 title만 변경한 분들은
//navBar.titleTextAttributes 속성에 옵션을 부여해야합니다.

그렇다면 

짜쟌

이렇게 원하는 백그라운드 설정을 할 수 있습니다.

 

configureWithOpaqueBackground()를 사용했기에 위에서 기본 barStyle할 때 사용했던 .isTranslucent속성은 필요가 없습니다.

 

AppDelegate에서

UINavigationBar.appearance()를 이용해 appearance 속성을 추가하면

네이게이션 appearance 세팅을 전체 조정도 가능하다는 사실!!

---

참고 사이트

https://developer.apple.com/documentation/uikit/uinavigationbar/legacy_customizations

https://medium.com/swift2go/uinavigationbar-is-black-on-ios-15-44e7852ea6f7

https://developer.apple.com/documentation/uikit/uinavigationbar/legacy_customizations

https://developer.apple.com/documentation/uikit/uinavigationbar/3198027-scrolledgeappearance

https://developer.apple.com/forums/thread/682420?answerId=678641022#678641022