[iOS - SwiftUI] 네비게이션 바 검색 창 구현 방법 (searchable, automatic, navigationBarDrawer)

네비게이션 바 검색 창

NavigationView에 붙인 searchable

검색 창 구현 방법

• List에 띄울 뷰와 데이터 모델 준비

struct SomeView: View {
  var name: String
  
  var body: some View {
    Text(name)
  }
}

struct SomeData: Identifiable {
  var name: String
  var id: String { self.name }
}

• ContentView에 필요한 프로퍼티 준비
  • searchQueryString: 검색창에서 값을 입력할 때 입력될 프로퍼티
  • datas: 리스트에 표출할 데이터 
  • filteredDatas: 검색 결과 필터링된 데이터

* 대소문자 상관 없이 검색하기 위해서 string.contains()가 아닌, string.localizedStandardContains()사용

struct ContentView: View {
  @State var searchQueryString = ""
  var datas = (0...100).map(String.init).map(SomeData.init)
  var filteredDatas: [SomeData] {
    if searchQueryString.isEmpty {
      return datas
    } else {
      return datas.filter { $0.name.localizedStandardContains(searchQueryString) }
    }
  }
  
  var body: some View {
  }
}

• NavigationView, List 선언

  var body: some View {
    NavigationView {
      List(filteredDatas) { data in
        NavigationLink {
          SomeView(name: data.name)
        } label: {
          Text(data.name)
        }
      }
      .listStyle(.plain)
      .navigationTitle("Search Test")
    }

• NavigationView 밑에 searchable(text:placement:prompt:) 사용하면 완료

NavigationView {
  List(filteredDatas) { data in
    NavigationLink {
      SomeView(name: data.name)
    } label: {
      Text(data.name)
    }
  }
  .listStyle(.plain)
  .navigationTitle("Search Test")
}
.searchable( // <-
  text: $searchQueryString,
  placement: .navigationBarDrawer,
  prompt: "검색 placholder..."
)

• searchable 밑에 onSubmit을 사용하여 검색 버튼을 눌렀을때 입력한 경우 처리

.onSubmit(of: .search) {
  print("검색 완료: \(searchQueryString)")
}

• viewModel을 사용하고 있는 경우, onChange에서 값 변경 이벤트를 캐치하여 처리

.onChange(of: searchQueryString) { newValue in
  // viewModel 사용 시 이곳에서 새로운 값 입력
  print("검색 입력: \(newValue)")
}

searchable에서 placement 종류

• .navigationBarDrawer - 검색창이 숨겨져있고, 네비게이션을 밑으로 내렸을때만 검색창이 표출

• .navigationBarDrawer(displayMode: .always) - 검색창이 숨겨져 있지 않고 항상 표출

• .automatic - iOS, macOS, iPadOS 플랫폼마다 다르게 적용 (iOS는 navigationBarDrawer 적용)
• .sidebar - 사이드바에 적용되는 검색창
• .toolbar - 툴바에 적용되는 검색창

* 전체 코드: https://github.com/JK0369/ExSearchBar

 

* 참고

https://useyourloaf.com/blog/making-swiftui-views-searchable/

https://developer.apple.com/documentation/swiftui/searchfieldplacement/sidebar

https://developer.apple.com/documentation/swiftui/searchfieldplacement/toolbar

https://developer.apple.com/documentation/swiftui/view/searchable(text:placement:)

https://developer.apple.com/documentation/swiftui/searchfieldplacement