הרכיב Basic Place Autocomplete

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

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

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

חיוב

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

הוספת הרכיב 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.

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

כברירת מחדל, 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()
)

דוגמה

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

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>