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

Thành phần Tìm kiếm địa điểm

Thành phần Tìm kiếm địa điểm của Bộ công cụ giao diện người dùng Địa điểm kết xuất kết quả tìm kiếm địa điểm trong một danh sách.

Thành phần Tìm kiếm địa điểm trong Places UI Kit

Bạn có thể tuỳ chỉnh danh sách Tìm kiếm địa điểm. Bạn có thể chỉ định:

  • Nội dung cần hiển thị
  • Kích thước nội dung nghe nhìn ở hướng dọc
  • Rút ngắn văn bản
  • Hướng
  • Ghi đè giao diện phù hợp với thương hiệu và ngôn ngữ thiết kế của ứng dụng
  • Vị trí của thông tin ghi công
  • Liệu có thể chọn một địa điểm hay không

Bạn cũng có thể tuỳ chỉnh yêu cầu để thực hiện SearchByTextRequest hoặc a SearchNearbyRequest.

Thanh toán

Bạn sẽ bị tính phí mỗi khi giá trị liên kết configureFromSearchByTextRequest() hoặc configureFromSearchNearbyRequest() thay đổi.

Thêm tính năng Tìm kiếm địa điểm vào ứng dụng

Sử dụng tiện ích Tìm kiếm địa điểm bằng cách thêm PlaceSearchFragment fragment vào bố cục.

Khi bạn muốn ứng dụng tải kết quả tìm kiếm văn bản hoặc tìm kiếm gần đó, hãy gọi configureFromSearchByTextRequest() hoặc configureFromSearchNearbyRequest() bằng yêu cầu.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Bạn cũng có thể thêm PlaceSearchFragmentListener không bắt buộc vào thành phần để nhận lệnh gọi lại khi thành phần tải, một địa điểm được chọn (nếu được thiết lập để có thể chọn) hoặc khi có lỗi tải thành phần.

Kotlin

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)

Tuỳ chỉnh thành phần Tìm kiếm địa điểm

Tuỳ chỉnh nội dung

Bạn phải chỉ định nội dung mà thành phần sẽ hiển thị.

Ví dụ này định cấu hình thành phần để hiển thị địa chỉ và điểm xếp hạng của Địa điểm.

Kotlin

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));

Bạn cũng có thể tuỳ chỉnh các khía cạnh sau đây của nội dung xuất hiện trong thành phần Tìm kiếm địa điểm (không bắt buộc):

  • PlaceSearchFragment.Content: Nội dung xuất hiện trong thành phần.
  • mediaSize: Kích thước ảnh ở hướng dọc của mảnh. Giá trị mặc định là SMALL.
  • preferTruncation: Có rút ngắn văn bản của từng chế độ xem Thông tin chi tiết về địa điểm hay không.
  • attributionPosition: Có hiển thị thông tin ghi công của Google Maps ở đầu hoặc cuối thành phần hay không.
  • selectable: Có thể chọn từng địa điểm trong danh sách hay không.

Thêm cấu hình tuỳ chỉnh vào PlaceSearchFragment.

Kotlin

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

Java

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

Tuỳ chỉnh hướng

Hướng mặc định là hướng dọc. Đối với hướng ngang, hãy chỉ định Orientation.HORIZONTAL trong PlaceSearchFragment.newInstance().

Kotlin

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Java

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Tuỳ chỉnh giao diện

Khi tạo thực thể 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. 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 thành phần Thông tin chi tiết về địa điểm. Giá trị mặc định là PlacesMaterialTheme.

Mọi thuộc tính giao diện không bị ghi đè sẽ sử dụng kiểu mặc định.

Bộ công cụ giao diện người dùng Địa điểm 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à sáng. Để tuỳ chỉnh giao diện tối, hãy thêm một mục cho màu trong values-night/colors.xml.

Hãy xem phần Định kiểu tuỳ chỉnh để biết thêm thông tin về việc tạo giao diện.

Ví dụ

Tạo thực thể cho thành phần Tìm kiếm địa điểm

Kotlin

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Tuỳ chỉnh giao diện

Bộ công cụ giao diện người dùng Địa điểm 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à sáng. Để tuỳ chỉnh giao diện tối, hãy thêm một mục cho màu trong values-night/colors.xml. 

 <style name="CustomizedTheme" 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>