کامپوننت تکمیل خودکار مکان پایه

The Basic Place Autocomplete component of the Places UI Kit lets you add an individual UI component that returns a place ID when a user selects a place. The component is a full screen cover that provides a search bar for users to enter a query. As the user types, a list of autocomplete results will be shown below the search bar. When the user taps on a place, a place object with only place ID is returned to the developer. This component is customizable.

کامپوننت Basic Place Autocomplete گزینه‌های سفارشی‌سازی زیر را دارد: تراکم لیست و اینکه آیا آیکون‌های مکان را شامل شود یا خیر. برای سفارشی‌سازی کامپوننت AutocompleteUICustomization استفاده کنید.

شما می‌توانید از کامپوننت Basic Place Autocomplete به صورت مستقل یا همراه با سایر APIها و سرویس‌های پلتفرم نقشه‌های گوگل استفاده کنید.

صورتحساب

هر بار که کامپوننت باز می‌شود و درخواستی ثبت می‌شود، هزینه‌ای از شما دریافت می‌شود. دیگر برای آن جلسه هزینه‌ای دریافت نمی‌شود، مگر اینکه آن جلسه منقضی شود یا جایی از لیست انتخاب شود.

کامپوننت Basic Autocomplete را به برنامه خود اضافه کنید

Set the autocomplete filter parameters (for example, the types to return, the country to limit results to, the region coordinates for results, the origin of the request to display distance information, if available) as you would to use Place Autocomplete (New) without the Places UI Kit. See the Place Autocomplete (New) documentation for full instructions and an example of the code to create an autocomplete filter .

پس از ایجاد فیلتر تکمیل خودکار، تنظیمات رابط کاربری خود را اضافه کنید. به گزینه‌ها و دستورالعمل‌های سفارشی‌سازی مراجعه کنید.

کاتلین

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

مثال کامل را ببینید .

کامپوننت تکمیل خودکار پایه را سفارشی کنید

سفارشی سازی محتوا

تراکم فهرست

شما می‌توانید انتخاب کنید که یک لیست دو خطی یا یک لیست چند خطی نمایش داده شود. از گزینه‌های موجود در AutocompleteListDensity ( TWO_LINE یا MULTI_LINE ) در کلاس AutocompleteUICustomization استفاده کنید. اگر چگالی لیست را مشخص نکنید، کامپوننت یک لیست دو خطی نمایش می‌دهد.

آیکون مکان

شما می‌توانید انتخاب کنید که آیا آیکون مکان پیش‌فرض در لیست نتایج نمایش داده شود یا خیر. از گزینه‌های موجود در AutocompleteUIIcon ( listItemDefaultIcon یا noIcon ) در کلاس AutocompleteUICustomization استفاده کنید.

سفارشی کردن تم

شما می‌توانید یک تم (theme) مشخص کنید که هر یک از ویژگی‌های پیش‌فرض استایل را لغو کند. می‌توانید رنگ‌ها، تایپوگرافی، فاصله‌گذاری، حاشیه‌ها و گوشه‌های کامپوننت Place Details خود را سفارشی کنید. پیش‌فرض آن PlacesMaterialTheme است.

هر ویژگی قالب که بازنویسی نشده باشد، از استایل‌های پیش‌فرض استفاده می‌کند.

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، یک ورودی برای رنگ در values-night/colors.xml اضافه کنید.

برای اطلاعات بیشتر در مورد تم‌بندی، به بخش استایل‌بندی سفارشی مراجعه کنید.

افزودن سفارشی‌سازی‌های محتوا و قالب به کامپوننت تکمیل خودکار پایه

از کلاس AutocompleteUICustomization برای سفارشی‌سازی کامپوننت Basic Autocomplete استفاده کنید.

کاتلین

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

مثال

یک کامپوننت تکمیل خودکار پایه سفارشی اضافه کنید.

کاتلین

  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>