Gelişmiş Yer Ayrıntıları bileşeni
Yer Ayrıntıları bileşeninin Advanced sürümü, Yer Ayrıntıları 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, taşınmış durumu, yerleşik değiştirici desteğini ve Compose'a özgü yuva DSL'lerini 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ı
Gelişmiş özelliklere erişmek için AdvancedPlaceDetailsFragment veya AdvancedPlaceDetailsCompactFragment simgesini 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ı
Ö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 yorumlarda arama ve filtrelemeyi etkinleştirmek için AdvancedPlaceDetailsFragment veya AdvancedPlaceDetailsCompactFragment 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 alanları, kendi içeriğinizi (ör. yapay zekayla üretilmiş ö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 atıf koşulları ve içerik önerileri
Özel içerik alanı yerleştirildiğinde, hangi içeriğin Google tarafından sağlandığını ve bazı içeriklerin üçüncü taraflarca sağlandığını netleştirmek için açıklama otomatik olarak güncellenir.
Yapılması gerekenler
Bilgi kaynağıyla ilgili belirsizlikleri önlemek için Google Yeri ayrıntıları ile özel içerik arasında net bir görsel hiyerarşi oluşturun.
Yapılması gerekenler
Kullanıcılarınızın acil hedeflerine göre uyarlanmış, yerelleştirilmiş ve değerli analizler sunun. Anlık rezervasyon aralıkları veya mevcut müsaitlik durumu gibi uyarlanmış içerikler, kullanıcıların daha hızlı ve bilinçli kararlar vermesine yardımcı olur.
Yapılmamalı
Google tarafından sağlanan içeriği gizlemiş olsanız bile puanlar, yorumlar veya çalışma saatleri gibi mevcut Google Yeri 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.
Yapılmamalı
Resmi Google onayları ile karıştırılabilecek, atıfta bulunulmayan iddialar veya rozetler (ör. "En çok tavsiye edilen!") göstermeyin. Özel içeriklerin kaynağı açıkça belirtilmelidir.
Yapılmamalı
Özel yer kapsayıcılarına reklam, pazarlama metni, tanıtım amaçlı indirim 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 medyaları 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." ) } } }