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.

Places UI Kit-Komponente „Place Search“

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

  • Die anzuzeigenden Inhalte
  • Die Größe von Medien in vertikaler Ausrichtung
  • Textlänge anpassen
  • Die Ausrichtung
  • Designüberschreibungen, die zu Ihrer Marke und der Designsprache Ihrer App passen
  • Die Position der Quellenangabe
  • Ob ein Ort ausgewählt werden kann

Sie können auch die Anfrage anpassen, um entweder eine SearchByTextRequest oder eine SearchNearbyRequest auszuführen.

Abrechnung

Jedes Mal, wenn der Bindungswert configureFromSearchByTextRequest() oder configureFromSearchNearbyRequest() geändert wird, wird Ihnen ein Betrag in Rechnung gestellt.

„Place Search“ Ihrer App hinzufügen

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

Wenn Ihre App ein Textsuchergebnis oder ein Ergebnis der 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 PlaceSearchFragmentListener hinzufügen, um Callbacks zu erhalten, wenn die Komponente geladen wird, ein Ort ausgewählt wird (falls die Auswahl aktiviert ist) oder wenn 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

Inhalt anpassen

Sie müssen angeben, welche Inhalte in der 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 optional auch die folgenden Aspekte der Inhalte anpassen, die in der „Place Search“-Komponente angezeigt werden:

  • PlaceSearchFragment.Content: Der in der Komponente angezeigte Inhalt.
  • mediaSize: Die Fotogröße in der vertikalen Ausrichtung des Fragments. Der Standardwert ist SMALL.
  • preferTruncation: Gibt an, ob der Text in jeder Ansicht der 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 „Place Details“-Komponente 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 Design finden Sie im Abschnitt Benutzerdefinierte Stile.

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>