Компонент Advanced Place Details
Версия Advanced компонента "информация о местах" предлагает те же функции, что и Places Details Essentials. Вы также можете настроить командные кнопки компонента и применить параметры поиска и фильтрации к показываемым отзывам и медиаконтенту.
Встроенная поддержка Jetpack Compose
Places UI Kit предоставляет функции Jetpack Compose @Composable для AdvancedPlaceDetailsCompact. Эти компоненты используют поднятое состояние, встроенную поддержку модификаторов и собственные DSL-слоты Compose.
В приведенном ниже примере кода показано, как использовать composable-функцию для вертикальной разметки.
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 ) } } }
Расширенная конфигурация Place Details
Чтобы получить доступ к продвинутым функциям, используйте AdvancedPlaceDetailsFragment или AdvancedPlaceDetailsCompactFragment.
Настроить командные кнопки
Используйте интерфейс PlaceActionProvider AdvancedPlaceDetailsFragment или AdvancedPlaceDetailsCompactFragment, чтобы задать и настроить кнопки действий.
Если вы используете функции @composable, настройте командные кнопки с помощью лямбда-выражений mainActions и cornerActions.
Требования к визуальному указанию авторства
Важно! Вы должны четко сообщать конечным пользователям, когда командная кнопка с настраиваемым действием будет передавать информацию о них третьим лицам, не связанным с Google. Подробнее о требованиях по указанию авторства.
На примере справа показано, как с помощью специального изображения можно сообщить пользователю, что его данные будут отправлены в Altostrat.
Как использовать поиск и фильтры
Используйте классы SearchMediaOptions и SearchReviewsOptions для объектов AdvancedPlaceDetailsFragment или AdvancedPlaceDetailsCompactFragment, чтобы включить поиск и фильтрацию медиаконтента или отзывов.
Если вы используете функции @composable, то можете включить поиск и фильтрацию медиаконтента или отзывов с помощью com.google.android.libraries.places.compose.search.SearchMediaOptions.
Как создавать собственные рекламные места
С помощью специальных блоков контента вы можете добавлять собственный контент (например, сгенерированные ИИ краткие пересказы, временные метки маршрута или специальные значки) непосредственно в заданные зоны макета.
Требования по указанию авторства и рекомендации по контенту для слотов контента
Когда монтируется рекламное место для собственного контента, сообщение автоматически обновляется, чтобы уточнить, какой контент предоставлен Google, а какой – третьими лицами.
Значки должны:
Поддерживайте четкую визуальную иерархию между информацией о местах Google и собственным контентом, чтобы у пользователей не возникало сомнений в источнике информации.
Значки должны:
Предоставляйте пользователям ценную информацию, которая поможет им достичь своих целей. Например, данные о доступности номеров в реальном времени или о сроках бронирования помогут пользователям быстрее принимать взвешенные решения.
Чего не следует делать
Не дублируйте существующую информацию о местах в Google, например оценки, отзывы или часы работы, даже если вы скрыли контент, предоставленный Google. Это может ввести пользователей в заблуждение относительно источника контента и того, принадлежит ли он Google или стороннему сервису.
Чего не следует делать
Не показывайте утверждения или значки без указания источника (например, "Лучшая рекомендация!"), которые можно принять за официальные рекомендации Google. В пользовательском контенте должен быть явно указан источник.
Чего не следует делать
Не добавляйте в контейнеры рекламу, маркетинговые тексты, скидки и предложения оформить подписку.
Чтобы добавить собственный контент, используйте composable-функцию AdvancedPlaceDetailsCompact. Используйте basicSectionTop или basicSectionBottom, чтобы указать позицию контента.
Примеры использования расширенного запроса данных о месте
Как настроить командные кнопки
Используйте интерфейс PlaceActionProvider, чтобы указать, какие действия доступны для каждого места.
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 } }) } }
Добавление собственных и стандартных действий
В этом примере добавляется переключатель, позволяющий пользователю добавить место в избранное или удалить его оттуда.
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() }
Используйте стандартные кнопки
Создавать командные кнопки, выполняющие стандартные действия, определенные Google.
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 }
Фильтровать отзывы и медиаконтент
В этом примере кода показаны только медиафайлы и отзывы, в которых упоминаются слова "спагетти" и "вкусный".
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)
Как создавать слоты контента
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." ) } } }