เลือกแพลตฟอร์ม: Android iOS JavaScript

คอมโพเนนต์การค้นหาสถานที่

คอมโพเนนต์การค้นหาสถานที่ของ Places UI Kit จะแสดงผลการค้นหาสถานที่เป็นรายการ

คอมโพเนนต์การค้นหาสถานที่ของ Places UI Kit

คุณปรับแต่งรายการการค้นหาสถานที่ได้ คุณระบุ

  • เนื้อหาที่จะแสดง
  • ขนาดสื่อในแนวนอน
  • การตัดข้อความ
  • การวางแนว
  • การลบล้างธีมที่ตรงกับแบรนด์และภาษาการออกแบบของแอป
  • ตำแหน่งของการระบุแหล่งที่มา
  • สถานที่เลือกได้หรือไม่

นอกจากนี้ คุณยังปรับแต่งคำขอให้ดำเนินการ Search by text request หรือ Search Nearby request ได้ด้วย

การเรียกเก็บเงิน

ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่มีการเปลี่ยนแปลงค่าการเชื่อมโยง configureFromSearchByTextRequest() หรือ configureFromSearchNearbyRequest()

เพิ่มการค้นหาสถานที่ลงในแอป

ใช้วิดเจ็ตการค้นหาสถานที่โดยเพิ่มPlaceSearchFragment Fragment ลงในเลย์เอาต์

เมื่อต้องการให้แอปโหลดผลการค้นหาข้อความหรือผลการค้นหาในบริเวณใกล้เคียง ให้เรียกใช้ configureFromSearchByTextRequest() หรือ configureFromSearchNearbyRequest() พร้อมคำขอ

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

นอกจากนี้ คุณยังเพิ่ม PlaceSearchFragmentListener ที่ไม่บังคับลงในคอมโพเนนต์เพื่อรับการเรียกกลับเมื่อคอมโพเนนต์โหลด สถานที่ได้รับการเลือก (หากตั้งค่าให้เลือกได้) หรือเมื่อมีข้อผิดพลาดในการโหลดคอมโพเนนต์

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) {...}
  }
)

ปรับแต่งคอมโพเนนต์การค้นหาสถานที่

ปรับแต่งเนื้อหา

คุณต้องระบุเนื้อหาที่คอมโพเนนต์จะแสดง

ตัวอย่างนี้กำหนดค่าคอมโพเนนต์ให้แสดงที่อยู่และการให้คะแนนของสถานที่

Kotlin

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

Java

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

นอกจากนี้ คุณยังปรับแต่งลักษณะต่อไปนี้ของเนื้อหาที่ปรากฏในคอมโพเนนต์การค้นหาสถานที่ได้ด้วย (ไม่บังคับ)

  • PlaceSearchFragment.Content: เนื้อหาที่แสดงในคอมโพเนนต์
  • mediaSize: ขนาดรูปภาพในการวางแนวตั้งของชิ้นส่วน ค่าเริ่มต้นคือ SMALL
  • preferTruncation: จะตัดข้อความของมุมมองรายละเอียดสถานที่แต่ละรายการหรือไม่
  • attributionPosition: เลือกว่าจะแสดงการระบุแหล่งที่มาของ Google Maps ที่ด้านบนหรือด้านล่างของคอมโพเนนต์
  • เลือกได้: สถานที่แต่ละแห่งในรายการเลือกได้หรือไม่

เพิ่มการกำหนดค่าการปรับแต่งลงใน 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)

ปรับแต่งการวางแนว

การวางแนวเริ่มต้นคือแนวตั้ง สำหรับการวางแนวแนวนอน ให้ระบุ Orientation.HORIZONTAL ใน PlaceSearchFragment.newInstance()

Kotlin

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

Java

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

ปรับแต่งธีม

เมื่อสร้างอินสแตนซ์ของ Fragment คุณจะระบุธีมที่ลบล้างแอตทริบิวต์รูปแบบเริ่มต้นได้ โดยมีค่าเริ่มต้นเป็น PlacesMaterialTheme ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีมได้ที่เอกสารประกอบเกี่ยวกับคอมโพเนนต์รายละเอียดสถานที่

แอตทริบิวต์ธีมที่ไม่ได้ลบล้างจะใช้รูปแบบเริ่มต้น หากต้องการรองรับธีมมืด คุณสามารถเพิ่มรายการสำหรับสีใน 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>

ตัวอย่าง

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)