ערכת ממשק משתמש של פרטי מקומות (ניסיונית)

תצוגה קומפקטית של פרטי המקום

ערכת ממשק המשתמש של פרטי המקום מאפשרת לכם להוסיף לאפליקציה רכיב נפרד של ממשק משתמש שמוצגים בו פרטי המקום. אפשר להשתמש בערכת ממשק המשתמש בנפרד או בשילוב עם שירותים וממשקי API אחרים של פלטפורמת מפות Google. ערכת ממשק המשתמש מקבלת מזהה מקום או קואורדינטות של קו רוחב/קו גובה ומחזירה את המידע המותאם של פרטי המקום.

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

חיוב

כשמשתמשים ב-Place Details UI Kit לפרטים על מקומות, מחויב כל מקום שנטען באמצעות הווידג'ט. אם תטעינו את אותו מקום כמה פעמים, תחויבו על כל בקשה.

הפעלת ערכת הכלים של ממשק המשתמש של Places

לפני שמשתמשים ב-Places UI Kit, צריך:

דוגמאות לערכות ממשק משתמש של Place Details

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

אפשר לציין את הכיוון (אופקי או אנכי), שינויים מברירת המחדל של העיצוב ותוכן. אפשרויות התוכן הן מדיה, כתובת, דירוג, מחיר, סוג, כניסה נגישה, קישור למפות וקישור לקבלת מסלול הגעה. [דוגמה להתאמה אישית]().

KotlinJava
val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)
 
      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

דוגמה להתאמה אישית

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

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <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>

אפשר להתאים אישית את הסגנונות הבאים:

  • placesColorSurfaceContainerLowest
  • placesColorOutlineDecorative
  • placesColorPrimary
  • placesColorOnSurface
  • placesColorOnSurfaceVariant
  • placesColorSecondaryContainer
  • placesColorOnSecondaryContainer
  • placesCornerRadius
  • placesTextAppearanceBodySmall
  • placesTextAppearanceBodyMedium
  • placesTextAppearanceBodyLarge
  • placesTextAppearanceLabelLarge
  • placesTextAppearanceHeadlineMedium
  • placesColorAttributionLight (enums לבן, אפור ושחור)
  • placesColorAttributionDark (enums לבן, אפור ושחור)

בדוגמה הזו מתבצעת התאמה אישית של התוכן הרגיל.

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.STANDARD_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

הדוגמה הזו מתאימה אישית את כל התוכן.

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.ALL_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)