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

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

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

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

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

يمكنك أيضًا تخصيص الطلب لتنفيذ SearchByTextRequest أو SearchNearbyRequest.

الفوترة

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

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

ملاحظة: الاطّلاع على المثال الكامل

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

عندما تريد أن يحمّل تطبيقك نتيجة بحث نصي أو نتيجة بحث بالقرب منك، استخدِم 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.

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

توفّر حزمة Places UI Kit مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف إدخالاً للون في values-night/colors.xml.

راجِع قسم التصميم المخصّص لمزيد من المعلومات حول التصميم.

أمثلة

إنشاء مثيل لمكوّن "البحث عن الأماكن"

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)
    

تخصيص المظهر

توفّر حزمة 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>