SwiftUI : SearchView

본 게시글은 Artur Rymarz님의 게시글을 참고하여 작성된 글 입니다.

 

SearchView에 대해 알아보도록 합시다.

SearchView

SwiftUI에서 SearchView를 사용하는 방법은 두 가지가 있습니다. 

 

첫번째 UIKit을 가져와서 구현하는방법

두번째 SwiftUI 자체로 간단하게 코드를 구현하는 방법

 

일단 SwiftUI로 구현하는 방법부터 알아보도록 하겠습니다.

 

먼저 새로운 SwiftUI 파일을 만들어서 SearchBar 이라고 정해주고, 아래 코드를 입력합니다.

import SwiftUI

struct SearchBar: View {
    
    @Binding var text: String

    var body: some View {
        HStack {
            HStack {
                Image(systemName: "magnifyingglass")

                TextField("Search", text: $text)
                    .foregroundColor(.primary)

                if !text.isEmpty {
                    Button(action: {
                        self.text = ""
                    }) {
                        Image(systemName: "xmark.circle.fill")
                    }
                } else {
                    EmptyView()
                }
            }
            .padding(EdgeInsets(top: 4, leading: 8, bottom: 4, trailing: 8))
            .foregroundColor(.secondary)
            .background(Color(.secondarySystemBackground))
            .cornerRadius(10.0)
        }
        .padding(.horizontal)
    }
}

이제 검색 창과 목록을 포함하는 뷰를 만들어야합니다.

import SwiftUI

struct SearchView: View {
    let array = [
        "김서근", "포뇨", "하울", "소피아", "캐시퍼", "소스케",
        "치히로", "하쿠", "가오나시", "제니바", "카브", "마르클",
        "토토로", "사츠키", "지브리", "스튜디오", "캐릭터"
    ]
    
    @State private var searchText = ""
    
    var body: some View {
        NavigationView {
            VStack {
                SearchBar(text: $searchText)
                    .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
                
                List {
                    ForEach(array.filter{$0.hasPrefix(searchText) || searchText == ""}, id:\.self) {
                        searchText in Text(searchText)
                    }
                } //리스트의 스타일 수정
                .listStyle(PlainListStyle())
                  //화면 터치시 키보드 숨김
                .onTapGesture {
                    hideKeyboard()
                }
            }
            .navigationBarTitle("검색기능")
            .navigationBarItems(trailing:
                                    HStack{
                                        Button(action: {
                                        }) {
                                            HStack {
                                                Text("서근")
                                                    .foregroundColor(.black)
                                                Image(systemName: "folder.fill")
                                            }
                                        }
                                    }
            )
        }
    }
}

위 코드를 보면 '화면 터치시 키보드 숨김' 이라는 코드를 확인 할 수 있는데, 저것을 사용하려면 아래와 같은 코드를 입력해줘야 사용 가능합니다. SwiftUI에서는 아직 지원하지 않는 기능이기 때문에, UIKit을 가져오겠습니다.

//캔버스 컨텐츠뷰
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        SearchView()
    }
}


//화면 터치시 키보드 숨김
#if canImport(UIKit)
extension View {
    func hideKeyboard() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}
#endif

 

읽어주셔서 감사합니다🤟

 

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_SearchView_TUT