جزء جزئیات مکان

جزء Place Details در Places UI Kit به شما امکان می دهد یک مؤلفه UI جداگانه اضافه کنید که جزئیات مکان را در برنامه شما نمایش می دهد.

PlaceDetailsCompactFragment جزئیات یک مکان انتخاب شده را با استفاده از حداقل فضا ارائه می دهد. این ممکن است در یک پنجره اطلاعاتی که مکان را روی نقشه برجسته می‌کند، در یک تجربه رسانه‌های اجتماعی مانند اشتراک‌گذاری یک مکان در چت، به عنوان پیشنهادی برای انتخاب مکان فعلی‌تان، یا در یک مقاله رسانه‌ای برای ارجاع به مکان در Google Maps مفید باشد. PlaceDetailsCompactFragment می تواند نام، آدرس، رتبه بندی، نوع، قیمت، نماد دسترسی، وضعیت باز و یک عکس را نمایش دهد.

مولفه Place Details را می توان به طور مستقل یا همراه با سایر APIها و سرویس های پلتفرم Google Maps استفاده کرد. مؤلفه یا شناسه مکان یا مختصات طول و عرض جغرافیایی را می گیرد و اطلاعات جزئیات مکان ارائه شده را برمی گرداند.

صورتحساب

هنگام استفاده از Place Details UI Kit، برای هر بار فراخوانی روش .loadWithPlaceId() یا .loadWithResourceName() صورتحساب دریافت می کنید. اگر یک مکان را چندین بار بارگیری کنید، برای هر درخواست صورتحساب دریافت می کنید.

برای اینکه چندین بار شارژ نشوید، مستقیماً .loadWithPlaceId() یا .loadWithResourceName() را در روش های چرخه عمر Android اضافه نکنید. برای مثال، در متد onResume() مستقیماً .loadWithPlaceId() یا .loadWithResourceName() را فراخوانی نکنید.

جزئیات مکان را به برنامه خود اضافه کنید

می توانید با افزودن یک قطعه به یک طرح، جزئیات مکان را به برنامه خود اضافه کنید. وقتی قطعه را نمونه‌سازی می‌کنید، می‌توانید ظاهر و احساس اطلاعات جزئیات مکان را مطابق با نیازهایتان و مطابقت با ظاهر برنامه‌تان سفارشی کنید.

شما دو روش در Kotlin و Java در دسترس دارید: یکی برای بارگذاری قطعه با شناسه مکان ( loadWithPlaceId() ) و دیگری برای بارگیری قطعه با نام منبع ( loadWithResourceName() ). اگر از هر دو شناسه مکان و نام منابع استفاده می کنید، می توانید یکی از روش ها یا هر دو را انتخاب کنید.

می توانید جهت (افقی یا عمودی)، لغو تم و محتوا را مشخص کنید. گزینه های محتوا عبارتند از رسانه، آدرس، رتبه بندی، قیمت، نوع، ورودی قابل دسترسی، و وضعیت اکنون باز. درباره سفارشی سازی بیشتر بیاموزید .

کاتلین

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
  R.style.CustomizedPlaceDetailsTheme
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
  override fun onSuccess(place: Place) { ... }
      
  override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId)
// Load the fragment with a resource name.
//fragment.loadWithResourceName(resourceName)

جاوا

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override public void onSuccess(Place place) { ... }
    
        @Override public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId);
      
// Load the fragment with a resource name.
// fragment.loadWithResourceName(resourceName);

برای بارگیری ویجت جزئیات مکان، کد کامل را ببینید

کاتلین

        import android.os.Bundle
        import android.util.Log
        import android.view.View
        import android.widget.FrameLayout
        import androidx.appcompat.app.AppCompatActivity
        import com.google.android.gms.maps.CameraUpdateFactory
        import com.google.android.gms.maps.GoogleMap
        import com.google.android.gms.maps.OnMapReadyCallback
        import com.google.android.gms.maps.SupportMapFragment
        import com.google.android.gms.maps.model.LatLng
        import com.google.android.gms.maps.model.PointOfInterest
        import com.google.android.libraries.places.api.Places
        import com.google.android.libraries.places.api.net.PlacesClient
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment.Companion.ALL_CONTENT
        import com.google.android.libraries.places.widget.model.Orientation
        
        class MainActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnPoiClickListener {
            private var googleMap: GoogleMap? = null
            private val orientation: Orientation = Orientation.HORIZONTAL
            private lateinit var placesClient: PlacesClient
            private var placeDetailsFragment: PlaceDetailsCompactFragment? = null
        
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                setContentView(R.layout.activity_main)
        
                // --- Initialize Places SDK ---
                val apiKey = BuildConfig.PLACES_API_KEY
                if (apiKey.isEmpty()) {
                    Log.e("Places test", "No api key")
                    finish()
                    return
                }
                Places.initializeWithNewPlacesApiEnabled(applicationContext, apiKey)
                placesClient = Places.createClient(this)
                // -----------------------------
        
                val mapFragment = supportFragmentManager.findFragmentById(R.id.map_fragment) as SupportMapFragment?
                mapFragment?.getMapAsync(this)
            }
        
            override fun onMapReady(map: GoogleMap) {
                googleMap = map
                val sydney = LatLng(-33.8688, 151.2093)
                val zoomLevel = 13f
                googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, zoomLevel))
                googleMap?.setOnPoiClickListener(this)
            }
        
            override fun onPoiClick(poi: PointOfInterest) {
                val placeId = poi.placeId
                Log.d("POI Click", "Place ID: $placeId")
                showPlaceDetailsFragment(placeId)
            }
        
            private fun showPlaceDetailsFragment(placeId: String) {
                placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
                    ALL_CONTENT,
                    orientation,
                    R.style.CustomizedPlaceDetailsTheme
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadWithPlaceId(placeId)
            }
        }               
        
        

جزئیات مکان را سفارشی کنید

کیت UI Places یک رویکرد سیستم طراحی را برای سفارشی‌سازی بصری تقریباً بر اساس طراحی متریال (با برخی تغییرات خاص Google-Maps) ارائه می‌کند. به مرجع طراحی متریال برای رنگ و تایپوگرافی مراجعه کنید. به طور پیش فرض، این سبک به زبان طراحی بصری Google Maps پایبند است.

مهم: هنگام ایجاد تغییرات بصری، باید از الزامات اسناد Google Maps پیروی کنید.

هنگام نمونه سازی یک قطعه، می توانید موضوعی را تعیین کنید که هر یک از ویژگی های سبک پیش فرض را لغو کند. هر ویژگی موضوعی که لغو نشده است از سبک های پیش فرض استفاده می کند. اگر می‌خواهید از یک تم تیره پشتیبانی کنید، می‌توانید یک ورودی برای رنگ در values-night/colors.xml اضافه کنید.

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

شما می توانید سبک های زیر را سفارشی کنید:

ویژگی تم	استفاده
رنگ
placesColorSurface	پس زمینه ظرف و دیالوگ
placesColorOnSurface	سرفصل ها، محتوای گفتگو
placesColorOnSurfaceVariant	اطلاعات مکان
placesColorPrimary	پیوندها
placesColorOutlineDecorative	حاشیه کانتینر
placesColorSecondaryContainer	پس زمینه دکمه
placesColorOnSecondaryContainer	متن و نماد دکمه
placesColorPositive	اکنون برچسب "باز" ​​را قرار دهید
placesColorNegative	اکنون برچسب "بسته" را قرار دهید
placesColorInfo	نماد ورودی قابل دسترسی
تایپوگرافی
placesTextAppearanceHeadlineMedium	سرفصل های گفتگو
placesTextAppearanceTitleSmall	نام مکان
placesTextAppearanceBodyMedium	محتوای گفتگو
placesTextAppearanceBodySmall	اطلاعات مکان
placesTextAppearanceLabelLarge	برچسب دکمه
گوشه ها
placesCornerRadius	گوشه های کانتینر
اسناد نام تجاری Google Maps
placesColorAttributionLight	دکمه انتساب و افشای طرح زمینه روشن Google Maps (فهرست برای سفید، خاکستری و سیاه)
placesColorAttributionDark	دکمه انتساب و افشای طرح زمینه تاریک Google Maps (فهرست برای سفید، خاکستری و سیاه)

عرض و ارتفاع

برای نماهای عمودی، عرض توصیه شده بین 180 و 300dp است. برای نماهای افقی، عرض پیشنهادی بین 180 تا 500 دسی‌پی‌سی است. نمایش کوچکتر از 160dp ممکن است به درستی نمایش داده نشود.

بهترین تمرین این است که ارتفاع را تعیین نکنید. این به محتوای پنجره اجازه می دهد تا ارتفاع را تنظیم کند و اجازه می دهد تمام اطلاعات نمایش داده شوند.

توجه: تصویر کوچک مکان برای نماهایی با عرض کمتر از 350dp ظاهر نمی شود.

رنگهای انتساب

شرایط خدمات Google Maps از شما می‌خواهد که از یکی از سه رنگ مارک برای انتساب Google Maps استفاده کنید. وقتی تغییرات سفارشی‌سازی انجام می‌شود، این انتساب باید قابل مشاهده و قابل دسترسی باشد.

ما 3 رنگ مارک را برای انتخاب ارائه می دهیم که می توانند به طور مستقل برای تم های روشن و تاریک تنظیم شوند:

• موضوع روشن: placesColorAttributionLight با فهرست‌های سفید، خاکستری و سیاه.
• طرح زمینه تیره: placesColorAttributionDark تاریک با فهرست‌های سفید، خاکستری و سیاه.

نمونه های سفارشی سازی

توجه: اگر سفارشی سازی بصری را مشخص نکنید، مقدار پیش فرض را حفظ می کند.

این نمونه محتوای استاندارد را سفارشی می کند.

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

این نمونه گزینه های محتوا را سفارشی می کند.

  val placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
    orientation,
    listOf(
        Content.ADDRESS,
        Content.ACCESSIBLE_ENTRANCE,Content.MEDIA
    ),
    R.style.CustomizedPlaceDetailsTheme
)
  

این نمونه تمام گزینه های Content را سفارشی می کند.

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