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

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

רכיב חיפוש המקומות ב-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.

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

דוגמאות

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

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>