요즘 사람들을 모아서 오토레이아웃 스터디를 하고 있다.
아이폰 기본 어플을 정해 일주일동안 화면을 구현하고 있다.
1주차 어플은 설정과 디스플레이 설정 화면였다.
그 과정에서 Large Title에 대해서 알게 되었고, 화면을 구현하던 중 내가 겪었던 상황을 공유하고자 Large Title에 대해서 알아보고 포스팅한다.
Large Title
왼쪽처럼 "Settings"가 크게 있고 오른쪽처럼 스크롤하면 navigation bar에 "Settings"가 title로 되도록 하는 방법을 알아보자.
왼쪽처럼 Navigation Controller를 이용해 화면을 만들어봤다.
이 상태로 실행하면 오른쪽과 같은 화면을 볼 수 있다.
이제 설정화면처럼 만들어보자
navigation controller에서 navigation bar를 설정할 수 있다.
navigation bar를 클릭하면 오른쪽 창에서 Prefers Large Titles 옵션을 볼 수 있다.
이 옵션을 설정하면
우리가 원하던대로 나오는 것을 확인할 수 있다.
Prefers Large Titles
Prefers Large Titles 프로퍼티에 대해서 알아보자.
공식 문서를 먼저 봐보자.
title을 크게 표시해야하는지 여부를 가지고 있는 프로퍼티
흠... 그러니까 prefersLargeTitles는 title을 크게 표시하려면 해당 프로퍼티를 사용해야하는군.
좀 더 자세히 봐보자.
해당 프로퍼티가
true라면navigation bar에 표시하지 않고 큰 글꼴을 사용해서 표시할 수 있다.
largeTitleDisplayMode를 통해 title을 어떻게 표시할지 구성할 수 있다.
해당 프로퍼티가false라면navigation bar에 인라인으로 표시된다.
흠... 그럼 title을 크게 표시하려면 prefersLargeTitles를 true로 하면 되는군!
근데 largeTitleDisplayMode를 통해 title을 어떻게 표시할지 구성할 수 있다고 한다!
한 번 알아보자.
largeTitleDisplayMode
공식 문서를 먼저 봐보자.
navigation bar에 title을 표시하는 모드
흠... 그럼 어떤 모드가 있는지 한 번 확인해보자.
Large Title을 사용할 수 있는 경우
largeTitleDisplayMode프로퍼티는navigation bar에 title이 표시되는 방식을 컨트롤한다.
이 프로퍼티의 기본값은UINavigationItem.LargeTitleDisplayMode.automatic이다.
automatic은 이전에 표시된navigation item과 동일한 display mode를 갖는다.
이 프로퍼티를 변경하여 title의 display mode를 변경할 수 있다.
always는 title을 크게 표시할 수 있다.
never는 title을 작게 표시할 수 있다.
해당 프로퍼티는prefersLargeTitles가false라면 효과가 없다.
(navigation item의 title이 항상 작게 표시된다.)
두번째 화면 설정하기
Large Title이 설정되어 있는 설정 화면에서 "General" 메뉴를 들어가보자.
"General" 메뉴 화면에서는 Large Title이 설정되어 있지 않다.
위의 largeTitleDisplayMode를 사용해서 설정해보자.
Automatic
이렇게 화면을 설정하면
첫번째 화면과 두번째 화면 모두 Large Title임을 확인할 수 있다.
두번째 화면의 Large Title의 Display Mode가 automatic으로 설정되어 있어 첫번째 화면의 Large Title 여부를 따라가게 된다.
Always
always는 title을 크게 표시할 수 있다.
이번에는 두번째 화면의 Display Mode를 always로 설정해보자.
위의 그림에서 왼쪽과 오른쪽 두번째 화면 모두 Display Mode를 always로 설정했다.
그런데 화면 결과는 다르게 나타나는데 어떤 차이가 있을까?!
왼쪽
왼쪽에서는 첫번째 화면에 Large Title이 적용되어 있다.
- 첫번째 화면:
Large Titletrue - 두번째 화면:
Display Modealways
always는 title을 크게 표시한다고 했으므로 두번째 화면에도 Large Title임을 확인할 수 있다.
오른쪽
오른쪽에서는 첫번재 화면에 Large Title이 적용되어 있지 않다.
- 첫번째 화면:
Large Titlefalse - 두번째 화면:
Display Modealways
왼쪽과 동일하게 always인데 왜 Large Title이 아닐까?
위에서 Display Mode를 설명하면서
해당 프로퍼티는
prefersLargeTitles가false라면 효과가 없다.
위와 같은 얘기를 했다.
그렇다면 우리가 두번째 화면에 title을 크게 표시하는 always를 지정했음에도 Navigation Controller에 prefersLargeTitles가 false임으로 Large Title이 적용되지 않는다.
Never
never는 title을 작게 표시할 수 있다.
이번에는 두번째 화면의 Display Mode를 never로 설정해보자.
첫번째 화면은 Large Title이고, 두번째 화면은 Large Title이 아님을 확인할 수 있다.
물론, 여기서도 prefersLargeTitles를 false로 지정한다면 두 화면 모두 Larget Title이 적용되지 않을 것이다.
마무리
오늘은 스터디를 진행하면서 알게된 점을 정리해봤다.
Large Title은 나도 잘 몰랐던 부분인데 이번 기회에 알게되었다.
그럼 이만👋
