Componente Place Search

O componente Place Search do Places UI Kit renderiza os resultados de uma pesquisa de lugar em uma lista.

É possível personalizar a lista de pesquisa de lugares. Veja o que é possível especificar:

O conteúdo a ser mostrado
Tamanho da mídia na orientação vertical
Truncamento de texto
A orientação
Substituições de tema que correspondem à sua marca e à linguagem de design do app
A posição da atribuição
Se um lugar pode ser selecionado

Também é possível personalizar a solicitação para realizar um Search by text request ou um Search Nearby request.

Faturamento

Você recebe uma cobrança sempre que o valor de vinculação de SearchByTextRequest() ou PlaceSearchViewRequest() é alterado.

Adicionar a Pesquisa de lugares ao seu app

Adicione o widget da Pesquisa de lugares usando o PlaceSearchView class.

Swift

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

Quando você quiser que seu app carregue um resultado de pesquisa de texto ou por perto, atualize o 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
      )
    )
  )

Você também pode receber callbacks quando o componente é carregado, um lugar é selecionado ou quando há um erro ao carregar o componente.

Swift

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

Personalizar o componente Place Search

Personalize o conteúdo

Você precisa especificar qual conteúdo seu componente vai mostrar.

Este exemplo configura o componente para mostrar o endereço e a classificação do lugar.

Swift

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

Você também pode personalizar os seguintes aspectos do conteúdo que aparece no componente Pesquisa de lugar:

content: o conteúdo mostrado no componente.
mediaSize: o tamanho da foto na orientação vertical do fragmento. O padrão é "pequeno". Especificado no conteúdo.
preferTruncation: se o texto de cada visualização de detalhes do lugar deve ser truncado. O valor padrão é falso.
theme: seu tema personalizado que herda de PlacesMaterialTheme. Saiba mais sobre temas.
attributionPosition: se a atribuição do Google Maps vai aparecer na parte de cima ou de baixo do componente. O padrão é .top.
selectable: indica se cada lugar na lista pode ser selecionado. Se for selecionável, o fechamento onPlaceSelected será chamado depois que um lugar for selecionado. O valor padrão é falso.

Adicione sua configuração de personalização 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
)

Personalizar orientação

A orientação padrão é vertical. Você pode especificar uma orientação horizontal em PlaceSearchView.

Swift

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

Personalizar o tema

É possível especificar um tema que substitua qualquer um dos atributos de estilo padrão. O padrão é PlacesMaterialTheme. Consulte a documentação do componente Detalhes do lugar para mais informações sobre 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()
    }
}

Exemplo

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