הפלטפורמה: Android iOS JavaScript

הרכיב Place Search

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

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

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

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

חיוב

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

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

טיפ: כאן אפשר לראות את הדוגמה המלאה.

כדי להשתמש בווידג'ט 'חיפוש מקומות', מוסיפים את PlaceSearchFragment הקטע לפריסה.

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

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

דוגמאות

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

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>