Pilih platform: Android iOS JavaScript

Komponen Place Autocomplete dasar

Komponen Place Autocomplete Dasar dari Places UI Kit memungkinkan Anda menambahkan komponen UI individual yang menampilkan ID tempat saat pengguna memilih tempat. Komponen ini adalah penutup layar penuh yang menyediakan kotak penelusuran bagi pengguna untuk memasukkan kueri. Saat pengguna mengetik, daftar hasil pelengkapan otomatis akan ditampilkan di bawah kotak penelusuran. Saat pengguna mengetuk tempat, objek tempat yang hanya berisi ID tempat akan ditampilkan kepada developer. Komponen ini dapat disesuaikan.

Komponen Place Autocomplete Dasar memiliki opsi penyesuaian berikut: kepadatan daftar, dan apakah akan menyertakan ikon lokasi. Gunakan AutocompleteUICustomization untuk menyesuaikan komponen.

Anda dapat menggunakan komponen Place Autocomplete Dasar secara terpisah atau bersamaan dengan API dan layanan Google Maps Platform lainnya.

Penagihan

Anda akan ditagih setiap kali komponen dibuka dan kueri dibuat. Anda tidak akan ditagih lagi untuk sesi tersebut kecuali jika sesi berakhir atau tempat dipilih dari daftar.

Menambahkan komponen Autocomplete Dasar ke aplikasi Anda

Tetapkan parameter filter pelengkapan otomatis (misalnya, jenis yang akan ditampilkan, negara untuk membatasi hasil, koordinat wilayah untuk hasil, asal permintaan untuk menampilkan informasi jarak, jika tersedia) seperti yang Anda lakukan untuk menggunakan Place Autocomplete (New) tanpa Kit UI Places. Lihat dokumentasi Place Autocomplete (Baru) untuk mengetahui petunjuk lengkap dan contoh kode untuk membuat filter pelengkapan otomatis.

Setelah membuat filter pelengkapan otomatis, tambahkan penyesuaian UI Anda. Lihat opsi dan petunjuk penyesuaian.

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

Lihat contoh lengkapnya.

Menyesuaikan komponen Pelengkapan Otomatis Dasar

Menyesuaikan konten

Kepadatan daftar

Anda dapat memilih untuk menampilkan daftar dua baris atau daftar multiline. Gunakan opsi di AutocompleteListDensity (TWO_LINE atau MULTI_LINE) di class AutocompleteUICustomization. Jika Anda tidak menentukan kepadatan daftar, komponen akan menampilkan daftar dua baris.

Ikon lokasi

Anda dapat memilih apakah akan menampilkan ikon tempat default di daftar hasil. Gunakan opsi di AutocompleteUIIcon (listItemDefaultIcon atau noIcon) di class AutocompleteUICustomization.

Menyesuaikan tema

Anda dapat menentukan tema yang menggantikan salah satu atribut gaya default. Anda dapat menyesuaikan warna, tipografi, spasi, batas, dan sudut komponen Place Details. 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.

Menambahkan konten dan penyesuaian tema ke komponen Pelengkapan Otomatis Dasar

Gunakan class AutocompleteUICustomization untuk menyesuaikan komponen Pelengkapan Otomatis Dasar.

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

Contoh

Menambahkan komponen Pelengkapan Otomatis Dasar kustom.

Kotlin

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

Java

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

Menyesuaikan tema

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