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

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

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

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

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

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

الفوترة

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

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

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

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

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

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

جافا

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) {...}
  }
)
  

جافا

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

جافا

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
    

جافا

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
)
    

جافا

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)
    

جافا

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>