Navigation Bar의 Appearance에 관해

개발자 문서에 나와있는 Navigation Bar의 Appearance를 Customizing 하기 위한 프로퍼티들을 살펴보려고 한다.

즉, 네비게이션 바의 외관을 설정하는 부분이고 이외에도 바를 커스텀하기 위한 많은 프로퍼티와 메소드들이 존재하나 이번 문서에선 개발자 문서의 Appearance에 대한 부분만 다뤄보고자 한다.

---

• prefersLargeTitle

네비게이션 바의 Title을 큰 형식으로 보여주는지 나타내는 프로퍼티다. 이 프로퍼티의 값이 True면 Title이 네비게이션 바 왼쪽 아래에 큰 글씨로 보여지고, False면 일반적인 중앙 정렬의 비교적 작은 Title이 보여진다. (단 LargeTitle은 Standard Appearance에서는 보여지지 않는다.)

예시1) perfersLargeTitle이 False일때

예시1) perfersLargeTitle이 True일때

 

• isTranslucent

네비게이션 바가 반투명한지 나타내는 프로퍼티다. 이 값이 True면 네비게이션 바가 반투명 상태가 된다. 설정한 Appearance에 공통으로 적용되며 반투명 상태일 때 네비게이션 바의 색은 뷰의 배경색과 네비게이션 바의 백그라운드 컬러에 따라 달라진다.

 

예시2) isTranslucent가 False일때

예시2) isTranslucent가 True일때

위 예시처럼 네비게이션 바의 백그라운드 컬러가 지정돼있고 반투명 상태가 아니라면 색이 지정되지 않은 네비게이션 바 영역은 검은색으로 보인다. 하지만 반투명 상태로 설정하면 해당 뷰의 배경색이 그 영역으로 비쳐진다. 당연히 반투명 상태에서 네비게이션 백그라운드 컬러가 없다면 전체 영역에 뷰의 배경색이 비친다.

 

예시3) isTranslucent가 False일때

예시3) isTranslucent가 True일때

위 사진은 Standard Appearance에 적용했을 때의 모습이다. 반투명이 아니라면 예시2의 검은색 영역때문에 윗 부분에 색이 비치는 것을 볼 수 있고, 반투명 상태라면 뷰의 배경색이 비치는 것을 볼 수 있다. 아랫 부분은 네비게이션 바 백그라운드 컬러의 색이 비친다. (Appearance의 백그라운드 컬러는 지정하지 않았다.)

 

• standardAppearance

개발자 문서에는 표준 높이의 네비게이션 바에 대한 Appearance를 설정하고 기본 값으로 시스템의 기본 설정값을 가진다고 돼있다. 즉, 따로 설정하지 않아도 기본으로 갖고 있는 값이 있어서 그 값이 적용되어 나타난다. 네비게이션 아이템에도 동일한 프로퍼티가 있어서 뷰 컨트롤러마다 다른 Appearance를 커스텀할 수 있다. prefersLargeTitle이 True여도 표준 높이의 Title이 보여진다.

 

• scrollEdgeAppearance

스크롤 가능한 뷰의 가장자리가 네비게이션 바와 맞닿아 있는 상태의 네비게이션 바에 대한 Apperance를 설정한다. 만약 이 값이 nil이면 standardAppearance 프로퍼티의 설정을 사용하고 투명한 배경을 사용한다.

 

• compactAppearance

compact한 높이의 네비게이션 바에 대한 Appearance 설정이다. 대표적으로 가로모드에서 보여진다. 이 프로퍼티 역시 nil일때 standardAppearance 프로퍼티를 사용하고 네비게이션 아이템의 동일한 프로퍼티를 사용해 뷰 컨트롤러마다 커스텀이 가능하다. prefersLargeTitle 프로퍼티의 값이 True여도 Title의 크기가 변하지 않는다.

 

• compactScrollEdgeAppearance

스크롤 가능한 뷰의 가장자리가 compact한 높이의 네비게이션 바와 맞닿아 있는 상태의 네비게이션 바에 대한 Appearance를 설정한다. 마찬가지로 주로 가로모드에서 보여진다. 이 프로퍼티가 nil일때 scrollEdgeAppearance 프로퍼티의 설정을 사용하고 네비게이션 아이템의 동일한 프로퍼티를 사용해 뷰 컨트롤러마다 커스텀이 가능하다.