คอมโพเนนต์ Place Autocomplete พื้นฐาน

คอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานของชุดเครื่องมือ UI ของ Places ช่วยให้คุณเพิ่มคอมโพเนนต์ UI แต่ละรายการที่แสดงรหัสสถานที่เมื่อผู้ใช้เลือกสถานที่ได้ คอมโพเนนต์นี้เป็นหน้าจอแบบเต็มที่แสดงแถบค้นหาเพื่อให้ผู้ใช้ป้อนคำค้นหา ขณะที่ผู้ใช้พิมพ์ ระบบจะแสดงรายการผลการค้นหาที่เติมข้อความอัตโนมัติใต้แถบค้นหา เมื่อผู้ใช้แตะสถานที่ ระบบจะแสดงออบเจ็กต์สถานที่ที่มีเฉพาะรหัสสถานที่แก่นักพัฒนาแอป คอมโพเนนต์นี้ปรับแต่งได้

คอมโพเนนต์การเติมข้อความอัตโนมัติของสถานที่พื้นฐานมีตัวเลือกการปรับแต่งต่อไปนี้ ความหนาแน่นของรายการ และจะรวมไอคอนตำแหน่งหรือไม่ ใช้ AutocompleteUICustomization เพื่อปรับแต่งคอมโพเนนต์

คุณสามารถใช้คอมโพเนนต์ Place Autocomplete พื้นฐานแบบแยกกันหรือร่วมกับ API และบริการอื่นๆ ของแพลตฟอร์ม Google Maps ก็ได้

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

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

เพิ่มคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานลงในแอป

ตั้งค่าพารามิเตอร์ตัวกรองการเติมข้อความอัตโนมัติ (เช่น ประเภทที่จะแสดง ประเทศที่จะจำกัดผลลัพธ์ พิกัดภูมิภาคสำหรับผลลัพธ์ ต้นทางของคำขอเพื่อแสดงข้อมูลระยะทาง หากมี) เช่นเดียวกับการใช้การเติมข้อความอัตโนมัติของ Places (ใหม่) โดยไม่มี Places UI Kit ดูวิธีการทั้งหมดและตัวอย่างโค้ดเพื่อสร้างตัวกรองการเติมข้อความอัตโนมัติได้ในเอกสารประกอบของ Place Autocomplete (ใหม่)

เมื่อสร้างตัวกรองการเติมข้อความอัตโนมัติแล้ว ให้เพิ่มการปรับแต่ง UI ดูตัวเลือกและวิธีการปรับแต่ง

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

ดูตัวอย่างฉบับเต็ม

ปรับแต่งคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน

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

ความหนาแน่นของรายการ

คุณเลือกได้ว่าจะแสดงรายการแบบ 2 บรรทัดหรือแบบหลายบรรทัด ใช้ตัวเลือกใน AutocompleteListDensity (TWO_LINE หรือ MULTI_LINE) ในชั้นเรียน AutocompleteUICustomization หากไม่ได้ระบุความหนาแน่นของรายการ คอมโพเนนต์จะแสดงรายการ 2 บรรทัด

ไอคอนตำแหน่ง

คุณเลือกได้ว่าจะแสดงไอคอนสถานที่เริ่มต้นในรายการผลการค้นหาหรือไม่ ใช้ตัวเลือกใน AutocompleteUIIcon (listItemDefaultIcon หรือ noIcon) ในชั้นเรียน AutocompleteUICustomization

ปรับแต่งธีม

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

แอตทริบิวต์ธีมที่ไม่ได้ลบล้างจะใช้รูปแบบเริ่มต้น

UI Kit ของ Places มีธีมมืดเป็นค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการปรับแต่งธีมมืด ให้เพิ่มรายการสำหรับสีใน values-night/colors.xml

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีมได้ที่ส่วนการจัดรูปแบบที่กำหนดเอง

เพิ่มเนื้อหาและการปรับแต่งธีมลงในคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน

ใช้คลาส AutocompleteUICustomization เพื่อปรับแต่งคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

ตัวอย่าง

เพิ่มคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานที่กำหนดเอง

Kotlin

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

Java

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

ปรับแต่งธีม

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