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

Giao diện của thành phần được tuỳ chỉnh bằng các cấu trúc placesMaterialColor, placesMaterialFont, placesMaterialShape và placesMaterialTheme.

Places UI Kit cung cấp giao diện tối theo mặc định, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và giao diện sáng. Để tuỳ chỉnh giao diện tối, hãy thêm các giá trị cho .dark và attribution.darkModeColor vào giao diện tuỳ chỉnh của bạn.

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
`theme.color.surface`	Nền vùng chứa và hộp thoại
`theme.color.outlineDecorative`	Đường viền vùng chứa
`theme.color.primary`	Đường liên kết, chỉ báo tải, biểu tượng tổng quan
`theme.color.onSurface`	Tiêu đề, nội dung hộp thoại
`theme.color.onSurfaceVariant`	Thông tin về địa điểm
`theme.color.secondaryContainer`	Nền của nút
`theme.color.onSecondaryContainer`	Văn bản và biểu tượng của nút
`theme.color.neutralContainer`	Xem huy hiệu ngày, các hình dạng giữ chỗ khi tải
`theme.color.onNeutralContainer`	Ngày đánh giá, lỗi tải
`theme.color.positiveContainer`	Huy hiệu bộ sạc xe điện
`theme.color.onPositiveContainer`	Nội dung huy hiệu bộ sạc xe điện hiện có
`theme.color.positive`	Gắn nhãn "Mở cửa" cho địa điểm
`theme.color.negative`	Nhãn "Đã đóng" hiện tại của địa điểm
`theme.color.info`	Biểu tượng lối vào có hỗ trợ xe lăn
`theme.measurement.borderWidthButton`	Nút Mở trong Maps và OK

Kiểu chữ
`theme.font.bodySmall`	Thông tin về địa điểm
`theme.font.bodyMedium`	Thông tin về địa điểm, nội dung hộp thoại
`theme.font.labelMedium`	Nội dung huy hiệu
`theme.font.labelLarge`	Nội dung nút
`theme.font.headlineMedium`	Tiêu đề hộp thoại
`theme.font.displaySmall`	Tên địa điểm
`theme.font.titleSmall`	Tên địa điểm

Khoảng cách
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

Đo lường
`borderWidth`	Vùng chứa
`theme.measurement.borderWidthButton`

Hình dạng
`theme.shape.cornerRadius`	Vùng chứa
`theme.shape.cornerRadiusButton`	Nút Mở trong Maps và nút OK (không bao gồm nút biểu tượng tròn)
`theme.shape.cornerRadiusThumbnail`	Đặt hình thu nhỏ
`theme.shape.cornerRadiusCollageOuter`	Ảnh ghép từ nội dung nghe nhìn
`theme.shape.cornerRadiusCard`	Thẻ địa điểm, Thẻ bài đánh giá của người dùng
`theme.shape.cornerRadiusDialog`	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
`attribution.lightModeColor`	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)
`attribution.darkModeColor`	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ổ

Đ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: attributionColorLight với các enum cho màu trắng, xám và đen.
Giao diện tối: attributionColorDark với các giá trị enum cho màu trắng, xám và đen.

Ví dụ

Hàm này 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.

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Tạo kiểu tuỳ chỉnh

Màu sắc phân bổ

Ví dụ

Swift

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