مجموعة أدوات واجهة المستخدم لميزة "تفاصيل الأماكن" (تجريبية)

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

توفّر مجموعة أدوات واجهة المستخدم عرضًا مكثّفًا يمكن عرضه أفقيًا أو عموديًا. يمكنك تخصيص مظهر تفاصيل المكان من خلال إلغاء أي من سمات الموضوع التلقائي. يمكنك أيضًا تخصيص حقول تفاصيل الأماكن المضمّنة من خلال تحديد قائمة بإدخالات Content، يتوافق كل منها مع معلومة معروضة عن المكان.

الفوترة

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

تفعيل حِزمة واجهة مستخدِم "الأماكن"

قبل استخدام حِزمة واجهة مستخدم "الأماكن"، عليك إجراء ما يلي:

• أنشئ مشروعًا على Cloud باستخدام حساب فوترة.
• فعِّل Places API لمشروعك.
• الحصول على مفتاح واجهة برمجة التطبيقات

أمثلة على مجموعة أدوات واجهة المستخدم في "تفاصيل المكان"

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

يمكنك تحديد الاتجاه (أفقي أو عمودي) وعناصر الاستبدال في المظهر والمحتوى. خيارات المحتوى هي الوسائط والعنوان والتقييم والسعر والنوع والمدخل المخصّص للوصول بدون عوائق ورابط الخرائط ورابط الاتجاهات. [الاطّلاع على مثال على التخصيص]().

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

مثال على التخصيص

عند إنشاء مثيل لجزء، يمكنك تحديد مظهر تلغي أيًا من سمات التصميم التلقائية. وتستخدم أيّ سمات مظهر لم يتم إلغاؤها الأنماط التلقائية. إذا أردت توفير مظهر داكن، يمكنك إضافة إدخال للون في values-night/colors.xml.

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <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>

يمكنك تخصيص الأنماط التالية:

• placesColorSurfaceContainerLowest
• placesColorOutlineDecorative
• placesColorPrimary
• placesColorOnSurface
• placesColorOnSurfaceVariant
• placesColorSecondaryContainer
• placesColorOnSecondaryContainer
• placesCornerRadius
• placesTextAppearanceBodySmall
• placesTextAppearanceBodyMedium
• placesTextAppearanceBodyLarge
• placesTextAppearanceLabelLarge
• placesTextAppearanceHeadlineMedium
• placesColorAttributionLight (قوائم بقيم ثابتة للأبيض والرمادي والأسود)
• placesColorAttributionDark (قوائم بقيم ثابتة للأبيض والرمادي والأسود)

يخصّص هذا المثال المحتوى العادي.

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.STANDARD_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

يخصّص هذا النموذج كل المحتوى.

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.ALL_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)