今更だけどios14でSearchBarを使いたい (SwiftUI)

ios14でSearchBarを使いたい (SwiftUI)

ios15以降ではsearchableを使えば、簡単に実装できそうです。ただし、ios14でも使いたい場合は自作する必要があります。

なので、UISearchBarを元に作りました。

コピペで動きます:

import SwiftUI
import UIKit

struct SearchBarUIView: UIViewRepresentable {
    @Binding var text: String
    let placeHolder: String?
    init(text: Binding<String>, placeHolder: String? = nil) {
        self._text = text
        self.placeHolder = placeHolder
    }
    func makeCoordinator() -> Coordinator {
        Coordinator(text: $text)
    }
    
    func makeUIView(context: Context) -> UISearchBar {
        let searchBar = UISearchBar()
        searchBar.searchBarStyle = .minimal
        searchBar.delegate = context.coordinator
        if let placeHolder = self.placeHolder {
            searchBar.placeholder = placeHolder
        }
        return searchBar
    }
    func updateUIView(_ uiView: UISearchBar, context: Context) {
        
    }
    class Coordinator: NSObject, UISearchBarDelegate {
        @Binding var text: String
        public init(text: Binding<String>) {
            self._text = text
        }
        func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
            self.text = searchText
        }
        func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
            searchBar.showsCancelButton = false
        }
        func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
            searchBar.showsCancelButton = true
        }
        func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
            searchBar.showsCancelButton = false
            searchBar.searchTextField.endEditing(true)
            self.text = ""
            searchBar.searchTextField.text = ""
        }
    }
}

struct SearchBarView: View {
    @Binding var text: String
    public let placeHodler: String?
    var body: some View {
        SearchBarUIView(text: $text, placeHolder: placeHodler)
    }
}

struct SearchBarView_Previews: PreviewProvider {
    static var previews: some View {
        SearchBarView(text: .constant(""), placeHodler: nil)
    }
}

それぞれのアプリでの要件を満たせるようにDelegateの部分をいじってください。

使用例:

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack {
            SearchBarView(text: $text, placeHodler: "hello")
            Spacer()
        }
        .padding()
    }
}

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

結果:

ちなみに、UIKitとSwiftUIの連携方法を毎回忘れるたびに、以下のチュートリアルを見てます😅
https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit