Kit UI Places Details (Eksperimental)

Kit UI Place Details untuk Place Details memungkinkan Anda menambahkan komponen UI individual yang menampilkan detail tempat di aplikasi Anda. Kit UI dapat digunakan secara independen atau bersama dengan API dan layanan Google Maps Platform lainnya. Kit UI menggunakan ID Tempat atau koordinat lintang/bujur dan menampilkan informasi Place Details yang dirender.

Kit UI menawarkan tampilan ringkas, yang dapat ditampilkan secara horizontal atau vertikal. Anda dapat menyesuaikan tampilan detail tempat dengan mengganti salah satu atribut tema default. Anda juga dapat menyesuaikan kolom detail tempat yang disertakan dengan menentukan daftar entri Content, yang masing-masing sesuai dengan informasi yang ditampilkan tentang tempat tersebut.

Penagihan

Saat menggunakan Place Details UI Kit untuk Place Details, Anda akan ditagih untuk setiap tempat yang dimuat menggunakan widget. Jika memuat tempat yang sama beberapa kali, Anda akan ditagih untuk setiap permintaan.

Mengaktifkan Kit UI Places

Sebelum menggunakan Places UI Kit, Anda harus:

• Buat project Cloud dengan akun penagihan.
• Aktifkan Places API untuk project Anda.
• Mendapatkan kunci API.

Contoh UI Kit Place Details

Anda dapat menambahkan detail tempat ke aplikasi dengan menambahkan fragmen ke tata letak. Saat membuat instance fragmen, Anda dapat menyesuaikan tampilan dan nuansa informasi detail tempat agar sesuai dengan kebutuhan dan cocok dengan tampilan aplikasi Anda.

Anda dapat menentukan orientasi (horizontal atau vertikal), penggantian tema, dan konten. Opsi kontennya adalah media, alamat, rating, harga, jenis, pintu masuk yang dapat diakses, link peta, dan link rute. [Lihat contoh penyesuaian]().

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

Contoh penyesuaian

Saat membuat instance fragmen, Anda dapat menentukan tema yang mengganti atribut gaya default. 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="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>

Anda dapat menyesuaikan gaya berikut:

• placesColorSurfaceContainerLowest
• placesColorOutlineDecorative
• placesColorPrimary
• placesColorOnSurface
• placesColorOnSurfaceVariant
• placesColorSecondaryContainer
• placesColorOnSecondaryContainer
• placesCornerRadius
• placesTextAppearanceBodySmall
• placesTextAppearanceBodyMedium
• placesTextAppearanceBodyLarge
• placesTextAppearanceLabelLarge
• placesTextAppearanceHeadlineMedium
• placesColorAttributionLight (enum untuk putih, abu-abu, dan hitam)
• placesColorAttributionDark (enum untuk putih, abu-abu, dan hitam)

Contoh ini menyesuaikan konten standar.

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

Contoh ini menyesuaikan semua konten.

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