Chọn nền tảng: Android iOS JavaScript

Tạo kiểu tuỳ chỉnh

Tuỳ chỉnh hình ảnh cho thông tin chi tiết về địa điểm
Ví dụ về cách tuỳ chỉnh hình ảnh

Bạn có thể tuỳ chỉnh màu sắc, kiểu chữ, khoảng cách, đường viền và góc của các thành phần trong bộ công cụ Places UI sau đây:

Bộ công cụ giao diện người dùng Places cung cấp một phương pháp tiếp cận hệ thống thiết kế để tuỳ chỉnh hình ảnh dựa trên Material Design (với một số điểm sửa đổi dành riêng cho Google Maps). Hãy xem thông tin tham khảo của Material Design về Màu sắc và Kiểu chữ. Theo mặc định, kiểu này tuân thủ ngôn ngữ thiết kế trực quan của Google Maps.

Các lựa chọn tuỳ chỉnh thông tin chi tiết về địa điểm

Khi tạo một mảnh, bạn có thể chỉ định một giao diện ghi đè bất kỳ thuộc tính kiểu mặc định nào. Mọi thuộc tính giao diện không bị ghi đè sẽ sử dụng kiểu mặc định. 

  <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>

Bạn có thể tuỳ chỉnh các kiểu sau:

Thuộc tính giao diện Cách sử dụng
Màu
placesColorSurface Nền vùng chứa và hộp thoại
placesColorOutlineDecorative Đường viền vùng chứa
placesColorPrimary Đường liên kết, chỉ báo tải, biểu tượng tổng quan
placesColorOnSurface Tiêu đề, nội dung hộp thoại
placesColorOnSurfaceVariant Thông tin về địa điểm
placesColorSecondaryContainer Nền của nút
placesColorOnSecondaryContainer Văn bản và biểu tượng của nút
placesColorNeutralContainer Xem huy hiệu ngày, các hình dạng giữ chỗ khi tải
placesColorOnNeutralContainer Ngày đánh giá, lỗi tải
placesColorPositiveContainer Huy hiệu bộ sạc xe điện
placesColorOnPositiveContainer Nội dung huy hiệu bộ sạc xe điện hiện có
placesColorPositive Gắn nhãn "Mở cửa" cho địa điểm
placesColorNegative Nhãn "Đã đóng" hiện tại của địa điểm
placesColorInfo Biểu tượng lối vào có hỗ trợ xe lăn
placesColorButtonBorder Nút Mở trong Maps và OK
   
Kiểu chữ
placesTextAppearanceBodySmall Thông tin về địa điểm
placesTextAppearanceBodyMedium Thông tin về địa điểm, nội dung hộp thoại
placesTextAppearanceLabelMedium Nội dung huy hiệu
placesTextAppearanceLabelLarge Nội dung nút
placesTextAppearanceHeadlineMedium Tiêu đề hộp thoại
placesTextAppearanceDisplaySmall Tên địa điểm
placesTextAppearanceTitleSmall Tên địa điểm
   
Khoảng cách
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
Đo lường
placesBorderWidth Vùng chứa
placesBorderWidthButton
   
Hình dạng
placesCornerRadius Vùng chứa
placesCornerRadiusButton Nút Mở trong Maps và nút OK (không bao gồm nút biểu tượng tròn)
placesCornerRadiusThumbnail Đặt hình thu nhỏ
placesCornerRadiusCollageOuter Ảnh ghép từ nội dung nghe nhìn
placesCornerRadiusCard Thẻ địa điểm, Thẻ bài đánh giá của người dùng
placesCornerRadiusDialog Hộp thoại công bố của Google Maps
   
Thông tin ghi nhận quyền sở hữu thương hiệu của Google Maps
placesColorAttributionLightTheme Nút ghi nhận quyền sở hữu và công bố thông tin của Google Maps ở giao diện sáng (các giá trị enum cho màu trắng, xám và đen)
placesColorAttributionDarkTheme Nút ghi nhận quyền sở hữu và công bố của Google Maps ở giao diện tối (các enum cho màu trắng, xám và đen)

Màu sắc phân bổ

thuộc tính
Phân bổ

Điều khoản dịch vụ của Google Maps yêu cầu bạn sử dụng một trong ba màu thương hiệu cho thông tin ghi nhận quyền sở hữu của Google Maps. Thông tin ghi nhận quyền tác giả này phải xuất hiện và có thể truy cập được khi bạn đã thực hiện các thay đổi về chế độ tuỳ chỉnh.

Chúng tôi cung cấp 3 màu thương hiệu để bạn lựa chọn và có thể đặt riêng cho giao diện sáng và tối:

  • Giao diện sáng: placesColorAttributionLight có các giá trị enum cho màu trắng, xám và đen.
  • Giao diện tối: placesColorAttributionDark với các giá trị enum cho màu trắng, xám và đen.

Ví dụ

Mã mẫu này cho biết cách tạo một giao diện ghi đè các thuộc tính kiểu mặc định. Mọi thuộc tính giao diện không bị ghi đè sẽ sử dụng kiểu mặc định. 
  <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>

Ví dụ đầy đủ cho từng thành phần