„Place Search“-Komponente

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

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.

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

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.

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

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

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

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

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.

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

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.

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

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

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)
    

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>