پلتفرم را انتخاب کنید: Android iOS JavaScript

جزء اصلی تکمیل خودکار مکان

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

جزء اصلی تکمیل خودکار مکان دارای گزینه‌های سفارشی‌سازی زیر است: چگالی فهرست، و اینکه آیا نمادهای مکان را شامل شود یا خیر. از AutocompleteUICustomization برای سفارشی کردن کامپوننت استفاده کنید.

می‌توانید از مؤلفه «تکمیل خودکار مکان پایه» به‌طور مستقل یا در ارتباط با سایر APIها و سرویس‌های پلتفرم Google Maps استفاده کنید.

صورتحساب

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

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

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

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

کاتلین

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

نمونه کامل را ببینید .

کامپوننت Basic Autocomplete را سفارشی کنید

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

چگالی فهرست

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

نماد موقعیت مکانی

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

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

هنگام نمونه سازی یک قطعه، می توانید موضوعی را تعیین کنید که هر یک از ویژگی های سبک پیش فرض را لغو کند. می‌توانید رنگ‌ها، تایپوگرافی، فاصله‌ها، حاشیه‌ها و گوشه‌های جزء جزئیات مکان خود را سفارشی کنید. پیش فرض PlacesMaterialTheme است.

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

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

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

سفارشی‌سازی محتوا و تم را به کامپوننت Basic Autocomplete اضافه کنید

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