SwiftUI에서 사이드바 메뉴를 만드는 방법

사이드바는 iPad 및 Mac과 같은 더 큰 화면에서 탐색하는 데 정말 유용합니다. 다중 플랫폼 SwiftUI 앱에 사이드바를 구현하는 방법을 살펴보겠습니다.

가장 먼저 해야 할 일은 새 Xcode 프로젝트를 열고 새 SwiftUI 파일을 만드는 것입니다. 이 예에서는 파일 이름을 SideBar로 지정합니다. 사이드바 파일 내에서 상용구 코드를 아래 코드로 대체할 것입니다.

struct Sidebar: View {
    var body: some View {
        NavigationView {
            List {
                Label("Books", systemImage: "book.closed")
                Label("Tutorials", systemImage: "list.bullet.rectangle")
                Label("Video Tutorials", systemImage: "tv")
                Label("Contacts", systemImage: "mail.stack")
                Label("Search", systemImage: "magnifyingglass")
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("Code")
        }

    }
}

위의 예에서는 사이드바에 대한 몇 가지 레이블이 있는 간단한 목록 보기를 만들었습니다. 그런 다음 단순히 .listStyle(SidebarListStyle()) 수정자를 추가하여 사이드바 스타일로 목록을 설정합니다. 또한 내비게이션 보기를 추가하여 멋진 제목 레이블을 가질 수 있고 나중에 사이드바 레이블에 내비게이션을 추가할 수 있습니다.

이제 이 코드를 iPad 시뮬레이터에서 실행하고 시뮬레이터를 90° 회전합니다. 이제 더 큰 iPad 화면에서 사이드바가 어떻게 보이는지 확인할 수 있습니다.



예제의 빈 공간을 채워서 이것이 실제 앱에서 어떻게 보이는지 봅시다. 먼저 Sidebar.swift 파일에서 NavigationView를 제거합니다. 그런 다음 ContentView 파일로 이동하여 아래 코드를 추가합니다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Sidebar()
            List(0 ..< 20) {_ in
                Text("Book")
            }
            .navigationTitle("Book List")
        }
        
        
    }
}

이제 애플리케이션을 실행하면 사이드바 옆에 모의 책 목록이 표시됩니다.



앱의 Mac 버전에서 이 사이드바를 사용할 수 있게 하려면 프로젝트에 몇 줄의 코드를 추가하기만 하면 됩니다.

가장 먼저 해야 할 일은 NavigationView 중괄호 사이의 코드를 추출하는 것입니다. 명령 단추를 누른 상태에서 목록을 클릭하여 이 작업을 수행할 수 있습니다. 그런 다음 아래로 스크롤하여 하위 보기 추출을 선택합니다. 하위 보기의 이름을 SideBarContent로 바꿉니다. 이제 NavigationView 아래에 #if, #else 및 #endif를 추가해야 합니다. 이렇게 하면 사이드바 레이아웃이 다른 운영 체제를 찾는 방법을 지정할 수 있습니다.

struct Sidebar: View {
    var body: some View {
        NavigationView {
            #if os(iOS)
            SideBarContent()
                .navigationTitle("Code")
            #else
            SideBarContent()
                .frame(minWidth: 200, idealWidth: 250,maxWidth: 300)
            #endif
        }

    }
}

위의 코드를 통해 사이드바 코드를 앱이 실행될 다른 OS(운영 체제)에 맞게 조정할 수 있습니다. 다른 운영 체제에서 코드를 실행하기 위한 요구 사항이 다르기 때문에 코드를 분리해야 합니다. #if 문의 첫 번째 부분에서 OS가 iOS인지 확인하고 iOS인 경우 탐색 제목으로 사이드바를 설정합니다. MacOS에서 지원되지 않기 때문에 .navigationTitle() 수정자를 여기에 추가해야 합니다. #else 문에서 우리가 해야 할 일은 Mac 앱 창의 최소 프레임을 설정하는 것뿐입니다. 마지막으로 if 문을 #endif로 끝냅니다.

이제 iOS와 MacOS 모두에서 사이드바 코드를 실행할 수 있습니다(Mac 시뮬레이터에서 실행하려면 Mac에 MacOS Big Sur를 설치해야 합니다).

다중 플랫폼 SwiftUI 앱에 기본 사이드바를 추가하는 것이 전부입니다. 내 Github에서 예제 코드를 확인하십시오.

💻👨🏻‍💻 행복한 코딩하세요! 💻👨🏻‍💻