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

يتيح لك مكوّن "الإكمال التلقائي للأماكن" الأساسي في حزمة أدوات "خرائط 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>