Отслеживание видимости в Compose

Отслеживание видимости элемента пользовательского интерфейса на экране полезно для различных целей, таких как сбор аналитических данных, управление состоянием пользовательского интерфейса и оптимизация ресурсов путем автоматического воспроизведения или приостановки видеоконтента. Compose предлагает несколько модификаторов для отслеживания видимости элемента пользовательского интерфейса, например:

  • onVisibilityChanged — этот модификатор уведомляет об изменении видимости компонуемого объекта. Он идеально подходит для запуска действия или побочного эффекта каждый раз, когда компонуемый объект становится видимым.
  • onLayoutRectChanged — этот модификатор предоставляет информацию о границах компонуемого элемента относительно корня, окна и экрана. Он обеспечивает низкоуровневое управление и является базовым API для onVisibilityChanged . Модификатор аналогичен onGloballyPositioned , но обеспечивает лучшую производительность и большую гибкость.

Вы можете использовать эти API с любым компонуемым объектом как часть цепочки модификаторов.

Отслеживайте изменения видимости с помощью onVisibilityChanged

Понимание того, когда элемент виден или частично виден пользователю, может помочь вам отслеживать аналитику (например, количество просмотров), оптимизировать производительность (извлекая или предварительно извлекая данные из сети только тогда, когда элемент виден) или даже инициируя события (воспроизведение или приостановка видео).

Чтобы получать уведомления об изменении видимости элемента, используйте модификатор onVisibilityChanged , как показано в следующем примере: 

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)
VisibilitySnippets.kt

Модификатор onVisibilityChanged возвращает логическое значение, отражающее текущее состояние видимости компонуемого объекта. Кроме того, он предлагает такие параметры, как minFraction и minDurationMs , которые позволяют более точно управлять моментом срабатывания обратного вызова видимости.

Как и для любого другого модификатора, последовательность важна для модификатора onVisibilityChanged . В предыдущем примере показана компонуемая функция, которая визуализирует текст с отступом. Чтобы модификатор действовал на весь компонуемый элемент вместе с отступом, добавьте модификатор onVisibilityChanged перед модификатором padding .

Установите ограничение по времени для компонуемого объекта перед запуском обратного вызова видимости.

В некоторых ситуациях может потребоваться активировать действие только после того, как элемент был виден пользователю в течение определённого времени. Например, можно автоматически воспроизвести видео, если оно было видно пользователю в течение определённого времени.

Чтобы запустить действие после того, как элемент будет виден в течение определённого периода времени, используйте параметр minDurationMs в модификаторе onVisibilityChanged . Этот параметр определяет минимальное время, в течение которого компонуемый элемент должен быть непрерывно видимым для срабатывания обратного вызова. Если компонуемый элемент перестаёт быть видимым до истечения указанного периода времени, таймер сбрасывается. Значение по умолчанию — 0 миллисекунд .

Следующий фрагмент кода меняет фон на фиолетовый после того, как компонуемый элемент виден пользователю в течение 3 секунд: 

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {

    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}
VisibilitySnippets.kt

Рисунок 1. Фон меняет цвет с розового на сливовый после того, как компоновочный элемент находится на экране непрерывно в течение 3 секунд.

Установите минимальную видимую фракцию

Установка минимальной видимой доли для обратного вызова видимости компонуемого элемента полезна при работе с прокручиваемым содержимым (например, LazyColumn ) для оптимизации извлечения данных для элементов, превышающих размер экрана.

В таких случаях используйте параметр minFractionVisible в модификаторе onVisibilityChanged , чтобы определить долю, которая должна быть на экране, чтобы компонуемый объект был отмечен как видимый. Он поддерживает значения float в диапазоне от 0.0f до 1.0f и по умолчанию равен 1.0f . Значение 1.0f означает, что для срабатывания обратного вызова компонуемый объект должен быть полностью видим на экране. 

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here the visible callback gets triggered when 20% of the composable is visible
                .onVisibilityChanged(
                    minFractionVisible = 0.2f,
                ) { visible ->
                    if (visible) {
                        // Call specific logic here
                        // viewModel.fetchDataFromNetwork()
                    }
                }
                .padding(vertical = 16.dp)
        ) {
            Text(
                text = "Sample Text",
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}
VisibilitySnippets.kt

Рисунок 2. Без установки minFractionVisible . Рисунок 3. Значение minFractionVisible равно 0,2f .

В примере, использованном ранее, боты Androidify предварительно загружаются из сети до того, как компонуемый элемент станет полностью видимым. На рисунке 2 третий бот не загружается, поскольку компонуемый элемент не полностью виден. На рисунке 3 установлено значение minFractionVisible , и третий бот загружается до того, как он станет полностью видимым на экране.

Назад
Поддержка режимов складного дисплея
Далее
Линии выравнивания