[iOS - SwiftUI] 튜토리얼 - 11. toolbar, ToolbarItemGroup, sheet 사용 방법

toolbar

toolbarItemGroup

toolbar

• TabBar와의 차이점
  • TabBar: 현재 컨텍스트와 연관되지 않은 화면이동
  • ToolBar: 현재 컨텍스트와 관련된 항목 추가, 삭제, 주석 추가, 사진 촬영과 같은 일

* toolbar의 Human Interface guide 관련 구체적인 내용은 이전 포스팅 글 참고

• toolbar를 사용하기 위해 네비게이션 뷰로 이루어진 뷰 준비

import SwiftUI

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        Text("Toolbar 예제")
          .padding()
      }
      .navigationTitle("타이틀")
    }
  }
}

• toolbar를 추가할땐 navigationTitle을 추가하듯이 바로 밑에다 .toolbar로 선언

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        Text("Toolbar 예제")
          .padding()
      }
      .navigationTitle("타이틀")
      .toolbar { // <-
        Button {
          print("tap!")
        } label: {
          Label("Profile", systemImage: "person.crop.circle")
        }
      }
    }
  }
}

toolbar에 버튼을 추가 - 우측 상단에 버튼이 생성

ToolbarItemGroup

• .toolbar 클로저 안에 ToolbarItemGroup(placement:) 사용이 가능

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        Text("Toolbar 예제")
          .padding()
      }
      .navigationTitle("타이틀")
      .toolbar {
        ToolbarItemGroup(placement: .bottomBar) { // <-
          Button("First") {
            print("tap first button")
          }
          Button("Second") {
            print("tap second button")
          }
        }
      }
    }
  }
}

하단에 생성한 ToolbarItemGroup

• 만약, ToolbarItemGroup(placement: .keyboard)로 하면 키보드가 올라올때 자동으로 그 위에 붙어있는 툴바로 변경

struct ContentView: View {
  @State var name: String = ""
  
  var body: some View {
    NavigationView {
      VStack {
        TextField("input some text", text: $name)
          .padding()
          .background(Color(uiColor: .secondarySystemBackground))
        Text("Toolbar 예제")
          .padding()
      }
      .navigationTitle("타이틀")
      .toolbar {
        ToolbarItemGroup(placement: .keyboard) { // <-
          Button("First") {
            print("tap first button")
          }
          Button("Second") {
            print("tap second button")
          }
        }
      }
    }
  }
}

* 참고

https://developer.apple.com/tutorials/swiftui/working-with-ui-controls