Pilih platform: Android iOS JavaScript

Komponen Place Search

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

Komponen Place Search Places UI Kit

Anda dapat menyesuaikan daftar Place Search. Anda dapat menentukan:

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

Anda juga dapat menyesuaikan permintaan untuk melakukan SearchByTextRequest atau SearchNearbyRequest.

Penagihan

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

Menambahkan Place Search ke aplikasi Anda

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

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

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.

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 konten berikut 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 di 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. Anda dapat menyesuaikan warna, tipografi, jarak, batas, dan sudut komponen Detail Tempat. Defaultnya adalah PlacesMaterialTheme.

Atribut tema yang tidak diganti akan menggunakan gaya default.

UI Kit Places menyediakan tema gelap secara default, jadi Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan entri untuk warna di values-night/colors.xml.

Lihat bagian Penataan gaya kustom untuk mengetahui informasi selengkapnya tentang tema.

Contoh

Buat instance komponen Place Search

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)

Menyesuaikan tema

UI Kit Places menyediakan tema gelap secara default, jadi Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan 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>