개요

아이폰 앱에서 현대적인 UI를 실현하는 방법으로서, Apple 공식 앱의 UI를 팩하는 방법은 중요합니다.
iOS11에서 Apple의 공식 UI로 LargeTitle이라는 것이 추가되었습니다.
UINavigationBar가 설정된 스크롤 뷰에서 타이틀의 위치와 크기를 애니메이션으로 좋은 느낌으로 해줍니다.

"뮤직"의 LargeTitle

그러나 LargeTitle은 주변의 UI 파트를 올바르게 취급하지 않으면 유감스러운 느낌이 되어 버립니다.
이번은 구현에 도입하는데 있어서, 3개의 점과 해결책을 정리했습니다.

기사 전제

iOS11 이상

Master-Detail 형의 천이 (LargeTitle가 설정된 ScrollVIew → 상세 뷰)를 포함한 앱

LargeTitle 구현

LargeTitle은 다음 설정으로 쉽게 활성화 할 수 있습니다.

LargeTitle.swift

 //title設定
　　navigationItem.title = "title"

 //largeTitle表示
 navigationItem.largeTitleDisplayMode = .always
 navigationController?.navigationBar.prefersLargeTitles = true

 //laegeTitle(小)時の文字
 navigationController?.navigationBar.titleTextAttributes = [
     .foregroundColor: .white
 ]

 //laegeTitle(大)時の文字
 navigationController?.navigationBar.largeTitleTextAttributes = [
     .foregroundColor: .white,
     .font : UIFont.boldSystemFont(ofSize: 26.0)
 ]

구체적인 구현은 아래의 기사에 정리되어 있습니다.
- ios11에서 NavigationBar 구현 (largeTitleDisplayMode)

불행한 LargeTitle

그러나, 주위의 UI 파트를 올바르게 취급하지 않으면 아래와 같은 유감스러운 느낌이 되어 버립니다.


구체적으로는 이하의 점이 괄호 나쁘습니다.
- LargeTitle과 NavigationBar 사이에 남아있는 테두리 라인
- 탐색 컨트롤러에서 화면 전환시 검은 배경
- 스크롤 할 때 LargeTitle과 NavigationBar 사이의 어딘가의 배경색

해결책

LargeTitle과 NavigationBar 사이에 남아있는 테두리 라인

LargeTitle이 설정되어 있는 경우는 대부분의 경우 없는 분이 깨끗하다고 ​​생각합니다만, 디폴트에서는 지워 주지 않습니다.

이것은 navigationController.navigationBar.shadowImage로 설정된 UIImage입니다.

LargeTitle.swift

 //largeTitle時のnavigationBarのボーダを消す。戻す場合はnil代入
 navigationController?.navigationBar.shadowImage = UIImage()

또한 nil이 할당되면 기본 테두리 라인으로 돌아갑니다.
화면 전환 후에도 NavigationController의 인스턴스가 남아 있기 때문에,
1화면만 지우고 싶은 경우는 Delegate 메소드 등으로 nil을 재입력할 필요가 있습니다.

네비게이션 컨트롤러에서 화면 전환시 검은 배경

결론부터 말하면 이 녀석은 NavigationController 자신이 가지고 있는 View의 색입니다.
이것에 대해서는 정보가 적고, UI 파트 1개 1개의 색을 바꾸어 가는 것으로 드디어 발견했습니다.
원래 NavigationController 자체가 View를 가지고 있다는 사실이 완전히 맹점,,,
아래와 같이 원하는 색상으로 변경할 수 있습니다. 전환 대상의 뷰 색상과 일치하면 아름답습니다.

LargeTitle.swift

 //largetitleの適用時の画面遷移でチラ見する黒背景はコイツ
 navigationController.view.backgroundColor = .white

스크롤시 LargeTitle과 NavigationBar 사이의 어딘가의 배경

LargeTitle 설정시 스크롤을 잡았을 때 어딘가의 배경이 찍혀 버려 괄호 나쁘다.
이번 구현에서는 CollectionView를 이용하고 있었습니다만, LargeTitle의 변화 애니메이션에 끌려,
무려 CollectionView 배경색의 마이너스 영역이 표시되었습니다.

CollectionView뿐만 아니라 ScrollView 상단과 NavigationBar 색상을 정렬하려면이 설정이 필요합니다. 케이스로서는 특수한 예일지도 모릅니다만, 비망록으로서 써 둡니다.

CollectionView 자체의 배경색을 변경하고 싶지 않았기 때문에,
이것은 적절한 높이의 CALayer를 마이너스 영역에 AddSublayer함으로써 해결되었습니다.

LargeTitle.swift

//largetitleのスクロール時にcollectionviewの背景色が表示される現象対策
 let fillSpaceLayer = CALayer()
 fillSpaceLayer.backgroundColor = .white
 fillSpaceLayer.frame = CGRect(x:0, y:-100, width: self.view.frame.width, height: 100)
 collectionView.layer.addSublayer(fillSpaceLayer)

요약

이런 느낌에 멋지게 LargeTitle을 잘 다룰 수 있었습니다.


LargeTitle.swift

 //largeTitle表示
 navigationItem.largeTitleDisplayMode = .always
 navigationController?.navigationBar.prefersLargeTitles = true

 //laegeTitle(小)時の文字色
 navigationController?.navigationBar.titleTextAttributes = [
     .foregroundColor: .white
 ]
 //laegeTitle(大)時の文字色
 navigationController?.navigationBar.largeTitleTextAttributes = [
     .foregroundColor: .white,
     .font : UIFont.boldSystemFont(ofSize: 26.0)
 ]

 //largeTitle時のnavigationBarのボーダを消す。戻す場合はnil代入
 avigationController?.navigationBar.shadowImage = UIImage()

 //largetitleの適用時の画面遷移でチラ見する黒背景はコイツ
 navigationController.view.backgroundColor = .white

 //largetitleのスクロール時にcollectionviewの背景色が表示される現象対策
 let fillSpaceLayer = CALayer()
 fillSpaceLayer.backgroundColor = .white
 fillSpaceLayer.frame = CGRect(x:0, y:-100, width: self.view.frame.width, height: 100)
 collectionView.layer.addSublayer(fillSpaceLayer)