検索フィールドsearchableのカスタマイズ方法-配置箇所の変更

この記事は約3分で読めます。
  • iOS:15.0以上
  • XCode(当サイトの環境):15.0.1

searchableビューモディファイアのplacementパラメータは、検索フィールドが表示される場所を指定するためのものです。このパラメータには、検索フィールドを配置する場所を示す値を指定します。

パラメータの設定値

SwiftUIでは、以下の5つの値がplacementパラメータで使用できます。

  1. .navigationBarDrawer:検索フィールドがナビゲーションバーに表示されます。
  2. navigationBarDrawer(displayMode:):navigationBarDrawerの表示方法に加えてスクロールした時の動作を指定できます。スクロールに追従して表示することが可能です。
  3. .sidebar:検索フィールドはナビゲーションビューのサイドバーに表示されます。
  4. .toolbar:検索フィールドがツールバーに表示されます。
  5. .automatic:SwiftUIが検索フィールドの配置を自動的に決定します。通常は、画面サイズやデバイスのタイプに応じて最適な配置が選択されます。

なお、iPhone向けでは表示方法の差異が出ないかもしれません

以下に、これらの配置オプションを使用した例を示します。なお、配置による動作の差異を見るだけなのでフィルタなどは動作しません。

import SwiftUI

struct Searchable_PlaceSmp: View {
    @State private var searchText = ""

    var body: some View {

        NavigationStack {
            List {
                ForEach(0..<100) { index in
                    Text("Item \(index)")
                }
            }
            .searchable(text: $searchText, placement:.toolbar, prompt: "検索文字列")
            .navigationTitle("Searchable List")
        }
    }
}

iPhoneの動作

navigationBarDrawer
navigationBarDrawer(displayMode: .always)

iPadの動作

navigationBarDrawer
navigationBarDrawer(displayMode: .always)
sidebar
toolbar

まとめ

検索フィールドにおいて、placementパラメータを設定することでフィールドの設置位置を変更することが出来ます。

sidebarやtoolbarは条件が合わないと見た目が変わったことがわかりにくいのですが、スクロールバーへの追従設定のありなしは使いやすい設定かと思います。

タイトルとURLをコピーしました