اختيار النظام الأساسي: Android iOS JavaScript

مكوِّن "الإكمال التلقائي الأساسي للأماكن"

يتيح لك مكوِّن "الإكمال التلقائي الأساسي للأماكن" في حزمة أدوات "خرائط Google" الجاهزة للأماكن إضافة مكوِّن فردي لواجهة المستخدم يعرض رقم تعريف المكان عندما يختار المستخدم مكانًا. المكوِّن هو غطاء ملء الشاشة يوفّر شريط بحث للمستخدمين لإدخال طلب بحث. أثناء كتابة المستخدم، ستظهر قائمة بنتائج الإكمال التلقائي أسفل شريط البحث. عندما ينقر المستخدم على مكان، يتم عرض عنصر مكان يتضمّن رقم تعريف المكان فقط على المطوّر. يمكن تخصيص هذا المكوِّن.

يتضمّن مكوِّن "الإكمال التلقائي الأساسي للأماكن" خيارات التخصيص التالية: كثافة القائمة وما إذا كان يجب تضمين رموز المواقع الجغرافية. استخدِم AutocompleteUICustomization لتخصيص المكوِّن.

يمكنك استخدام مكوِّن "الإكمال التلقائي الأساسي للأماكن" بشكلٍ مستقل أو بالاشتراك مع واجهات برمجة التطبيقات والخدمات الأخرى في "منصة خرائط Google".

الفوترة

يتم تحصيل رسوم منك في كل مرة يتم فيها فتح المكوِّن وإجراء طلب بحث. ولن يتم تحصيل رسوم منك مرة أخرى خلال تلك الجلسة ما لم تنتهِ الجلسة أو يتم اختيار مكان من القائمة.

إضافة مكوِّن "الإكمال التلقائي الأساسي" إلى تطبيقك

اضبط مَعلمات فلتر الإكمال التلقائي (على سبيل المثال، الأنواع التي يجب عرضها، والبلد الذي يجب حصر النتائج فيه، وإحداثيات المنطقة للنتائج، ومصدر الطلب لعرض معلومات المسافة، إذا كانت متوفّرة) كما تفعل عند استخدام ميزة "الإكمال التلقائي للأماكن (الجديدة)" بدون حزمة أدوات "خرائط Google" الجاهزة للأماكن. راجِع مستندات ميزة "الإكمال التلقائي للأماكن (الجديدة)" للحصول على التعليمات الكاملة ومثال على الرمز البرمجي لإنشاء فلتر إكمال تلقائي.

بعد إنشاء فلتر الإكمال التلقائي، أضِف تخصيصات واجهة المستخدم. راجِع خيارات التخصيص والتعليمات.

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

يمكنك الاطّلاع على المثال الكامل.

تخصيص مكوِّن "الإكمال التلقائي الأساسي"

تخصيص المحتوى

كثافة القائمة

يمكنك اختيار عرض قائمة من سطرَين أو قائمة متعددة الأسطر. استخدِم الخيارات في AutocompleteListDensity (TWO_LINE أو MULTI_LINE) في الفئة AutocompleteUICustomization. إذا لم تحدّد كثافة القائمة، سيعرض المكوِّن قائمة من سطرَين.

رمز الموقع الجغرافي

يمكنك اختيار عرض رمز مكان تلقائي في قائمة النتائج. استخدِم الخيارات في AutocompleteUIIcon (listItemDefaultIcon أو noIcon) في الفئة AutocompleteUICustomization.

تخصيص التصميم

يمكنك تحديد تصميم يلغي أيّ من سمات النمط التلقائية. يمكنك تخصيص الألوان والطباعة والمسافات والحدود والأركان في مكوِّن "تفاصيل المكان". الإعداد التلقائي هو PlacesMaterialTheme.

تستخدِم سمات التصميم التي لم يتم إلغاؤها الأنماط التلقائية.

توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرَين الداكن والفاتح. لتخصيص التصميم الداكن، أضِف إدخالاً للون في 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);

تخصيص التصميم

توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرَين الداكن والفاتح. لتخصيص التصميم الداكن، أضِف إدخالاً للون في 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>