Places Details UI Kit (experimentell)

Kompakte Ansicht der Ortsdetails

Mit dem UI-Kit für Place Details können Sie eine einzelne UI-Komponente hinzufügen, über die Ortsdetails in Ihrer App angezeigt werden. Das UI-Kit kann unabhängig oder in Verbindung mit anderen APIs und Diensten der Google Maps Platform verwendet werden. Das UI-Kit nimmt entweder eine Orts-ID oder Breiten-/Längengradkoordinaten entgegen und gibt gerenderte Place Details-Informationen zurück.

Das UI-Kit bietet eine kompakte Ansicht, die horizontal oder vertikal angezeigt werden kann. Sie können das Aussehen der Ortsdetails anpassen, indem Sie eines der Attribute des Standarddesigns überschreiben. Sie können auch anpassen, welche Felder für Details zum Ort enthalten sind. Geben Sie dazu eine Liste von Content-Einträgen an, die jeweils einer Information zum Ort entsprechen.

Abrechnung

Wenn Sie das UI-Kit für Ortsdetails für Ortsdetails verwenden, werden Ihnen die Kosten für jeden Ort in Rechnung gestellt, der über das Widget geladen wird. Wenn Sie denselben Ort mehrmals laden, wird Ihnen jede Anfrage in Rechnung gestellt.

Places UI Kit aktivieren

Bevor Sie das Places UI Kit verwenden können, müssen Sie Folgendes tun:

Beispiele für das UI-Kit „Place Details“

Sie können Ihrer App Details zu Orten hinzufügen, indem Sie einem Layout ein Fragment hinzufügen. Wenn Sie das Fragment instanziieren, können Sie das Erscheinungsbild der Informationen zu „Place Details“ an Ihre Anforderungen und das Erscheinungsbild Ihrer App anpassen.

Sie können die Ausrichtung (horizontal oder vertikal), Themaüberschreibungen und Inhalte angeben. Die Inhaltsoptionen sind „Medien“, „Adresse“, „Bewertung“, „Preis“, „Art“, „Barrierefreier Eingang“, „Google Maps-Link“ und „Google Maps-Link für Wegbeschreibung“. [Beispiel für eine Anpassung ansehen]().

KotlinJava
val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)
 
      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

Beispiel für eine Anpassung

Wenn Sie ein Fragment instanziieren, können Sie ein Design angeben, das alle Standardstilattribute überschreibt. Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet. Wenn Sie ein dunkles Design unterstützen möchten, können Sie in values-night/colors.xml einen Eintrag für die Farbe hinzufügen. 

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <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>

Sie können die folgenden Stile anpassen:

  • placesColorSurfaceContainerLowest
  • placesColorOutlineDecorative
  • placesColorPrimary
  • placesColorOnSurface
  • placesColorOnSurfaceVariant
  • placesColorSecondaryContainer
  • placesColorOnSecondaryContainer
  • placesCornerRadius
  • placesTextAppearanceBodySmall
  • placesTextAppearanceBodyMedium
  • placesTextAppearanceBodyLarge
  • placesTextAppearanceLabelLarge
  • placesTextAppearanceHeadlineMedium
  • placesColorAttributionLight (enums für Weiß, Grau und Schwarz)
  • placesColorAttributionDark (enums für Weiß, Grau und Schwarz)

In diesem Beispiel werden die Standardinhalte angepasst.

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.STANDARD_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

In diesem Beispiel werden alle Inhalte angepasst.

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.ALL_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)