WWDC20 | App essentials in SwiftUI

 

App essentials in SwiftUI - WWDC20 - Videos - Apple Developer

 

 

 

 

 

화면에 표시되는 창부터 시작해서 테긋트 이미지 등 모든 필셀은

어떤 방식으로도 뷰라고 부를 수 있습니다(제일 작은 단위)

 

 

플랫폼은 앱이 표시되는 방식을 제어하여 개별 지역에 앱 조각을 표시할 수 있습니다

 

 

이러한 별개의 영역을 Scenes라고 부르고 있습니다 Window는 장면의 내용이

화면에 표시되는 일반적인 방법이라고 할 수 있습니다

 

아이패드나 맥오에스 같은 경우 화면분할을 한 창에 보여줄 수 있지만 아래 이미지처럼

한화면에 하나만 보여주는 방식의 창도 존재합니다

 

 

그래서 이걸 계층을 나눠서 설명하자면 

Apps - Scenes - Views로 나눌 수 있습니다

 

 

뷰는 화면에 보이는 모든것을 렌더링하고 함께 구성되어있어 복잡한 사용자 인터페이스를 만들 수 있습니다

 

현재 주황색으로 하단의 2개의 뷰처럼 뷰의 장면은 콘텐츠를 형성하기 때문에 플랫폼에서 독집적으로 표시할 수 있습니다

위로 올라가게되면 이전에 본 탭 창과 같이 여러 화면을 한 화면에 보여주기 위해 함께 구성될 수도 있습니다

 

 

이러한 모든 장면은 앱의 콘텐츠를 구성하고 있습니다 

 

SwiftUI코드로 알아보자면

현재 북클롭 리스트로 나타내있는 화면을 불러내기 위해서 하단의 이미지처럼 정의하고 있습니다

 

 

ReadingListViewer method를 사용하여 앱의 실제 인터페이스를 정의하고 있습니다

 

 

ReadingListViewer를 보자면 저렇게 NavigationView로 여러개만들어서 관리하고 있는걸 볼 수 있습니다

 

 

이렇게 이 코드로 통해서 알 수 있는 점은

현재 여기서 알 수 있는건 앱 - 신 - 뷰를 나눠서 확인할 수 있다는 점 입니다

 

 

ReadingListViewer는 ReadingListStore개체를 관찰하고 있는걸 알 수 있습니다(@ObserverObject)

또한 @StateObject속성을 사용해서 해당 객체의 소유자를 자기자신으로 선언하는걸 볼 수 있습니다

 

뷰와 앱 사용자 인터페이스 콘텐츠를 정의하는곳은 반드시 body 속성을 정의해야합니다

 

첫 번째 body some Scene은 장면을 반환하고 있으며

body some View는 장면을 반환하고 있습니다

 

 

@main은 프로그램 실행의 진입점 역할을 하는걸 허용하는 속성이고

Swift 5.3부터 지원하고 있습니다

 

 

일반적으로 Siwft 프로그램을 실행하려면 main.swift파일이 필요한데

@main 속성을 사용하면 해당 책임을 앱 구조체에 위임할 수 있습니다

그렇게 되면 앱이 화면에 나타나도록 실행 시 필요한 모든 설정을

자동으로 수행하고 있습니다

 

이러한 앱의 작동 방식을 이해하려면 사용자 인터페이스를 관리하고 있는

WindowGroup 장면에 대해서 더 자세히 알아야합니다

 

 

장면마다 다르다고 인식하고 다른 책에 영향이 미치지 않게끔 제공하고 있습니다

각 장면에 대한 공유 모델을 제공할 수 있지만 해당 장면의 뷰는 각 독립상태입니다

App Switcher

|

navigation title 을 통해서 수행되는데 iOS에서 탐색 표시줄과 앱 전환하는 장면에 관련된 제목을 보여주는데 사용하고 있습니다

 

맥에서는 앱이 여러 창을 지원하는것은 아주 보편적이라고 할 수 있습니다(command -N)

앱에서 WindowGroup을 사용하게되면 swiftUI는 팡리 메뉴에

새 장면을 인스턴스 생성을 지원하는 메뉴 항목을 제공합니다

 

또한 맥 OS는 Group화도 지원하고 있습니다 

 

 

Merge All Windows 클릭하면

하단처럼 볼 수 있습니다

 

 

기본적으로 창 내에 콘텐츠 제공

 

macOS / iPadOS

경우에만

 

 

 

 

각 화면을 독립적으로 관리하고 있고 별개의 씬이라고 판단하고 있습니다

 

 

 

 

여기서 씬을 자동적으로 저장되고 복원하고 있습니다

 

 

 

@main
struct BookClubApp: App {
    @StateObject private var store = ReadingListStore()

    @SceneBuilder var body: some Scene {
        WindowGroup {
            ReadingListViewer(store: store)
        }
        
    #if os(macOS)
        Settings {
            BookClubSettingsView()
        }
    #endif
    }
}

struct BookClubSettingsView: View {
    var body: some View {
        Text("Add your settings UI here.")
            .padding()
    }
}

struct ReadingListViewer: View {
    @ObservedObject var store: ReadingListStore

    var body: some View {
        NavigationView {
            List(store.books) { book in
                Text(book.title)
            }
            .navigationTitle("Currently Reading")
        }
    }
}

class ReadingListStore: ObservableObject {
    init() {}

    var books = [
        Book2(title: "Book #1", author: "Author #1"),
        Book2(title: "Book #2", author: "Author #2"),
        Book2(title: "Book #3", author: "Author #3")
    ]
}

struct Book: Identifiable {
    let id = UUID()
    let title: String
    let author: String
}

 

 

struct BookCommands: Commands {
    @FocusedBinding(\.selectedBook) private var selectedBook: Book?
    
    var body: some Commands {
        CommandMenu("Book") {
            Section {
                Button("Update Progress...", action: updateProgress)
                    .keyboardShortcut("u")
                Button("Mark Completed", action: markCompleted)
                    .keyboardShortcut("C")
            }
            .disabled(selectedBook == nil)
        }
    }
    
    private func updateProgress() {
        selectedBook?.updateProgress()
    }
    private func markCompleted() {
        selectedBook?.markCompleted()
    }
}

 

❤️잘못된 부분이 있다면 댓글로 남겨주세요!❤️

 

 

 

App essentials in SwiftUI - WWDC20 - Videos - Apple Developer