Pilih platform: Android iOS JavaScript

Komponen Place Search

Komponen Place Search pada Places UI Kit merender hasil penelusuran tempat dalam daftar.

Komponen Penelusuran Tempat Places UI Kit

Anda dapat menyesuaikan daftar Penelusuran Tempat. Anda dapat menentukan:

  • Konten yang akan ditampilkan
  • Ukuran media dalam orientasi vertikal
  • Pemotongan teks
  • Orientasi
  • Penggantian tema yang sesuai dengan brand dan bahasa desain aplikasi Anda
  • Posisi atribusi
  • Apakah suatu tempat dapat dipilih

Anda juga dapat menyesuaikan permintaan untuk melakukan Search by text request atau Search Nearby request.

Penagihan

Anda ditagih setiap kali nilai binding configureFromSearchByTextRequest() atau configureFromSearchNearbyRequest() diubah.

Menambahkan Penelusuran Tempat ke aplikasi Anda

Gunakan widget Place Search dengan menambahkan PlaceSearchFragment Fragment ke tata letak Anda.

Saat Anda ingin aplikasi memuat hasil penelusuran teks atau penelusuran terdekat, panggil configureFromSearchByTextRequest() atau configureFromSearchNearbyRequest() dengan permintaan.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

Anda juga dapat menambahkan PlaceSearchFragmentListener opsional ke komponen untuk menerima callback saat komponen dimuat, tempat dipilih (jika disetel agar dapat dipilih), atau saat terjadi error saat memuat komponen.

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) {...}
  }
)

Menyesuaikan komponen Place Search

Menyesuaikan konten

Anda harus menentukan konten yang akan ditampilkan komponen Anda.

Contoh ini mengonfigurasi komponen untuk menampilkan alamat dan rating Tempat.

Kotlin

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

Java

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

Anda juga dapat menyesuaikan aspek berikut dari konten yang muncul di komponen Penelusuran Tempat Anda:

Tambahkan konfigurasi penyesuaian Anda ke PlaceSearchFragment.

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)

Menyesuaikan orientasi

Orientasi default adalah vertikal. Untuk orientasi horizontal, tentukan Orientation.HORIZONTAL dalam PlaceSearchFragment.newInstance().

Kotlin

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

Java

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

Menyesuaikan tema

Saat membuat instance fragmen, Anda dapat menentukan tema yang menggantikan atribut gaya default. Defaultnya adalah PlacesMaterialTheme. Lihat dokumentasi Komponen Detail Tempat untuk mengetahui informasi selengkapnya tentang penerapan tema.

Atribut tema yang tidak diganti akan menggunakan gaya default. Jika ingin mendukung tema gelap, Anda dapat menambahkan entri untuk warna di values-night/colors.xml. 

 <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>

Contoh

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)