Places Details UI Kit (實驗功能)

地點詳細資料密集檢視畫面

您可以使用 Place Details 的 Place Details UI 套件，新增個別 UI 元件，在應用程式中顯示地點詳細資料。UI 套件可單獨使用，也可以與其他 Google 地圖平台 API 和服務搭配使用。UI 套件會採用地點 ID 或經緯度座標，並傳回算繪的 Place Details 資訊。

UI 套件提供精簡檢視畫面，可水平或垂直顯示。您可以覆寫預設主題的任何屬性，自訂地點詳細資料的外觀。您也可以指定 Content 項目清單，自訂要納入哪些地點詳細資料欄位，每個項目都會對應至顯示的地點資訊。

帳單

使用 Place Details 的 Place Details UI Kit 時，系統會針對使用小工具載入的每個地點向您收費。如果您多次載入相同地點，系統會針對每項要求向您收費。

啟用 Places UI 套件

使用 Places UI Kit 前，您必須：

Place Details UI Kit 範例

您可以將片段新增至版面配置，為應用程式新增地點詳細資料。在將片段例項化時，您可以自訂地點詳細資料資訊的外觀和風格，以符合您的需求並與應用程式外觀相符。

您可以指定方向 (水平或垂直)、主題覆寫和內容。內容選項包括媒體、地址、評分、價格、類型、無障礙入口、地圖連結和路線連結。[查看自訂範例]()。

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 (白色、灰色和黑色的列舉)
  • placesColorAttributionDark (白色、灰色和黑色的列舉)

這個範例會自訂標準內容。

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

這個範例會自訂所有內容。

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