בחירת פלטפורמה: Android iOS JavaScript

רכיב השלמה אוטומטית בסיסי למקומות

הרכיב Basic Place Autocomplete ב-Places UI Kit מאפשר להוסיף רכיב UI יחיד שמחזיר מזהה מקום כשמשתמש בוחר מקום. הרכיב הוא כיסוי מסך מלא שמספק סרגל חיפוש שבו המשתמשים יכולים להזין שאילתה. בזמן שהמשתמש מקליד, רשימה של תוצאות השלמה אוטומטית תוצג מתחת לסרגל החיפוש. כשמשתמש מקיש על מקום, מוחזר למפתח אובייקט של מקום עם מזהה המקום בלבד. אפשר להתאים אישית את הרכיב הזה.

לרכיב Basic השלמה אוטומטית למקומות יש את אפשרויות ההתאמה האישית הבאות: צפיפות הרשימה והאם לכלול סמלי מיקום. כדי להתאים אישית את הרכיב, משתמשים ב-AutocompleteUICustomization.

אפשר להשתמש ברכיב 'השלמה אוטומטית למקומות בסיסית' באופן עצמאי או בשילוב עם שירותים וממשקי API אחרים של Google Maps Platform.

חיוב

אתם מחויבים בכל פעם שהרכיב נפתח ומתבצעת שאילתה. לא נחייב אתכם שוב על אותה הפעלה, אלא אם תוקף הפעילות יפוג או אם תבחרו מקום מהרשימה.

הוספת הרכיב Basic Autocomplete לאפליקציה

מגדירים את פרמטרי הסינון של השלמה אוטומטית למקומות (לדוגמה, הסוגים שיוחזרו, המדינה שבה התוצאות יוגבלו, קואורדינטות האזור לתוצאות, המקור של הבקשה להצגת פרטי המרחק, אם הם זמינים) כמו שמגדירים כשמשתמשים ב-השלמה אוטומטית למקומות (חדש) בלי Places UI Kit. הוראות מלאות ודוגמה לקוד ליצירת מסנן השלמה אוטומטית זמינות במסמכי התיעוד של השלמה אוטומטית למקומות (חדש).

אחרי שיוצרים את מסנן ההשלמה האוטומטית, מוסיפים את ההתאמות האישיות לממשק המשתמש. אפשרויות והוראות להתאמה אישית

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

לדוגמה מלאה

התאמה אישית של הרכיב Basic Autocomplete

התאמה אישית של תוכן

צפיפות הרשימה

אתם יכולים לבחור אם להציג רשימה עם שתי שורות או רשימה עם כמה שורות. משתמשים באפשרויות ב-AutocompleteListDensity (TWO_LINE או MULTI_LINE) במחלקה AutocompleteUICustomization. אם לא מציינים את צפיפות הרשימה, הרכיב יציג רשימה בת שתי שורות.

סמל המיקום

אתם יכולים לבחור אם להציג סמל ברירת מחדל של מקום ברשימת התוצאות. משתמשים באפשרויות ב-AutocompleteUIIcon (listItemDefaultIcon או noIcon) במחלקה AutocompleteUICustomization.

התאמה אישית של העיצוב

אתם יכולים לציין עיצוב שיבטל את כל מאפייני הסגנון שמוגדרים כברירת מחדל. אתם יכולים להתאים אישית את הצבעים, הטיפוגרפיה, המרווחים, הגבולות והפינות של רכיב פרטי המקום. ערך ברירת המחדל הוא PlacesMaterialTheme.

כל מאפייני העיצוב שלא מוגדרים מחדש משתמשים בסגנונות ברירת המחדל.

ערכת ה-UI של Places מספקת עיצוב כהה כברירת מחדל, ולכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים רשומה לצבע ב-values-night/colors.xml.

מידע נוסף על עיצובים זמין בקטע התאמה אישית של סגנונות.

הוספת תוכן והתאמות אישיות של עיצוב לרכיב Basic Autocomplete

כדי להתאים אישית את הרכיב Basic Autocomplete, משתמשים במחלקה AutocompleteUICustomization.

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

דוגמה

מוסיפים רכיב השלמה אוטומטית בסיסית בהתאמה אישית.

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

התאמה אישית של העיצוב

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