選取平台： Android iOS JavaScript

自訂樣式

自訂地點詳細資料的視覺效果
視覺自訂範例

您可以自訂這些 Places UI 組合元件的顏色、字體、間距、邊框和圓角：

Places UI Kit 採用設計系統方法，以 Material Design 為基礎 (並進行一些 Google 地圖專屬的修改)，提供視覺自訂功能。請參閱 Material Design 的顏色和字體排版參考資料。樣式預設會採用 Google 地圖的視覺設計語言。

地點詳細資料自訂選項

例項化片段時，您可以指定主題，覆寫任何預設樣式屬性。未覆寫的主題屬性會使用預設樣式。

  <style name="CustomizedPlaceDetailsTheme" 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>
 中新增顏色項目。

你可以自訂下列樣式：

主題屬性 用量
顏色
placesColorSurface 容器和對話方塊背景
placesColorOutlineDecorative 容器邊框
placesColorPrimary 連結、載入指標、總覽圖示
placesColorOnSurface 標題、對話內容
placesColorOnSurfaceVariant 地點資訊
placesColorSecondaryContainer 按鈕背景
placesColorOnSecondaryContainer 按鈕文字和圖示
placesColorNeutralContainer 查看日期徽章、載入預留位置形狀
placesColorOnNeutralContainer 審查日期、載入錯誤
placesColorPositiveContainer 電動車充電器徽章
placesColorOnPositiveContainer 電動車充電器徽章內容
placesColorPositive 放置「營業中」標籤
placesColorNegative 地點現在標示為「已關閉」
placesColorInfo 無障礙入口圖示
placesColorButtonBorder 「在地圖中開啟」和「確定」按鈕
   
Typography
placesTextAppearanceBodySmall 地點資訊
placesTextAppearanceBodyMedium 地點資訊、對話內容
placesTextAppearanceLabelMedium 徽章內容
placesTextAppearanceLabelLarge 按鈕內容
placesTextAppearanceHeadlineMedium 對話方塊標題
placesTextAppearanceDisplaySmall 地點名稱
placesTextAppearanceTitleSmall 地點名稱
   
間距
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
成效評估
placesBorderWidth 容器
placesBorderWidthButton
   
形狀
placesCornerRadius 容器
placesCornerRadiusButton 「在 Google 地圖中開啟」和「確定」按鈕 (圓形圖示按鈕除外)
placesCornerRadiusThumbnail 放置縮圖圖片
placesCornerRadiusCollageOuter 媒體美術拼貼
placesCornerRadiusCard 地點資訊卡、使用者評論資訊卡
placesCornerRadiusDialog Google 地圖揭露事項對話方塊
   
Google 地圖品牌出處資訊
placesColorAttributionLightTheme 淺色主題 Google 地圖出處和揭露資訊按鈕 (白色、灰色和黑色列舉)
placesColorAttributionDarkTheme Google 地圖深色主題的姓名標示和揭露資訊按鈕 (白色、灰色和黑色列舉)

歸因顏色

歸因
歸因

根據 Google 地圖服務條款，您必須使用三種品牌顏色之一，標示 Google 地圖出處。進行自訂變更後，必須顯示並提供存取這個出處資訊的管道。

我們提供 3 種品牌顏色供您選擇，淺色和深色主題可分別設定：

  • 淺色主題：placesColorAttributionLight，列舉值為白色、灰色和黑色。
  • 深色主題：placesColorAttributionDark，列舉值為白色、灰色和黑色。

範例

這段程式碼範例說明如何建立主題，覆寫預設樣式屬性。未覆寫的主題屬性會使用預設樣式。 
  <style name="CustomizedPlaceDetailsTheme" 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>

每個元件的完整範例