기본 Place Autocomplete 구성요소

Places UI Kit의 기본 Place Autocomplete 구성요소를 사용하면 사용자가 장소를 선택할 때 장소 ID를 반환하는 개별 UI 구성요소를 추가할 수 있습니다. 이 구성요소는 사용자가 검색어를 입력할 수 있는 검색창을 제공하는 전체 화면 커버입니다. 사용자가 입력하면 검색창 아래에 자동 완성 결과 목록이 표시됩니다. 사용자가 장소를 탭하면 장소 ID만 있는 장소 객체가 개발자에게 반환됩니다. 이 구성요소는 맞춤설정할 수 있습니다.

기본 장소 자동 완성 구성요소에는 목록 밀도와 위치 아이콘 포함 여부라는 맞춤설정 옵션이 있습니다. AutocompleteUICustomization를 사용하여 구성요소를 맞춤설정합니다.

기본 장소 자동 완성 구성요소는 독립적으로 사용하거나 다른 Google Maps Platform API 및 서비스와 함께 사용할 수 있습니다.

결제

구성요소가 열리고 쿼리가 실행될 때마다 요금이 청구됩니다. 세션이 만료되거나 목록에서 장소를 선택하지 않는 한 해당 세션에 대해 다시 청구되지 않습니다.

앱에 기본 자동 완성 구성요소 추가

Places UI Kit 없이 Place Autocomplete (New)을 사용하는 것처럼 자동 완성 필터 매개변수 (예: 반환할 유형, 결과를 제한할 국가, 결과의 지역 좌표, 사용 가능한 경우 거리 정보를 표시할 요청의 출처)를 설정합니다. 전체 안내와 자동 완성 필터를 만드는 코드의 예는 Place Autocomplete (신규) 문서를 참고하세요.

자동 완성 필터를 만든 후 UI 맞춤설정을 추가합니다. 맞춤설정 옵션 및 안내를 확인하세요.

Kotlin

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

자바

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

전체 예시 보기

기본 자동 완성 구성요소 맞춤설정

콘텐츠 맞춤설정

목록 밀도

2줄 목록 또는 여러 줄 목록을 표시할 수 있습니다. AutocompleteUICustomization 클래스에서 AutocompleteListDensity (TWO_LINE 또는 MULTI_LINE)의 옵션을 사용합니다. 목록 밀도를 지정하지 않으면 구성요소에 2줄 목록이 표시됩니다.

위치 아이콘

결과 목록에 기본 장소 아이콘을 표시할지 선택할 수 있습니다. AutocompleteUICustomization 클래스에서 AutocompleteUIIcon (listItemDefaultIcon 또는 noIcon)의 옵션을 사용합니다.

테마 맞춤설정

기본 스타일 속성을 재정의하는 테마를 지정할 수 있습니다. 장소 세부정보 구성요소의 색상, 서체, 간격, 테두리, 모서리를 맞춤설정할 수 있습니다. 기본값은 PlacesMaterialTheme입니다.

재정의되지 않은 테마 속성은 기본 스타일을 사용합니다.

Places UI 키트는 기본적으로 어두운 테마를 제공하므로 어두운 테마와 밝은 테마를 모두 맞춤설정해야 할 수 있습니다. 어두운 테마를 맞춤설정하려면 values-night/colors.xml에 색상 항목을 추가합니다.

테마에 관한 자세한 내용은 맞춤 스타일 지정 섹션을 참고하세요.

기본 자동 완성 구성요소에 콘텐츠 및 테마 맞춤설정 추가

AutocompleteUICustomization 클래스를 사용하여 기본 자동 완성 구성요소를 맞춤설정합니다.

Kotlin

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

자바

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

자바

  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>