swiftUI List, Navigation

List

List는 목록 인터페이스를 구형하기 위한 컴포넌트이다. UIKit의 UITableView와 같은 기능을 한다.

 

Example1

import SwiftUI

struct ContentView : View {
    var body: some View {
        List {
            Text("A List Item")
            Text("A Second List Item")
            Text("A Third List Item")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

List 키워드안에 요소들을 하나 씩 집어넣으면 List가 완성된다. 기본적으로 버튼처럼 사용이 가능한데 현재는 아무런 속성없이 Text 컴포넌트만 추가를 해서 작동이 되지 않는다. UITable보다 쉽고 직관적으로 변했다.

 

 

Example2

import SwiftUI

struct Ocean: Identifiable {
    let name: String
    let id = UUID()
}

struct ContentView : View {
    private let oceans = [
        Ocean(name: "Pacific"),
        Ocean(name: "Atlantic"),
        Ocean(name: "Indian"),
        Ocean(name: "Southern"),
        Ocean(name: "Arctic")
    ]
    
    var body: some View {
        List(oceans) {
            Text($0.name)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

List의 인자안에 배열을 넣어서 만들었다. 후행 클로저를 사용하여 인자 대신에 $0 기호를 사용하여서 Ocean 구조체의 name을 Text 컴포넌트로 표시하는 List이다.

 

 

---

NavigationView

네비게이션은 계층 구조에서 View 스택을 표현하기 위한 컴포넌트이다.

 

Example1

import SwiftUI

struct ContentView : View {
    private let messages = [ "Hello", "How are you?"]
    
    var body: some View {
        NavigationView {
            List(messages, id: \.self) { message in
                NavigationLink(destination: DetailsView(message: message)) {
                Text(message)
                }
            }.navigationBarTitle("Messages")
        }
    }
}

struct DetailsView: View {
    let message: String
    
    var body: some View {
        VStack {
            Text(message)
                .font(.largeTitle)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

messages 배열이 담겨있는 리스트를 NavigationView로 표현한 예제이다.

 

 

우선 네비게이션으로 표시할 컴포넌트를 NavigationView 구조체안에 감싸서 사용한다.

NavigationView에 navigationBarTitle을 통해 네비게이션의 타이틀을 Messages로 표시하였다.

NavigationView의 스택 요소는 NavigationLink 컴포넌트를 통해 만들 수 있다.

예제에서는 List 컴포넌트를 통해 네비게이션 요소를 추가하였다.

 

Example2

import SwiftUI

struct ContentView : View {
    
    struct Ocean: Identifiable, Hashable {
        let name: String
        let id = UUID()
    }
    
    private var oceans = [
        Ocean(name: "Pacific"),
        Ocean(name: "Atlantic"),
        Ocean(name: "Indian"),
        Ocean(name: "Southern"),
        Ocean(name: "Arctic")
    ]
    @State private var multiSelection = Set<UUID>()

    var body: some View {
        NavigationView {
            List(oceans, selection: $multiSelection) {
                Text($0.name)
            }
            .navigationTitle("Oceans")
            .toolbar { EditButton() }
        }
        Text("\(multiSelection.count) selections")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

List의 Example2 예제에서 사용한 리스트를 선택할 수 있는 버튼을 추가하여 클릭한 리스트의 개수를 제일 하단에 표시해주는 예제이다.

 

list의 selection 파라미터는 리스트안의 요소를 선택할 수 있도록 도와준다. 예제에서는 @State로 바인딩된 UUID타입의 Set 자료구조 변수를 지정하였다. 그다음에 NavigationView의 toolbar 속성을 이용해서 EditButton을 네비게이션 바에 추가하였고 리스트를 선택하면 multiSelection Set안에 데이터의 개수가 바뀌면서 하단의 택스트의 숫자가 바뀌는 예제이다.

 

Example3

import SwiftUI

struct ContentView : View {
    
    struct Sea: Hashable, Identifiable {
        let name: String
        let id = UUID()
    }
    
    struct OceanRegion: Identifiable, Hashable {
        let name: String
        let seas: [Sea]
        let id = UUID()
    }
    
    private let oceanRegions: [OceanRegion]  = [
            OceanRegion(name: "Pacific",
                        seas: [Sea(name: "Australasian Mediterranean"),
                               Sea(name: "Philippine"),
                               Sea(name: "Coral"),
                               Sea(name: "South China")]),
            OceanRegion(name: "Atlantic",
                        seas: [Sea(name: "American Mediterranean"),
                               Sea(name: "Sargasso"),
                               Sea(name: "Caribbean")]),
            OceanRegion(name: "Indian",
                        seas: [Sea(name: "Bay of Bengal")]),
            OceanRegion(name: "Southern",
                        seas: [Sea(name:"Weddell")]),
            OceanRegion(name: "Arctic",
                        seas: [Sea(name: "Greenland")])
        ]
    
    @State private var singleSelection: UUID?
    
    var body: some View {
        NavigationView {
            List(selection: $singleSelection) {
                ForEach(oceanRegions) { region in
                    Section(header: Text("Major \(region.name) Ocean Seas")) {
                        ForEach(region.seas) { sea in
                            Text(sea.name)
                        }
                    }
                }
            }
            .navigationTitle("Oceans and Seas")
            .toolbar { EditButton() }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

5대양을 Section 별로 나누어서 리스트를 제공하고 다중 선택이 아닌 단일 선택만 할 수 있는 2차원 리스트 예제이다.

 

 

우선 바다이름과 고유식별자가 있는 Sea 구조체와 대양의 이름, Sea 배열, 식별자가 들어 있는 OceanRegion구조체를 만든 뒤 실제 자료가 들어있는 OceanRegion 배열인 oceanRegions를 만들었다.

그리고 바인딩 변수에는 Set 타입이 아닌 UUID 타입의 변수를 선언해서 단일 선택만 할 수 있도록 변경하였다.

그 다음 반복문을 통해 대양별로 Section을 나눈 뒤 Section의 타이틀은 대양의 이름으로 지정하고 Section안에는 대양안에 들어있는 Sea 배열로 표현하였다.