Plattform auswählen: Android iOS JavaScript

„Place Search“-Komponente

Die „Place Search“-Komponente des Places UI Kit rendert die Ergebnisse einer Ortssuche in einer Liste.

„Place Search“-Komponente des Places UI Kit

Sie können die Liste der Ortssuche anpassen. Sie können Folgendes angeben:

  • Die anzuzeigenden Inhalte
  • Mediengröße bei vertikaler Ausrichtung
  • Textlänge anpassen
  • Die Ausrichtung
  • Designüberschreibungen, die zur Marken- und Designsprache Ihrer App passen
  • Position der Quellenangabe
  • Ob ein Ort ausgewählt werden kann

Sie können die Anfrage auch so anpassen, dass entweder ein SearchByTextRequest oder ein SearchNearbyRequest ausgeführt wird.

Abrechnung

Die Abrechnung erfolgt jedes Mal, wenn der Bindungswert für configureFromSearchByTextRequest() oder configureFromSearchNearbyRequest() geändert wird.

Place Search in Ihre App einbinden

Verwenden Sie das Place Search-Widget, indem Sie Ihrem Layout das PlaceSearchFragment-Fragment hinzufügen.

Wenn Ihre App ein Ergebnis für die Textsuche oder die Suche in der Nähe laden soll, rufen Sie configureFromSearchByTextRequest() oder configureFromSearchNearbyRequest() mit der Anfrage auf.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Sie können der Komponente auch optional ein PlaceSearchFragmentListener hinzufügen, um Callbacks zu erhalten, wenn die Komponente geladen wird, ein Ort ausgewählt wird (falls die Auswahl aktiviert ist) oder beim Laden der Komponente ein Fehler auftritt.

Kotlin

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)

„Place Search“-Komponente anpassen

Inhalte anpassen

Sie müssen angeben, welche Inhalte in Ihrer Komponente angezeigt werden sollen.

In diesem Beispiel wird die Komponente so konfiguriert, dass die Adresse und die Bewertung des Orts angezeigt werden.

Kotlin

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));

Sie können auch die folgenden Aspekte der Inhalte anpassen, die in der Komponente „Ortsuche“ angezeigt werden:

  • PlaceSearchFragment.Content: Der in der Komponente angezeigte Inhalt.
  • mediaSize: Die Größe des Fotos in der vertikalen Ausrichtung des Fragments. Der Standardwert ist SMALL.
  • preferTruncation: Gibt an, ob der Text der einzelnen Ansichten mit Ortsdetails gekürzt werden soll.
  • attributionPosition: Gibt an, ob die Google Maps-Quellenangabe oben oder unten in der Komponente angezeigt werden soll.
  • selectable: Gibt an, ob jeder Ort in der Liste ausgewählt werden kann.

Fügen Sie PlaceSearchFragment Ihre Konfiguration für die Anpassung hinzu.

Kotlin

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

Java

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

Ausrichtung anpassen

Die Standardausrichtung ist vertikal. Geben Sie für die horizontale Ausrichtung Orientation.HORIZONTAL in PlaceSearchFragment.newInstance() an.

Kotlin

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Java

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Design anpassen

Beim Instanziieren eines Fragments können Sie ein Design angeben, das alle Standardstilattribute überschreibt. Sie können die Farben, Typografie, Abstände, Rahmen und Ecken der Komponente „Ortsdetails“ anpassen. Der Standardwert ist PlacesMaterialTheme.

Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet.

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie in values-night/colors.xml einen Eintrag für die Farbe hinzu.

Weitere Informationen zum Theming finden Sie im Abschnitt Benutzerdefiniertes Styling.

Beispiele

„Place Search“-Komponente instanziieren

Kotlin

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Design anpassen

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie in values-night/colors.xml einen Eintrag für die Farbe hinzu. 

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
    <item name="placesCornerRadius">20dp</item>
  </style>