Composant Basic Place Autocomplete

Le composant Basic Place Autocomplete du kit d'interface utilisateur Places vous permet d'ajouter un composant d'interface utilisateur individuel qui renvoie un ID de lieu lorsqu'un utilisateur sélectionne un lieu. Le composant est une couverture plein écran qui fournit une barre de recherche permettant aux utilisateurs de saisir une requête. À 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 Basic Place Autocomplete propose les options de personnalisation suivantes : densité de la liste et inclusion ou non d'icônes de position. Utilisez AutocompleteUICustomization pour personnaliser le composant.

Vous pouvez utiliser le composant Basic Place Autocomplete indépendamment 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 facturé pour cette session, sauf si elle expire ou si un lieu est sélectionné dans la liste.

Ajouter le composant Basic Autocomplete à votre application

Définissez les paramètres du filtre de saisie semi-automatique (par exemple, les types à renvoyer, le pays dans lequel 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 (New) sans le kit d'interface utilisateur Places. Consultez la documentation Place Autocomplete (New) 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'interface utilisateur. Consultez les options et instructions de personnalisation.

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

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

Voir l'exemple complet.

Personnaliser le composant Basic Autocomplete

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

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 angles de votre composant Place Details. 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 sombre et clair. 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 des personnalisations de contenu et de thème au composant Basic Autocomplete

Utilisez la AutocompleteUICustomization classe pour personnaliser le composant Basic Autocomplete.

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

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

Exemple

Ajouter un composant Basic Autocomplete personnalisé

  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)

  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

Le kit d'interface utilisateur Places fournit un thème sombre par défaut. Vous devrez peut-être personnaliser les thèmes sombre et clair. Pour personnaliser le thème sombre, ajoutez une entrée pour la couleur dans 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>