Place Search コンポーネント

Places UI キットの Place Search コンポーネントは、場所検索の結果をリストにレンダリングします。

場所検索のリストはカスタマイズできます。次の項目を指定できます。

表示するコンテンツ
縦向きのメディアサイズ
テキストの切り捨て
向き
ブランドとアプリのデザイン言語に合わせたテーマのオーバーライド
アトリビューションの位置
場所を選択できるかどうか

リクエストをカスタマイズして、SearchByTextRequest または SearchNearbyRequest を実行することもできます。

課金

SearchByTextRequest() または PlaceSearchViewRequest() バインディング値が変更されるたびに、課金されます。

アプリにプレイス検索を追加する

PlaceSearchView class を使用して Place Search ウィジェットを追加します。

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

アプリでテキスト検索または周辺検索の結果を読み込む場合は、PlaceSearchViewRequest の値を更新します。

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

コンポーネントの読み込み時、場所の選択時、コンポーネントの読み込みエラー発生時にコールバックを受け取ることもできます。

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

Place Search コンポーネントをカスタマイズする

コンテンツのカスタマイズ

コンポーネントに表示するコンテンツを指定する必要があります。

この例では、場所の住所と評価を表示するようにコンポーネントを構成します。

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

プレイス検索コンポーネントに表示されるコンテンツの次の側面を必要に応じてカスタマイズすることもできます。

content: コンポーネントに表示されるコンテンツ。
mediaSize: フラグメントの縦向きの写真のサイズ。デフォルトは small です。コンテンツで指定。
preferTruncation: 各場所の詳細ビューのテキストを切り捨てるかどうか。デフォルトは false です。
theme: PlacesMaterialTheme から継承するカスタムテーマ。テーマ設定の詳細
attributionPosition: コンポーネントの上部または下部に Google マップの帰属表示を表示するかどうか。デフォルトは .top です。
selectable: リスト内の各場所が選択可能かどうか。選択可能な場合、場所が選択された後に onPlaceSelected クロージャが呼び出されます。デフォルトは false です。

カスタマイズ構成を PlaceSearchConfiguration に追加します。

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

向きをカスタマイズする

デフォルトの向きは縦向きです。PlaceSearchView で水平方向を指定できます。

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

テーマをカスタマイズする

デフォルトのスタイル属性をオーバーライドするテーマを指定できます。デフォルトは PlacesMaterialTheme です。

テーマ設定について詳しくは、カスタムスタイリングのセクションをご覧ください。

Places UI Kit はデフォルトでダークモードを提供するため、ダークモードとライトモードの両方をカスタマイズする必要がある場合があります。ダークテーマをカスタマイズするには、.dark と attribution.darkModeColor の値をカスタムテーマに追加します。

例

Place Search コンポーネントを追加する

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}

テーマをカスタマイズする

Places UI Kit はデフォルトでダークモードを提供するため、ダークモードとライトモードの両方をカスタマイズする必要がある場合があります。ダークテーマをカスタマイズするには、カスタムテーマに .dark と attribution.darkModeColor の値を追加します。

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}