SwiftUIでSearchBarを作ってみた

はじめに

SwiftUIにSearchBarが無くて困ったので、自作してみました。
paddingやcornerRadius等の値は多少雑になっているので、気になる方は数値を調整してください。

SerachBar

struct SearchBar: View {

    @Binding var text: String
    @State private var isEditing = false

    var onSearchButtonClick: () -> Void

    var body: some View {
        ZStack(alignment: .leading) {
            HStack {

                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.lightGray))
                    .padding(.leading, 5)

                TextField("Search", text: $text,
                          onCommit: {
                            self.onSearchButtonClick()
                          }
                )
                .padding(.top, 5)
                .padding(.bottom, 5)
                .padding(.leading, -5)
                .onTapGesture {
                    self.isEditing = true
                }

                if isEditing {
                    Button(action: {
                        self.text = ""
                    }, label: {
                        Image(systemName: "multiply.circle.fill")
                            .foregroundColor(.gray)
                            .offset(x: -5)
                    })
                }

            }
        }
        .background(Color(.systemGray6))
        .cornerRadius(8)
    }

    public func onSearchButtonClick(action: () -> Void) -> some View {
        action()
        return self
    }
}

見た目はこれで完成ですが、キーボードのreturnKeyがデフォルトのままなので、変更します。

returnKeyTypeを変更

ライブラリを追加

pod 'Introspect'

他の記事を見ていると、ライブラリなしでもできるみたいですが、自分の環境だと動作しませんでした。

SearchBarを呼び出すViewにて

import SwiftUI
import Introspect

struct SomeView: View {
    @State var searchWord: String = ""

    var body: some View {
        SearchBar(text: $searchWord,
                  onSearchButtonClick: {
                    print("Did tap search button")
                  })
            .padding(.leading, 5)
            .padding(.trailing, 5)
            .introspectTextField { textField in
                textField.returnKeyType = .search
            }
    }
}

結果

以上です。