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

مكوّن "البحث عن الأماكن"

يعرض مكوّن "البحث عن أماكن" في Places UI Kit نتائج البحث عن مكان في قائمة.

مكوّن "البحث عن الأماكن" في حزمة أدوات Places UI Kit

يمكنك تخصيص قائمة "البحث عن الأماكن". يمكنك تحديد ما يلي:

  • المحتوى المطلوب عرضه
  • حجم الوسائط في الاتجاه العمودي
  • اقتطاع النص
  • الاتجاه
  • عمليات إلغاء المظهر التي تتطابق مع علامتك التجارية ولغة تصميم تطبيقك
  • موضع تحديد المصدر
  • ما إذا كان يمكن اختيار مكان

يمكنك أيضًا تخصيص الطلب لتنفيذ Search by text request أو Search Nearby request.

الفوترة

يتم تحصيل الرسوم منك في كل مرة يتم فيها تغيير قيمة الربط configureFromSearchByTextRequest() أو configureFromSearchNearbyRequest().

إضافة ميزة "البحث عن أماكن" إلى تطبيقك

استخدِم أداة "البحث عن الأماكن" المصغّرة من خلال إضافة PlaceSearchFragment Fragment إلى التصميم.

عندما تريد أن يحمّل تطبيقك نتيجة بحث نصي أو نتيجة بحث بالقرب منك، استخدِم configureFromSearchByTextRequest() أو configureFromSearchNearbyRequest() مع الطلب.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

يمكنك أيضًا إضافة PlaceSearchFragmentListener اختياري إلى المكوّن لتلقّي عمليات ردّ الاتصال عند تحميل المكوّن أو اختيار مكان (إذا تم ضبطه على أن يكون قابلاً للاختيار) أو عند حدوث خطأ في تحميل المكوّن.

Kotlin

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)

تخصيص مكوّن "بحث الأماكن"

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

يجب تحديد المحتوى الذي سيعرضه المكوّن.

يضبط هذا المثال المكوّن لعرض عنوان "المكان" وتقييمه.

Kotlin

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));

يمكنك أيضًا تخصيص الجوانب التالية من المحتوى الذي يظهر في مكوّن "البحث عن الأماكن":

  • PlaceSearchFragment.Content: المحتوى المعروض في المكوّن.
  • mediaSize: حجم الصورة في الاتجاه العمودي للقصاصة. القيمة التلقائية هي SMALL.
  • preferTruncation: لتحديد ما إذا كان سيتم اقتطاع نص كل عرض من عروض "تفاصيل المكان".
  • attributionPosition: لتحديد ما إذا كان سيتم عرض بيان مصدر بيانات "خرائط Google" في أعلى المكوّن أو أسفله.
  • selectable: تحدّد ما إذا كان يمكن اختيار كل مكان في القائمة.

أضِف إعدادات التخصيص إلى PlaceSearchFragment.

Kotlin

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

Java

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

تخصيص الاتجاه

يكون الاتجاه التلقائي عموديًا. بالنسبة إلى الاتجاه الأفقي، حدِّد Orientation.HORIZONTAL في PlaceSearchFragment.newInstance().

Kotlin

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Java

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

تخصيص المظهر

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

تستخدم أي سمات للمظهر لم يتم إلغاؤها الأنماط التلقائية. إذا أردت توفير مظهر داكن، يمكنك إضافة إدخال للون في 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>

مثال

Kotlin

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)