본문으로 건너뛰기

SwiftUI 툴바 항목의 표시와 동작 제어하기

Taking control of toolbar items in SwiftUI

swiftwithmajid.com

핵심 요약

  1. visibilityPriority로 툴바 항목의 우선순위를 지정하면 공간이 부족할 때 SwiftUI가 낮은 우선순위 항목을 먼저 접도록 할 수 있다.
  2. ToolbarOverflowMenu는 항목 그룹을 모든 플랫폼에서 기본적으로 접힌 상태로 표시하며, topBarPinnedTrailing은 항목을 상단 바 오른쪽에 고정한다.
  3. toolbarMinimizeBehavior를 사용하면 스크롤에 따라 내비게이션 바, 탭 바, 하단 바, 윈도 바의 최소화 동작을 지정할 수 있다.

도입

SwiftUI의 툴바는 선언형이며 플랫폼에 따라 항목 배치가 달라진다. 같은 ToolbarItemGroup도 macOS에서는 모든 동작이 오른쪽 상단에 표시될 수 있지만, iOS에서는 일부가 오버플로 메뉴로 접힐 수 있다. 새 툴바 API는 이런 자동 적응을 유지하면서 항목의 우선순위와 고정 위치, 접힌 그룹, 스크롤 반응을 더 명시적으로 제어한다.

상세 요약

플랫폼별 툴바 배치

SwiftUI 툴바는 플랫폼에 따라 항목을 다르게 배치한다. 예제에서 .primaryAction에 둔 Action 1은 macOS와 iOS 모두 상단 오른쪽에 놓인다. 나머지 버튼은 macOS에서 모두 상단 오른쪽에 표시되지만, iOS에서는 일부가 오버플로 메뉴로 접힌다. 같은 선언이라도 플랫폼의 툴바 배치가 같지 않다.

항목 우선순위 지정

ToolbarContent에 적용하는 visibilityPriority는 항목이 접힐 때의 우선순위를 전달한다. 사용할 수 있는 값은 automatic, low, high다.

  • 중요한 항목이 있는 그룹에 .visibilityPriority(.high)를 지정할 수 있다.
  • SwiftUI는 우선순위를 고려해 낮은 우선순위 항목을 접는다.

항목의 배치를 지정하는 방식도 있다. .secondaryAction에 둔 항목은 보조 동작으로 묶을 수 있다. 다만 이 배치는 플랫폼에 따라 결과가 달라진다. 글의 예제에서는 macOS에서 Action 1은 오른쪽 상단에, 나머지 그룹은 내비게이션 바 중앙에 표시된다. iOS에서는 Action 1만 오른쪽에 고정되고 다른 항목은 접힌다.

접힌 그룹과 상단 고정 항목

ToolbarOverflowMenu는 항목 그룹을 명시적으로 접힌 상태로 만든다. 이 타입에 넣은 동작은 모든 플랫폼에서 기본적으로 접혀 표시된다. 따라서 어떤 항목이 자동 적응 과정에서 접힐지 플랫폼에 맡기는 대신, 오버플로 메뉴에 둘 항목을 직접 정할 수 있다.

topBarPinnedTrailing 배치는 항목을 상단 바 오른쪽에 고정한다. 이 항목은 검색이 활성화되어 있고 표시 공간이 더 이상 남지 않을 때만 접힐 수 있다. 예제에서는 Action 1을 이 배치에 두고, 나머지 동작은 .secondaryAction 그룹으로 분리한다.

스크롤에 따른 툴바 최소화

toolbarMinimizeBehavior는 스크롤에 따라 툴바를 최소화하는 동작을 지정하는 뷰 수정자다. 예제에서는 .toolbarMinimizeBehavior(.onScrollDown, for: .navigationBar)로 내비게이션 바에 스크롤 다운 동작을 적용한다. 이 API로 최소화 동작을 지정할 수 있는 바에는 탭 바, 하단 바, 윈도 바, 내비게이션 바가 포함된다.

이 API들은 서로 다른 제어 지점을 제공한다. visibilityPriority는 어떤 항목을 먼저 접을지, ToolbarOverflowMenu는 어떤 그룹을 의도적으로 접을지, topBarPinnedTrailing은 특정 항목을 어디에 고정할지 정한다. toolbarMinimizeBehavior는 항목 배치가 아니라 스크롤 중 바의 동작을 다룬다.

결론

툴바 항목을 모두 같은 방식으로 배치하는 대신, 중요도에 따라 visibilityPriority를 주고 특정 항목은 topBarPinnedTrailing으로 고정할 수 있다. 항상 접혀 있어야 하는 작업은 ToolbarOverflowMenu에 넣는다. 여기에 toolbarMinimizeBehavior를 적용하면 스크롤에 따른 바의 최소화도 설정할 수 있다. 각 API는 항목의 노출 방식과 툴바 동작을 나누어 제어한다.