[Swift] SwiftUI で実装した searchable の見た目をカスタマイズする

初めに

色々と調べたものの情報が全く見当たらず困り....
（あったが全く動作しないものが多く困った...）

英語の細かい文献でようやく見つけ、また機会があると思って残しておきます。

SwiftUI の searchable に関して

searchableはiOS15から追加された、検索フィールドを簡単に実装できるものです。

今回の状況について

引数のplacementという実装場所を指定できる引数があります。.navigationBarDrawer（)をセットすることで、ナビゲージョンバーに検索バーを設定することができます。

UIKitの時と比べて、ナビゲーションにカスタマイズせずに検索バーを実装できるのは大変ありがたいです。

.swift

struct DemoView: View {
    
    @State var text = ""
    
    var body: some View {
        NavigationView {
            // Some View
        }
        .searchable(
            text: $text,
            placement: .navigationBarDrawer(displayMode: .always),
            prompt: Text("placeholder")
        )
    }
}

これを実装した際に、詳細にカスタマイズしたいと思ったので、記載していきます。

実装

動作するものを写真付きで列挙していきます。

今回紹介する方法は、appearanceを操作します。
UISearchBarをラップしたカスタムViewを使いたくないためです。

※全ての画面で反映されてしまうため、個別に実装したい場合は、要件にそぐわないかと思います。※

アイコンの画像と色を変更

今回は例として、画像にSF Symbols（person）を使っています。

.swift

let person = UIImage(systemName: "person")
let image = person?.withTintColor(.red, renderingMode: .alwaysOriginal)
UISearchBar.appearance().setImage(image, for: .search, state: .normal)

検索バーの背景色を変更

.swift

UISearchBar.appearance().backgroundColor = .blue

検索バーのテキストフィールド背景色を変更

.swift

UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .purple

検索バーの文字色を変更

この情報がなかなか見つからず大変でした。
appearanceにあるtintColor、barTintColorでは適応されません。

.swift

NavigationView {
    // Some View
}
.searchable(
    text: $text,
    placement: .navigationBarDrawer(displayMode: .always),
    prompt: Text("placeholder")
)
.foregroundColor(.white) // <- here

foregroundColorを設定することで色を変更することができます。

ただし、この実装はこの画面にあるViewに影響がでるので、NavigationView配下にあるViewでは、色を個別に上書く必要があるので注意しましょう。

終わりに

今回は自分に必要だったものをまとめたので、
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self])
で他にカスタマイズできるものがあると思います。

過去のバグとして上がっていましたが、appearance系のカスタマイズは、一部のOSで適応されないことがあるようです。OSが上がった場合に動作の保証はできないので、注意してくださいmm