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

הרכיב Basic Place Autocomplete

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

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

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

חיוב

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

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

מגדירים את הפרמטרים של מסנן ההשלמה האוטומטית (לדוגמה, הסוגים שיוחזרו, המדינה שאליה רוצים להגביל את התוצאות, הקואורדינטות של האזור לתוצאות, מקור הבקשה להצגת מידע על המרחק, אם זמין) כמו שהייתם משתמשים בהשלמה אוטומטית למקומות (חדש) בלי 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.

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

כברירת מחדל, Places UI Kit מספק עיצוב כהה, כך שייתכן שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים רשומה לצבע בקובץ 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()
)

דוגמה

מוסיפים רכיב Basic Autocomplete בהתאמה אישית.

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

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

ערכת Places UI Kit מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים רשומה לצבע בקובץ 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>