Gelişmiş Yer Ayrıntıları bileşeni

Yer Ayrıntıları bileşeninin Gelişmiş sürümü, Places Details Essentials ile aynı özellikleri sunar. Ayrıca, bileşenin işlem düğmelerini yapılandırmanıza ve gösterilen yorumlara ve medyaya arama ve filtreleme seçenekleri uygulamanıza da olanak tanır.

Yerleşik Jetpack Compose desteği

Places UI Kit, AdvancedPlaceDetailsCompact için Jetpack Compose @Composable işlevleri sağlar. Bu composable'lar, yükseltilmiş durum, yerleşik değiştirici desteği ve Compose'a özgü alan DSL'leri kullanır.

Aşağıdaki kod örneğinde, dikey düzen için composable işlevinin nasıl kullanılacağı gösterilmektedir.

Kotlin

import android.util.Log
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.dp
import com.google.android.libraries.places.api.model.Place
import com.google.android.libraries.places.compose.AdvancedPlaceDetailsCompact
import com.google.android.libraries.places.compose.PlaceReference
import com.google.android.libraries.places.compose.action.CornerAction
import com.google.android.libraries.places.compose.action.MainAction
import com.google.android.libraries.places.compose.Orientation

@Composable
fun SampleAdvancedPlaceDetailsCompactCard(
    placeId: String,
    bookmarkIcon: Painter,
    onSavePlaceClicked: (Place) -> Unit
) {
    AdvancedPlaceDetailsCompact(
        // defines the place to be displayed
        reference = PlaceReference.PlaceId(placeId),
        // defines the orientation
        orientation = Orientation.VERTICAL,
        // defines custom styling
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        preferTruncation = true,
        enableLightbox = true,
        mainActions = { place ->
            listOf(
                MainAction.OpenDirections(),
                MainAction.OpenWebsite(),
                MainAction.Call()
            )
        },
        // action button configuration
        cornerActions = { place ->
            listOf(
                CornerAction.Custom(
                    icon = bookmarkIcon,
                    text = "Save Place",
                    onClick = { onSavePlaceClicked(place) }
                )
            )
        },
        onPlaceLoaded = { place ->
            Log.d("Places", "Successfully loaded place: ${place.id}")
        },
        onPlaceLoadFailed = { exception ->
            Log.e("Places", "Failed to load place", exception)
        }
    ) {
        // --- Slot: Injected directly above the place name ---
        basicSectionTop {
            Text(
                text = "Featured in 'Top 10 Coffee Shops in SF'",
                style = MaterialTheme.typography.labelSmall,
                color = MaterialTheme.colorScheme.secondary,
                modifier = Modifier.padding(top = 4.dp, bottom = 2.dp)
            )
        }

        // --- Slot: Injected directly below the action buttons ---
        basicSectionBottom {
            Text(
                text = "Notes: Great quiet atmosphere for meetings.",
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

Gelişmiş Yer Ayrıntıları yapılandırması

İleri seviye özelliklere erişmek için AdvancedPlaceDetailsFragment veya AdvancedPlaceDetailsCompactFragment kullanın.

İşlem düğmelerini yapılandırma

İşlem düğmelerini tanımlamak ve özelleştirmek için AdvancedPlaceDetailsFragment veya AdvancedPlaceDetailsCompactFragment'nin PlaceActionProvider arayüzünü kullanın.

@composable işlevlerini kullanıyorsanız işlem düğmelerini yapılandırmak için mainActions ve cornerActions lambda'larını kullanın.

Görsel ilişkilendirme koşulları

Özelleştirilmiş düğmelerle yer ayrıntıları kompakt görünümü
Özelleştirilmiş düğme içeren Gelişmiş Yer Ayrıntıları kompakt görünümü

Önemli: Özel işlem düğmesinin, kullanıcı bilgilerini Google dışında bir üçüncü tarafla ne zaman paylaşacağını son kullanıcılara açıkça belirtmeniz gerekir. Görsel ilişkilendirme koşullarını inceleyin.

Sağdaki örnekte, kullanıcı bilgilerinin "Altostrat"a gönderileceğini açıkça belirten özel bir resim gösterilmektedir.

Arama ve filtreleme seçeneklerini uygulama

Medya veya yorumlar için arama ve filtrelemeyi etkinleştirmek üzere AdvancedPlaceDetailsFragment veya AdvancedPlaceDetailsCompactFragment öğesinin SearchMediaOptions ve SearchReviewsOptions sınıflarını kullanın.

@composable işlevlerini kullanıyorsanız medya veya yorumlarda arama ve filtrelemeyi etkinleştirmek için com.google.android.libraries.places.compose.search.SearchMediaOptions simgesini kullanın.

Özel içerik alanları oluşturma

Özel içerik alanı yerleşim seçenekleri

Özel içerik alanları, kendi içeriğinizi (ör. yapay zeka tarafından oluşturulan özetler, seyahat planı zaman damgaları veya özel rozetler) doğrudan önceden tanımlanmış düzen bölgelerine eklemenize olanak tanır.

İçerik alanları için ilişkilendirme koşulları ve içerik önerileri

Özel içerik alanı yerleştirildiğinde açıklama otomatik olarak güncellenerek hangi içeriğin Google tarafından, hangi içeriğin üçüncü taraflarca sağlandığı netleştirilir.

Yapılması gerekenler

Bilginin kaynağıyla ilgili belirsizlikleri önlemek için Google yer ayrıntıları ile özel içerik arasında net bir görsel hiyerarşi sağlayın.

Bilgi kaynağıyla ilgili belirsizliği önleme

Yapılması gerekenler

Kullanıcılarınızın anlık hedeflerine göre uyarlanmış, yerelleştirilmiş ve yüksek değerli analizler sunun. Gerçek zamanlı rezervasyon aralıkları veya mevcut müsaitlik durumu gibi uyarlanmış içerikler, kullanıcıların daha hızlı ve bilinçli kararlar almasına yardımcı olur.

Yüksek değerli analizler sunma

Yapılmaması gerekenler

Google tarafından sağlanan içeriği gizlemiş olsanız bile puanlar, yorumlar veya çalışma saatleri gibi mevcut Google yer ayrıntılarını kopyalamayın. Bu durum, kullanıcıların içeriğin kaynağı ve Google'dan mı yoksa üçüncü bir taraftan mı geldiği konusunda kafasını karıştırabilir.

Mevcut Google yer ayrıntılarını kopyalamayın.

Yapılmaması gerekenler

Resmi Google onaylarıyla karıştırılabilecek, ilişkilendirilmemiş iddialar veya rozetler (ör. "En iyi öneri!") göstermeyin. Özel içeriklerin kaynağı açıkça belirtilmelidir.

Atıfta bulunulmayan iddialar veya rozetler göstermeyin.

Yapılmaması gerekenler

Özel yer kapsayıcılarına reklam, pazarlama metni, promosyon indirimleri veya abonelik istemleri eklemeyin.

Reklam, pazarlama metni, promosyon indirimi veya abonelik istemi eklemeyin.

Özel içerik eklemek için AdvancedPlaceDetailsCompact composable'ını kullanın. İçeriğin konumunu belirtmek için basicSectionTop veya basicSectionBottom kullanın.

Gelişmiş Yer Ayrıntıları örnekleri

İşlem düğmelerini özelleştirme

Her yer için hangi işlemlerin kullanılabileceğini kontrol etmek üzere PlaceActionProvider arayüzünü kullanın.

Kotlin

class PlaceDetailsWidgetTestActivity : BaseActivity() {

// simplified example of starting the fragment
fun setupPPDFragment() {
   fullWidgetSelectedContent = AdvancedPlaceDetailsFragment.ALL_CONTENT.toMutableList()
   AdvancedPlaceDetailsFragment.newInstance(fullWidgetSelectedContent, Orientation.VERTICAL)
   supportFragmentManager
      .beginTransaction()
      .replace(R.id.fragment_container, fragment!!)
      .commitNow()
}

// you can set the callback elsewhere, but this is the ideal callback spot
override fun onAttachFragment(fragment: Fragment) {
    super.onAttachFragment(fragment)
    when (fragment) {
      is PlaceActionController -> setPlaceActionProvider(fragment)
    }
}

// have this callback return an empty list to hide all buttons
// if this callback isn't set, default buttons appear
 private fun setPlaceActionProvider(fragment: PlaceActionController) {
    fragment.setPlaceActionProvider(
        object : PlaceActionProvider {
        override fun getMainPlaceActions(place: Place): List<PlaceAction> = buildList {
            // predefined actions can be mixed in with custom ones
            add(PlaceAction.OPEN_IN_MAPS)

            // example of button with both text label and icon
            add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.custom_action)
                .setIconResId(R.drawable.gs_custom_action_icon)
                .setContentDescriptionResId(R.string.custom_action_description)
                .setOnClickListener { /* todo perform action */ }
                .build()
            )

            // icon only button
            add(
              PlaceAction.builder()
                .setIconResId(R.drawable.custom_action_icon_2)
                .setContentDescriptionResId(R.string.custom_action_description_2)
                .setOnClickListener { /* todo perform action */}
                .build()
            )

            // text label only button
            add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.custom_action_3)
                .setContentDescriptionResId(R.string.custom_action_description_2)
                .setOnClickListener {/* todo perform action */ }
                .build()
            )
          }

         /**
         You can also specify whether corner buttons should appear.  
         For either callback, returning an empty list results in no buttons appearing
         */
         override fun getCornerPlaceActions(place: Place): List<PlaceAction> {
           return emptyList()
         }

        override fun addPlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          // in this example, just one listener and widget
          this@HostAppActivity.listener = listener
        }

        override fun removePlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          // if there are multiple listeners, remove only the provided listener
          this@HostAppActivity.listener = null
        }
      })
  }
}

Özel ve önceden tanımlanmış işlemler ekleme

Bu örnekte, kullanıcının bir yeri favorilerine eklemesi veya favorilerinden çıkarması için bir açma/kapatma düğmesi ekleniyor.

Kotlin

private var listener: PlaceActionProvider.OnChangedListener? = null

private fun setPlaceActionProvider(fragment: PlaceActionController) {
    fragment.setPlaceActionProvider(
      object : PlaceActionProvider {
        private var placeFavorited = false

        override fun getMainPlaceActions(place: Place): List<PlaceAction> {
          val buttonList = mutableListOf<PlaceAction>()

          if (placeFavorited) {
            buttonList.add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.place_details_button_config_favorite)
                .setIconResId(R.drawable.gs_web_vd_theme_24)
                .setOnClickListener {
                  placeFavorited = !placeFavorited
                  refreshButtonConfigs()
                }
                .build()
            )
          } else {
            buttonList.add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.place_details_button_config_unfavorite)
                .setIconResId(R.drawable.gs_web_vd_theme_24)
                .setOnClickListener {
                  placeFavorited = !placeFavorited
                  refreshButtonConfigs()
                }
                .build()
            )
          }

          return buttonList
        }

        override fun addPlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          this@PlaceDetailsWidgetTestActivity.listener = listener
        }

        override fun removePlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          // if there are multiple listeners, remove only the provided listener
          this@PlaceDetailsWidgetTestActivity.listener = null
        }
      }
    )
  }

private fun refreshButtonConfigs() {
    listener?.onPlaceActionsChanged()
}

Önceden tanımlanmış standart düğmeleri kullanma

Standart Google tanımlı işlemleri gerçekleştiren işlem düğmeleri oluşturun.

Kotlin

  override fun getMainPlaceActions(place: Place): List<PlaceAction> {
    val buttonList = mutableListOf<PlaceAction>()
// these buttons will have different background and text color than user-created buttons.  
    // Text and icon button
    buttonList.add(PlaceAction.OPEN_IN_MAPS)
    // Icon-only buttons not enabled for main action buttons
    // Use of kotlin extension to do the same.  see
    PlaceAction.OPEN_IN_MAPS {
       setIconResId(0)
     }

    return buttonList
  }

Yorumları ve medyayı filtreleme

Bu kod örneğinde yalnızca "spagetti" ve "lezzetli" kelimelerinin geçtiği medya ve yorumlar gösterilmektedir.

Kotlin

    import com.google.android.libraries.places.widget.AdvancedPlaceDetailsFragment
    import com.google.android.libraries.places.widget.model.SearchMediaOptions
    import com.google.android.libraries.places.widget.model.SearchReviewsOptions
    import com.google.android.libraries.places.widget.model.Orientation
    import com.google.android.libraries.places.R
  
     // 1. Create options using the Java builders (called from Kotlin)
    val mediaOptions = SearchMediaOptions.builder()
        .setQuery("spaghetti")
        .setRankPreference(SearchMediaOptions.RankPreference.MOST_RELEVANT)
        .build()

    val reviewOptions = SearchReviewsOptions.builder()
        .setQuery("tasty")
        .setRankPreference(SearchReviewsOptions.RankPreference.NEWEST)
        .build()

    // 2. Create the fragment
    val fragment = AdvancedPlaceDetailsFragment.newInstance(
        AdvancedPlaceDetailsFragment.STANDARD_CONTENT,
        Orientation.VERTICAL,
        R.style.PlacesMaterialTheme
    )

    // 3. Apply options to the fragment
    fragment.applySearchMediaOptions(mediaOptions)
    fragment.applySearchReviewsOptions(reviewOptions)

İçerik alanları oluşturma

Kotlin

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import com.google.android.libraries.places.compose.AdvancedPlaceDetailsCompact
import com.google.android.libraries.places.compose.PlaceReference

@Composable
fun ItineraryPlaceCard(placeId: String) {
    AdvancedPlaceDetailsCompact(
        reference = PlaceReference.PlaceId(placeId)
    ) {
        // Slot: Injected directly above the place name
        basicSectionTop {
            Text(
                text = "Day 2 • 2:30 PM",
                style = MaterialTheme.typography.labelSmall,
                color = MaterialTheme.colorScheme.primary
            )
        }
        
        // Slot: Injected directly below the main action buttons
        basicSectionBottom {
            NotesCard(
                notes = "Great quiet atmosphere for morning meetings. Famous for house-roasted pour-overs."
            )
        }
    }
}