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

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

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

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

חיוב

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

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

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

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

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

לדוגמה מלאה

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

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

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

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

סמל המיקום

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

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

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

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

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

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

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

כדי להתאים אישית את רכיב ההשלמה האוטומטית הבסיסי, משתמשים במחלקה 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>