Componente Place Search

El componente Place Search del kit de IU de Places renderiza los resultados de una búsqueda de lugares en una lista.

Puedes personalizar la lista de la Búsqueda de lugares. Puedes especificar las siguientes rutas de acceso:

El contenido que se mostrará
Tamaño de los medios en orientación vertical
Truncamiento de texto
La orientación
Anulaciones de temas que coinciden con el lenguaje de diseño de tu marca y tu app
La posición de la atribución
Indica si se puede seleccionar un lugar.

También puedes personalizar la solicitud para realizar una Search by text request o una Search Nearby request.

Facturación

Se te factura cada vez que se cambia el valor de vinculación de SearchByTextRequest() o PlaceSearchViewRequest().

Agrega Place Search a tu app

Agrega el widget de Place Search con PlaceSearchView class.

Swift

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

Cuando quieras que tu app cargue un resultado de búsqueda de texto o de búsqueda cercana, actualiza el valor de 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
      )
    )
  )

También puedes recibir devoluciones de llamada opcionales cuando se carga el componente, se selecciona un lugar o cuando hay un error al cargar el componente.

Swift

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

Personaliza el componente Place Search

Personalice el contenido

Debes especificar qué contenido mostrará tu componente.

En este ejemplo, se configura el componente para que muestre la dirección y la calificación del lugar.

Swift

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

También puedes personalizar de forma opcional los siguientes aspectos del contenido que aparece en el componente de la Búsqueda de Lugar:

content: Es el contenido que se muestra en el componente.
mediaSize: Tamaño de la foto en la orientación vertical del fragmento. El valor predeterminado es small. Se especifica en el contenido.
preferTruncation: Indica si se debe truncar el texto de cada vista de Place Details. El valor predeterminado es falso.
theme: Es tu tema personalizado que hereda de PlacesMaterialTheme. Obtén más información sobre la creación de temas.
attributionPosition: Indica si se debe mostrar la atribución de Google Maps en la parte superior o inferior del componente. El valor predeterminado es .top.
selectable: Indica si se puede seleccionar cada lugar de la lista. Si se puede seleccionar, se llamará al cierre de onPlaceSelected después de que se seleccione un lugar. El valor predeterminado es falso.

Agrega tu configuración de personalización a 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
)

Cómo personalizar la orientación

La orientación predeterminada es vertical. Puedes especificar una orientación horizontal en PlaceSearchView.

Swift

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

Cómo personalizar el tema

Puedes especificar un tema que anule cualquiera de los atributos de diseño predeterminados. El valor predeterminado es PlacesMaterialTheme. Consulta la documentación del componente Place Details para obtener más información sobre la aplicación de temas.

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()
    }
}

Ejemplo

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)")
    }
  }
}