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

הרכיב Place Search

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

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

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

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

אפשר גם להתאים אישית את הבקשה כדי לבצע Search by text request או Search Nearby request.

חיוב

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

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

כדי להשתמש בווידג'ט של חיפוש מקומות, מוסיפים את 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.setListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)
  

Java

fragment.setListener(
  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. מידע נוסף על עיצוב ערכות נושא זמין במסמכי התיעוד של Place Details Component.

כל מאפייני העיצוב שלא מוגדרים מחדש משתמשים בסגנונות ברירת המחדל. אם אתם רוצים לתמוך בעיצוב כהה, אתם יכולים להוסיף רשומה לצבע ב-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>

דוגמה

Kotlin

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

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

fragment.setListener(
  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.setListener(
  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)