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

רכיב חיפוש מקומות

רכיב חיפוש המקומות ב-Places UI Kit מעבד את התוצאות של חיפוש מקומות ברשימה.

רכיב חיפוש מקומות ב-Places UI Kit

אפשר להתאים אישית את רשימת החיפוש של מקומות. אפשר לציין:

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

אפשר גם להתאים אישית את הבקשה כדי לבצע SearchByTextRequest או SearchNearbyRequest.

חיוב

אתם מחויבים בכל פעם שמשנים את ערך הקישור configureFromSearchByTextRequest() או configureFromSearchNearbyRequest().

הוספת חיפוש מקומות לאפליקציה

כדי להשתמש בווידג'ט Place Search, מוסיפים את PlaceSearchFragment fragment לפריסה.

כשרוצים שהאפליקציה תטען תוצאת חיפוש טקסט או חיפוש בקרבת מקום, קוראים ל-configureFromSearchByTextRequest() או ל-configureFromSearchNearbyRequest() עם הבקשה.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

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

Kotlin

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)

התאמה אישית של רכיב חיפוש המקומות

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

צריך לציין איזה תוכן הרכיב יציג.

בדוגמה הזו, הרכיב מוגדר להצגת הכתובת והדירוג של המקום.

Kotlin

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));

אפשר גם להתאים אישית את ההיבטים הבאים של התוכן שמופיע ברכיב 'חיפוש מקומות':

  • ‫PlaceSearchFragment.Content: התוכן שמוצג ברכיב.
  • ‫mediaSize: גודל התמונה בכיוון האנכי של הקטע. ערך ברירת המחדל הוא SMALL.
  • ‫preferTruncation: האם לקצץ את הטקסט של כל תצוגת פרטי המקום.
  • ‫attributionPosition: האם להציג את השיוך למפות Google בחלק העליון או התחתון של הרכיב.
  • ‫selectable: האם אפשר לבחור כל מקום ברשימה.

מוסיפים את הגדרת ההתאמה האישית אל PlaceSearchFragment.

Kotlin

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

Java

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

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

כברירת מחדל, הכיוון שבו יוצג השידור במסך הוא אנכי. כדי להגדיר כיוון אופקי, מציינים Orientation.HORIZONTAL ב-PlaceSearchFragment.newInstance().

Kotlin

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Java

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

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

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

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

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

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

דוגמאות

יצירת מופע של הרכיב Place Search

Kotlin

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

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