Composant Place Autocomplete de base

Le composant Basic Place Autocomplete du Kit UI pour 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 lieu. Utilisez AutocompleteUICustomization pour personnaliser le composant.

Vous pouvez utiliser le composant Place Autocomplete de base indépendamment ou en combinaison 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 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, si disponibles) comme vous le feriez pour utiliser Place Autocomplete (New) sans le kit UI pour Places. Consultez la documentation sur 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 de l'UI. Consultez les options de personnalisation et les instructions.

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

Personnaliser le contenu

Densité de la liste

Vous pouvez choisir d'afficher une liste sur deux lignes ou sur plusieurs lignes. 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

Vous pouvez spécifier un thème qui remplace n'importe quel attribut 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 UI pour Places fournit un thème sombre par défaut. Vous devrez donc 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 Style personnalisé.

Ajouter des personnalisations de contenu et de thème au composant Autocomplete 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

Le kit UI pour Places fournit un thème sombre par défaut. Vous devrez donc 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>