SwiftUI로 탐색 모음의 비밀 해결

한 보기에서 다른 보기로 이동하거나 제목과 단추만 표시하는 것은 현대 iOS 응용 프로그램의 가장 관건적인 구축 블록 중 하나이다.거의 모든 응용 프로그램에 이 기능이 있다.SwiftUI는 탐색 모음을 표시하고 제목을 설정하고 버튼을 추가하는 방법에 대해 새로운 방법을 제공합니다.어디 보자.

탐색 뷰 표시

SwiftUI를 사용하여 탐색 모음을 표시하려면 이 목적을 담당하는 NavigationView 구성 요소를 사용해야 합니다.그것은 우리에게 Content 유형의 View을 제공할 것을 요구한다.Content은 텍스트 필드에서 스크롤 가능한 내용에 이르는 모든 항목입니다.간단히 말해서 모든 SwiftUI 뷰를 사용할 수 있습니다.
탐색 제목을 표시하기 위해 SwiftUI는 UIKit를 사용할 때와는 전혀 다른 방법을 사용합니다.우리는 그것을 NavigationView이 아니라 Content으로 설정해야 한다.

var body: some View {
  NavigationView {
    Text("Hello, world!")
      .navigationTitle("Test")
  }
}

SwiftUI 프레임워크는 NavigationView의 크기를 지정하는 방법을 제공합니다.우리는 .navigationBarTitleDisplayMode에 Content 수정기를 사용하고 디스플레이 모드를 제공하기를 희망합니다.DisplayMode 유형은 세 가지 상황의 매거진이다.

automatic - 이전 내비게이션 항목에서 계승하기;

inline - 내비게이션 사이즈가 작다.

large - 큰 내비게이션 사이즈.

코드에서 그것을 어떻게 사용하는지 보여 주십시오.

NavigationView {
  Text("Hello, world!")
    .navigationTitle("Title")
    .navigationBarTitleDisplayMode(.inline)     
}

우리가 NavigationView을 더 큰 사이즈로 바꾸고 싶을 때, 우리는 .inline을 .large으로 바꾸기만 하면 된다.

NavigationView {
  Text("Hello, world!")
    .navigationTitle("Title")
    .navigationBarTitleDisplayMode(.large)
}

탐색 보기 버튼 추가

이제 NavigationView을 어떻게 표시하는지 알았으니 단추를 추가하는 방법을 찾아보자.이전에 SwiftUI를 사용할 때 .navigationBarItems 뷰 수정기를 사용했지만 지금은 사용을 권장하지 않는다는 점을 지적하고자 합니다.최신 SwiftUI 버전에서는 .toolbar 수정자를 호출해야 합니다.우리는 어떻게 각종 장면에서 그것을 사용하는지 깊이 있게 토론할 것이다.

단추 추가

Button의 전면 및 후면에 NavigationView을 추가하겠습니다.이를 실현하기 위해서는 .toolbar 보기 수정기를 사용하여 .ToolbarItem 보기를 전달해야 한다..ToolbarItem을 초기화하려면 위치와 내용을 제공해야 합니다.placement 매개 변수는 유형 ToolbarItemPlacement으로 구조입니다.배치를 관리할 수 있는 몇 가지 방법이 있지만 현재 우리는 그 중 두 가지를 연구할 것이다.

navigationBarLeading - 내비게이션 표시줄 앞의 단추를 표시합니다.

navigationBarTrailing - 탐색 모음의 후면에 있는 버튼을 표시합니다.

var body: some View {
  NavigationView {
    Text("Buttons Example")
      .navigationTitle("Buttons")
      .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
          Button(action: {
            print("Refresh")
          }) {
            Label("Send", systemImage: "paperplane.fill")
          }
        }
        ToolbarItem(placement: .navigationBarTrailing) {
          Button(action: {
            print("Refresh")
          }) {
            Label("Refresh", systemImage: "arrow.clockwise")
          }
        }
      }
  }
}

여러 버튼 추가

이제 우리는 하나의 단추를 추가하는 방법을 알게 되었고, 여러 개의 단추를 추가하는 방법을 배울 것이다.이번에는 도구막대 항목을 대표하는 ToolbarItemGroup을 사용해야 합니다.

.toolbar {
  ToolbarItemGroup(placement: .navigationBarLeading) {
    Button(action: {
      print("Send")
    }) {
      Label("Send", systemImage: "paperplane.fill")
    }
  }

  ToolbarItemGroup(placement: .navigationBarTrailing) {
    Button(action: {
      print("Refresh")
    }) {
      Label("Refresh", systemImage: "arrow.clockwise")
    }

    Button(action: {
      print("Edit")
    }) {
      Label("Edit", systemImage: "slider.horizontal.3")
    }
  }
}

여러 개의 단추를 추가할 때, 우리는 너무 미쳐서는 안 된다.결국 프로그램은 내비게이션 표시줄 제목을 덮을 수 있기 때문에 사용하기 어려워질 수도 있다.

탐색 뷰 색상 변경

현재 SwiftUI에서는 NavigationView의 색상을 변경할 수 없습니다.이를 위해 UIKit로 돌아가 UINavigationBarAppearance 객체를 사용하여 탐색 모음을 사용자 정의해야 합니다.
SwiftUI 탐색 모음의 색상을 변경하려면 다음과 같이 init 메서드를 SwiftUI 보기에 추가하고 탐색 모음의 모양을 변경할 수 있습니다.

init() {
  let coloredAppearance = UINavigationBarAppearance()
  coloredAppearance.configureWithOpaqueBackground()
  coloredAppearance.backgroundColor = .systemRed
  coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
  coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]

  UINavigationBar.appearance().standardAppearance = coloredAppearance
  UINavigationBar.appearance().compactAppearance = coloredAppearance
  UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance

  UINavigationBar.appearance().tintColor = .white
}

var body: some View {
  NavigationView {
    Text("Navigtion Bar with different color")
      .navigationTitle("Title")
  }
}

코드에서 볼 수 있듯이, 우리는 배경 색과 제목 텍스트 색을 바꾸는 등 많은 일을 하고 있다.시스템 색상을 사용하거나 iOS 애플리케이션 자원 디렉토리에서 색상을 가져올 수 있습니다.

TL；박사 01 명

내비게이션 표시줄은 현대 iOS와 아이패드OS 응용 프로그램의 중요한 요소다.대부분의 응용 프로그램은 한 개의 화면이 아니라, 우리 사용자들은 응용 프로그램에서 왔다 갔다 내비게이션을 해야 한다.
SwiftUI는 새로운 보기 NavigationView을 제공합니다. 내비게이션에 대한 우리의 생각과 UIKit에 비해 어떻게 사용하는지 완전히 바꿔야 합니다.
SwiftUI를 사용하면 화면에 내비게이션을 추가하고 제목을 변경하며 내비게이션 표시줄에 단추를 추가하는 것이 매우 간단합니다.하지만 만약 우리가 색깔을 바꾸고 싶다면, 우리는 UIKit로 돌아가야 한다.나는 이런 상황이 곧 바뀔 것이라고 믿는다.

링크

Sample code

The Complete Guide to NavigationView in SwiftUI

SwiftUI NavigationView tutorial with examples

Navigation Bar Styling in SwiftUI

Navigation bar styling in SwiftUI

Customizing SwiftUI Navigation Bar

Custom NavigationView Bar in SwiftUI

https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-bar-items-to-a-navigation-view

Customizing SwiftUI Navigation Bar