[Swift/iOS] 기본 알람어플 만들기(2) - Tab bar Appearance(standard, scroll edge), 세계 시계, embed navigation, large title, bar button item

알람어플은 라이트모드, 다크모드 상관없이 검은색 테마를 유지하고 있기에 다크모드 지원이 되지 않게 설정을 해주었다

다크모드 지원 설정은 아래 포스팅에서 간단하게 설명되어있다

https://modelinspring.tistory.com/51

[swift/iOS] 회원가입 페이지 만들기(1) - 요소와 기능 확인, 프로젝트 만들기, 다크모드 지원 설정,

 

 

Tab Bar 설정을 마무리 지어주자

Tab Bar의 Background 색상은 위의 사진 처럼 뒤에 내용이 있으면 blur 효과가 있고, 어떤 내용도 겹쳐지지 않았을 때는 black Color이다

Tab Bar의 Attribute는 iOS 15 이상부터 Standard와 Scroll Edge로 나누어 져있는데 개발자문서의 설명을 확인해보면 아래와 같다

 

Tab Bar Appearance 설정하기(Standard, Scroll Edge)

standardAppearance

The appearance settings for a standard-height tab bar

- 일반적인(standard) 높이에서의 모습

Discussion: The default value of this property is an appearance object containing the system's default appearance settings.

- 이 프로퍼티의 기본 값은 시스템의 기본 모습(appearance)을 포함하는 appearance object이다

 

scrollEdgeAppearance 

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

- 이 tab bar의 appearance setting 들은 스크롤 가능한 컨텐츠의 끝(Edge)가 tab bar의 끝과 정렬됐을 때의 설정이다.

Discussion: When a tab bar controller contains a tab bar and a scroll view, part of the scroll view’s content appears underneath the tab bar. If the edge of the scrolled content reaches that bar, UIKit applies the appearance settings in this property. If the value of this property is nil, UIKit uses the value of the tab bar’s standardAppearance property, modified to have a transparent background. If no tab bar controller manages your tab bar, UIKit ignores this property and uses the tab bar’s standard appearance. You can customize the appearance for specific tab bar items with the scrollEdgeAppearance property of UITabBarItem.

 

tab bar의 Attributes inspector창에서 Appearance에 있는 Standard 와 Scroll Edge 체크박스를 모두 체크해주자

그럼 속성창에 standard와 scroll edge로 나누어진 속성값들이 더 많이 생성된다

Table View의 content가 Tab Bar 아래로 내려갔을 때(content의 edge가 align되지 않았을때) blur 효과가 필요하므로

Standard Appearance에서 Blur Style을 Chrome Material(Dark)로 설정해주었다

스크롤이 다 끝나고 컨텐츠의 마지막 부분(scrollable content's edge)이 tab bar와 닿았을 때는 background가 black이어야 하므로 Scroll Edge Appearance의 Background를 black으로 지정해주자

기본적인 tab bar 설정이 마무리 되었다

 

 

그럼 이제 세계 시계 tab을 만들기를 시작해보자!

 

 

 

세계 시계 탭은 맨 위에 navigation에 편집, title(세계 시계), (+)button이 있고

이중 title은 스크롤 여부에 따라 위치와 크기가 변하는 large title이다

 

그 아래는 custom Cell들로 이루어진 table view가 있다

 

상단부터 차례대로 만들어보자

table view controller에 일단 navigation bar를 embed in 해야 한다

 

table view controller에 navigation controller 넣기

세계 시계의 table view controller를 클릭한 후 interface builder 오른쪽 아래의 embed in 버튼을 클릭한 후  Navigation Controller를 클릭해서 embed in 해주자

interface builder에서 Table view controller 앞에 navigation controller가 생긴 것을 확인할 수 있다

navigation bar 역시 scroll 여부에 따라서 blur 효과를 보여주고 있으니 tab bar 에서 설정했던 것처럼 standard와 scroll edge를 attributes inspector에서 체크해주자

standard appearance 에서는 blur style을 tab bar와 동일하게 Chrome Material (Dark)로 설정해주고, Scroll Edge Appearance에서는 Background를 black으로 설정했다

 

세계 시계라는 title은 컨텐츠를 아래로 당겼을 때 왼쪽에 크게 나타나고(위 이미지의 가운데 Title처럼),  컨텐츠를 위로 스크롤 했을 때는 navigator의 편집과 (+)버튼 사이에 위치하게 된다

 

Navigation bar의 Large Title 설정하기

Large Title 설정을 위해서 Attributes inspector에서 Standard Text Attributes의 Title, Large Title 그리고 Scroll Edge Text Attributes의 Title, Large Title을 모두 Custom으로 바꿔주자

그 다음에 나타나는 모든 Title Color를 White로 설정해주고

Large Title 효과를 위해서 Scroll Edge Bar Button Appearance에서 Prefers Large Titles의 체크박스에 체크해주자

 

navigation bar에 button 추가하기

일단 세계 시계라는 Title을 추가하기 위해서 

world table view controller의 navigation bar를 선택한 후, Attributes inspector에서 title 속성에 "세계 시계"를 입력해주자

title 양 옆에 편집과 (+)버튼을 넣어주어햐 하는데, Object Library에서 Bar Button Item을 드래그해서 navigation bar 위에 드랍하면 bar button을 추가할 수 있다

각각의 button의 attributes Inspector에서 Tint Attirbutes와 Title, image를 설정해주자