내용

• SwiftUI 사용해서 Podcast 앱의 클론코딩을 진행했다.
• 아래의 Menu 를 구현해보자!

해당 컴포넌트는 Menu 이다. 개발자 문서를 통해서 알아보자.

Menu

A control for presenting a menu of actions.

Overview

다음 코드는 세 개의 버튼으로 구성된 Menu 와 세 개의 버튼을 포함하는 하위 메뉴를 보여줍니다.

// action 은 커스텀 메서드입니다.
Menu("Actions") {
    Button("Duplicate", action: duplicate)
    Button("Rename", action: rename)
    Button("Delete…", action: delete)
    Menu("Copy") {
        Button("Copy", action: copy)
        Button("Copy Formatted", action: copyFormatted)
        Button("Copy Library Path", action: copyPath)
    }
}

화면 기록 2022-04-26 오후 6.00.18.mov

menu 타이틀을 이전 예시처럼 ✅ (참고)LocalizedStringKey(문자열의 localization) 를 사용해서 만들거나, image 나 text 뷰 같은 다수의 뷰를 만드는 view builder 를 사용해서 만들 수 있습니다.

Menu {
    Button("Open in Preview", action: openInPreview)
    Button("Save as PDF", action: saveAsPDF)
} label: {
    Label("PDF", systemImage: "doc.fill")
}

Primary Action

Menu 는 커스텀 primary action 으로 만들 수 있습니다. primary action 은 사용자가 control 의 body 를 taps 혹은 clicks 했을 때 수행되고 menu presentation(위와 같은 메뉴를 보여주는 기능) 은 long press 혹은 ✅ (참고)menu indicator 를 click 하는 것과 같은 보조 제스처에서 발생합니다.

다음 코드는 menu 에 표시되는 advanced options 와 함께 책갈피를 추가하는 menu 를 만드는 예시입니다.

Menu {
// 🔥 long press 혹은 menu indicator 를 click 해야 등장한다.
    Button(action: addCurrentTabToReadingList) {
        Label("Add to Reading List", systemImage: "eyeglasses")
    }
    Button(action: bookmarkAll) {
        Label("Add Bookmarks for All Tabs", systemImage: "book")
    }
    Button(action: show) {
        Label("Show All Bookmarks", systemImage: "books.vertical")
    }
} label: {
    Label("Add Bookmark", systemImage: "book")
} primaryAction: {
// 🔥 taps 혹은 clicks.
    addBookmark()
}