Bộ công cụ giao diện người dùng Chi tiết về địa điểm (Thử nghiệm)

Chế độ xem thu gọn thông tin chi tiết về địa điểm

Bộ công cụ giao diện người dùng Thông tin chi tiết về địa điểm cho Thông tin chi tiết về địa điểm cho phép bạn thêm một thành phần giao diện người dùng riêng lẻ hiển thị thông tin chi tiết về địa điểm trong ứng dụng. Bạn có thể sử dụng bộ công cụ giao diện người dùng này một cách độc lập hoặc kết hợp với các API và dịch vụ khác của Nền tảng Google Maps. Bộ công cụ giao diện người dùng lấy mã địa điểm hoặc toạ độ vĩ độ/kinh độ và trả về thông tin Chi tiết địa điểm đã kết xuất.

Bộ công cụ giao diện người dùng cung cấp chế độ xem nhỏ gọn, có thể hiển thị theo chiều ngang hoặc chiều dọc. Bạn có thể tuỳ chỉnh giao diện của thông tin chi tiết về địa điểm bằng cách ghi đè bất kỳ thuộc tính nào của giao diện mặc định. Bạn cũng có thể tuỳ chỉnh các trường thông tin chi tiết về địa điểm bằng cách chỉ định danh sách các mục nhập Content, mỗi mục nhập tương ứng với một phần thông tin hiển thị về địa điểm.

Thanh toán

Khi sử dụng Bộ công cụ giao diện người dùng Thông tin chi tiết về địa điểm cho Thông tin chi tiết về địa điểm, bạn sẽ bị tính phí cho mỗi địa điểm được tải bằng tiện ích này. Nếu tải cùng một địa điểm nhiều lần, bạn sẽ phải trả phí cho mỗi yêu cầu.

Bật Bộ công cụ giao diện người dùng của Địa điểm

Trước khi sử dụng Bộ công cụ giao diện người dùng của Places, bạn cần:

Ví dụ về Bộ công cụ giao diện người dùng Place Details

Bạn có thể thêm thông tin chi tiết về địa điểm vào ứng dụng bằng cách thêm một mảnh vào bố cục. Khi tạo bản sao mảnh, bạn có thể tuỳ chỉnh giao diện của thông tin chi tiết về địa điểm cho phù hợp với nhu cầu và giao diện của ứng dụng.

Bạn có thể chỉ định hướng (ngang hoặc dọc), ghi đè giao diện và nội dung. Các lựa chọn nội dung bao gồm nội dung nghe nhìn, địa chỉ, điểm xếp hạng, giá, loại, lối vào dành cho người khuyết tật, đường liên kết đến bản đồ và đường liên kết đến chỉ dẫn. [Xem ví dụ về cách tuỳ chỉnh]().

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

Ví dụ về tuỳ chỉnh

Khi tạo bản sao cho một mảnh, bạn có thể chỉ định một giao diện ghi đè mọi 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. Nếu muốn hỗ trợ giao diện tối, bạn có thể thêm một mục nhập cho màu trong 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>

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

  • placesColorSurfaceContainerLowest
  • placesColorOutlineDecorative
  • placesColorPrimary
  • placesColorOnSurface
  • placesColorOnSurfaceVariant
  • placesColorSecondaryContainer
  • placesColorOnSecondaryContainer
  • placesCornerRadius
  • placesTextAppearanceBodySmall
  • placesTextAppearanceBodyMedium
  • placesTextAppearanceBodyLarge
  • placesTextAppearanceLabelLarge
  • placesTextAppearanceHeadlineMedium
  • placesColorAttributionLight (enum cho màu trắng, xám và đen)
  • placesColorAttributionDark (enum cho màu trắng, xám và đen)

Mẫu này tuỳ chỉnh nội dung tiêu chuẩn.

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

Mẫu này tuỳ chỉnh tất cả nội dung.

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