SwiftUI 튜토리얼 6-1 복합 인터페이스 구성하기

App Design and Layout - Composing Complex Interfaces

랜드 마크의 홈 화면에는 각 카테고리 내에서 가로로 스크롤되는 랜드 마크와 함께 카테고리 스크롤 목록이 표시됩니다. 이 기본 네비게이션을 구축 할 때 구성된 뷰가 다양한 장치 크기 및 방향에 어떻게 적응할 수 있는지 살펴 봅니다.
각 스탭을 수행하여 이 프로젝트를 빌드하거나 완성 된 프로젝트를 다운로드하여 직접 살펴보세요

The home screen for Landmarks shows a scrolling list of categories, with horizontally scrolling landmarks within each category. As you build this primary navigation, you’ll explore how composed views can adapt to different device sizes and orientations.

Follow the steps to build this project, or download the finished project to explore on your own.

ComposingComplexInterfaces.zip

6.34MB

 

 

 

 

홈 뷰 추가하기(Add a Home View)

이제 Landmarks 앱에 필요한 모든 뷰를 확보 했으므로 이제 뷰를 통합 할 수있는 홈을 제공해야합니다. 홈 뷰에는 다른 모든 뷰가 포함되어있을뿐만 아니라 랜드 마크를 탐색하고 표시하는 방법도 제공됩니다.

Now that you have all of the views you need for the Landmarks app, it’s time to give them a home — a view to unify the views. The home view not only contains all of the other views, it also provides the means of navigating through and displaying your landmarks.

 

 

 

 

 

Step 1

Home.swift 라는 파일명으로 새로운 파일을 만들고 CategoryHome라는 커스텀 뷰를 정의합니다.

Create a custom view called CategoryHome in a new file, named Home.swift.

import SwiftUI

struct CategoryHome: View {
    var body: some View {
        Text("Landmarks Content")
    }
}

struct CategoryHome_Previews: PreviewProvider {
    static var previews: some View {
        CategoryHome()
    }
}

 

 

 

 

 

 

 

 

Step 2

랜드 마크 목록 대신 새 CategoryHome뷰를 표시하도록 scene delegate를 수정합니다.

Modify the scene delegate so that it displays the new CategoryHome view instead of the landmarks list.

import SwiftUI
import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).

        // Use a UIHostingController as window root view controller
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(
                rootView: CategoryHome()
                    .environmentObject(UserData())
            )
            self.window = window
            window.makeKeyAndVisible()
        }
    }
}

 

 

 

 

홈 뷰는 랜드 마크 앱의 루트 역할을하므로 다른 모든 뷰를 표시 할 수있는 방법이 필요합니다.

The home view serves as the root of the Landmarks app, so it needs a way to present all of the other views.

Step 3

다양한 랜드마크 뷰들의 호스트 역할로 NavigationView를 추가합니다.
NavigationLink 인스턴스 및 관련 수정자와 함께 네비게이션 뷰들을 사용하여 앱에서 계층적인 네비게이션 구조를 구축 할 수 있습니다.

Add a NavigationView to host the different views in Landmarks.

You use navigation views along with NavigationLink instances and related modifiers to build hierarchical navigation structures in your app.

import SwiftUI

struct CategoryHome: View {
    var body: some View {
        NavigationView {
            Text("Landmarks Content")
        }
    }
}

struct CategoryHome_Previews: PreviewProvider {
    static var previews: some View {
        CategoryHome()
    }
}

 

 

 

 

 

 

 

 

Step 4

Featured로 네비게이션 타이틀을 추가합니다.

Set the title of the navigation bar to Featured.

import SwiftUI

struct CategoryHome: View {
    var body: some View {
        NavigationView {
            Text("Landmarks Content")
                .navigationBarTitle(Text("Featured"))
        }
    }
}

struct CategoryHome_Previews: PreviewProvider {
    static var previews: some View {
        CategoryHome()
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

카테고리 리스트 생성하기(Create a Categories List)

Landmarks 앱은 쉽게 탐색 할 수 있도록 모든 범주를 세로 열에 정렬 된 별도의 행으로 표시합니다. 수직 및 수평 스택을 결합하고 목록에 스크롤을 추가하여이 작업을 수행합니다.

The Landmarks app displays all categories in separate rows arranged in a vertical column for easier browsing. You do this by combining vertical and horizontal stacks, and adding scrolling to the list.

 

 

 

 

Step 1

그룹화한 categories프로퍼티를 생성합니다.

Dictionary 구조의 init(grouping:by:) 이니셜 라이저를 사용하여 랜드 마크를 카테고리로 그룹화합니다.
스타터 프로젝트 파일에는 각 샘플 랜드 마크에 대해 사전 정의 된 카테고리가 포함되어있습니다.

Group landmarks into categories using the Dictionary structure’s init(grouping:by:) initializer, keying off of the landmarks’ category property.

The starter project file includes predefined categories for each of the sample landmarks.

import SwiftUI

struct CategoryHome: View {
    var categories: [String: [Landmark]] {
        Dictionary(
            grouping: landmarkData,
            by: { $0.category.rawValue }
        )
    }
    
    var body: some View {
        NavigationView {
            Text("Landmarks Content")
                .navigationBarTitle(Text("Featured"))
        }
    }
}

struct CategoryHome_Previews: PreviewProvider {
    static var previews: some View {
        CategoryHome()
    }
}

 

 

 

 

 

 

 

 

Step 2

List를 사용하여 랜드마크의 카테고리를 표시합니다.
Category 이름은 목록의 각 항목을 식별하며 열거되기 때문에 다른 범주 중에서 고유해야합니다.

Display the categories in Landmarks using a List.

The Landmark.Category case name identifies each item in the list, which must be unique among other categories because it’s an enumeration.

import SwiftUI

struct CategoryHome: View {
    var categories: [String: [Landmark]] {
        Dictionary(
            grouping: landmarkData,
            by: { $0.category.rawValue }
        )
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(categories.keys.sorted(), id: \.self) { key in
                    Text(key)
                }
            }
            .navigationBarTitle(Text("Featured"))
        }
    }
}

struct CategoryHome_Previews: PreviewProvider {
    static var previews: some View {
        CategoryHome()
    }
}