پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

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

کامپوننت Basic Place Autocomplete از Places UI Kit به شما امکان می‌دهد یک کامپوننت UI جداگانه اضافه کنید که وقتی کاربر مکانی را انتخاب می‌کند، یک شناسه مکان را برمی‌گرداند. این کامپوننت یک پوشش تمام صفحه است که یک نوار جستجو برای کاربران فراهم می‌کند تا یک عبارت جستجو را وارد کنند. همزمان با تایپ کاربر، لیستی از نتایج تکمیل خودکار در زیر نوار جستجو نشان داده می‌شود. وقتی کاربر روی یک مکان ضربه می‌زند، یک شیء مکان با فقط شناسه مکان به توسعه‌دهنده بازگردانده می‌شود. این کامپوننت قابل تنظیم است.

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

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

صورتحساب

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

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

پارامترهای فیلتر تکمیل خودکار (برای مثال، انواعی که باید برگردانده شوند، کشوری که نتایج به آن محدود می‌شوند، مختصات منطقه برای نتایج، مبدا درخواست برای نمایش اطلاعات فاصله، در صورت وجود) را همانطور که برای استفاده از Place Autocomplete (جدید) بدون Places UI Kit استفاده می‌کنید، تنظیم کنید. برای دستورالعمل‌های کامل و نمونه‌ای از کد ایجاد فیلتر تکمیل خودکار ، به مستندات Place Autocomplete (جدید) مراجعه کنید.

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

کاتلین

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

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

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، یک ورودی برای رنگ در 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>