Composant Place Autocomplete de base

Le composant Basic Place Autocomplete du kit d'UI Places vous permet d'ajouter un composant d'UI individuel qui renvoie un ID de lieu lorsqu'un utilisateur sélectionne un lieu. Le composant est une couverture en plein écran qui fournit une barre de recherche permettant aux utilisateurs de saisir une requête. Au fur et à mesure que l'utilisateur saisit du texte, une liste de résultats de saisie semi-automatique s'affiche sous la barre de recherche. Lorsque l'utilisateur appuie sur un lieu, un objet de lieu contenant uniquement l'ID de lieu est renvoyé au développeur. Ce composant est personnalisable.

Le composant de saisie semi-automatique de base pour les lieux propose les options de personnalisation suivantes : densité de la liste et inclusion ou non des icônes de localisation. Utilisez AutocompleteUICustomization pour personnaliser le composant.

Vous pouvez utiliser le composant de saisie semi-automatique de base pour les lieux de manière indépendante ou en association avec d'autres API et services Google Maps Platform.

Facturation

Vous êtes facturé chaque fois que le composant est ouvert et qu'une requête est effectuée. Vous ne serez plus débité pour cette session, sauf si elle expire ou si un lieu est sélectionné dans la liste.

Ajouter le composant de saisie semi-automatique de base à votre application

Définissez les paramètres de filtre de saisie semi-automatique (par exemple, les types à renvoyer, le pays auquel limiter les résultats, les coordonnées de la région pour les résultats, l'origine de la requête pour afficher les informations de distance, le cas échéant) comme vous le feriez pour utiliser Place Autocomplete (nouveau) sans le Places UI Kit. Consultez la documentation sur Place Autocomplete (nouveau) pour obtenir des instructions complètes et un exemple de code permettant de créer un filtre de saisie semi-automatique.

Une fois que vous avez créé votre filtre de saisie semi-automatique, ajoutez vos personnalisations d'UI. Consultez les options et instructions de personnalisation.

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

Voir l'exemple complet

Personnaliser le composant de saisie semi-automatique de base

Personnaliser le contenu

Densité de la liste

Vous pouvez choisir d'afficher une liste sur deux lignes ou une liste multiligne. Utilisez les options de AutocompleteListDensity (TWO_LINE ou MULTI_LINE) dans la classe AutocompleteUICustomization. Si vous ne spécifiez pas la densité de la liste, le composant affichera une liste sur deux lignes.

Icône de position

Vous pouvez choisir d'afficher ou non une icône de lieu par défaut dans la liste des résultats. Utilisez les options de AutocompleteUIIcon (listItemDefaultIcon ou noIcon) dans la classe AutocompleteUICustomization.

Personnaliser le thème

Lorsque vous instanciez un fragment, vous pouvez spécifier un thème qui remplace l'un des attributs de style par défaut. Vous pouvez personnaliser les couleurs, la typographie, l'espacement, les bordures et les coins de votre composant "Détails du lieu". La valeur par défaut est PlacesMaterialTheme.

Tous les attributs de thème qui ne sont pas remplacés utilisent les styles par défaut.

Le kit d'interface utilisateur Places fournit un thème sombre par défaut. Vous devrez peut-être personnaliser les thèmes clair et sombre. Pour personnaliser le thème sombre, ajoutez une entrée pour la couleur dans values-night/colors.xml.

Pour en savoir plus sur les thèmes, consultez la section Styles personnalisés.

Ajouter du contenu et des personnalisations de thème au composant de saisie semi-automatique de base

Utilisez la classe AutocompleteUICustomization pour personnaliser le composant de saisie semi-automatique de base.

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

Exemple

Ajoutez un composant de saisie semi-automatique de base personnalisé.

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

Personnaliser le thème

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