UI Kit รายละเอียดสถานที่ (เวอร์ชันทดลอง)

มุมมองแบบกะทัดรัดของรายละเอียดสถานที่

UI Kit รายละเอียดสถานที่สำหรับรายละเอียดสถานที่ช่วยให้คุณเพิ่มคอมโพเนนต์ UI แต่ละรายการที่แสดงรายละเอียดสถานที่ในแอปได้ UI Kit นี้สามารถใช้แยกต่างหากหรือใช้ร่วมกับ API และบริการอื่นๆ ของ Google Maps Platform ก็ได้ ชุด UI จะใช้รหัสสถานที่หรือพิกัดละติจูด/ลองจิจูด แล้วแสดงผลข้อมูลรายละเอียดสถานที่

ชุด UI มีมุมมองแบบกะทัดรัดซึ่งแสดงในแนวนอนหรือแนวตั้งได้ คุณปรับแต่งลักษณะที่รายละเอียดสถานที่ปรากฏได้โดยลบล้างแอตทริบิวต์ของธีมเริ่มต้น นอกจากนี้ คุณยังปรับแต่งช่องรายละเอียดสถานที่ที่จะรวมไว้ได้ด้วย โดยระบุรายการรายการ Content ซึ่งแต่ละรายการจะสอดคล้องกับข้อมูลส่วนหนึ่งที่แสดงเกี่ยวกับสถานที่

การเรียกเก็บเงิน

เมื่อใช้ UI Kit รายละเอียดสถานที่สำหรับรายละเอียดสถานที่ ระบบจะเรียกเก็บเงินจากคุณสำหรับสถานที่แต่ละแห่งที่โหลดโดยใช้วิดเจ็ต หากคุณโหลดสถานที่เดียวกันหลายครั้ง ระบบจะเรียกเก็บเงินสำหรับคำขอแต่ละรายการ

เปิดใช้ชุด UI ของ Places

คุณต้องดำเนินการต่อไปนี้ก่อนใช้ Places UI Kit

ตัวอย่าง UI Kit ของรายละเอียดสถานที่

คุณสามารถเพิ่มรายละเอียดสถานที่ลงในแอปได้โดยเพิ่มข้อมูลโค้ดไปยังเลย์เอาต์ เมื่อสร้างอินสแตนซ์ของข้อมูลโค้ดที่ฝัง คุณจะปรับแต่งรูปลักษณ์ของข้อมูลรายละเอียดสถานที่ให้เหมาะกับความต้องการและเข้ากับลักษณะที่ปรากฏของแอปได้

คุณสามารถระบุการวางแนว (แนวนอนหรือแนวตั้ง) การลบล้างธีม และเนื้อหา ตัวเลือกเนื้อหา ได้แก่ สื่อ ที่อยู่ คะแนน ราคา ประเภท ทางเข้าที่เข้าถึงได้ ลิงก์แผนที่ และลิงก์เส้นทาง [ดูตัวอย่างการปรับแต่ง]()

Kotlin

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)

Java

      
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 (ลิสต์สำหรับสีขาว เทา และดำ)
  • placesColorAttributionDark (ลิสต์สำหรับสีขาว เทา และดำ)

ตัวอย่างนี้จะปรับแต่งเนื้อหามาตรฐาน

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

ตัวอย่างนี้จะปรับแต่งเนื้อหาทั้งหมด

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