Compose의 노출 추적

UI 요소가 화면에 표시되는 시점을 추적하는 것은 분석 로깅, UI 상태 관리, 동영상 콘텐츠를 자동으로 재생하거나 일시중지하여 리소스 최적화 등 다양한 사용 사례에 유용합니다. Compose는 다음과 같은 UI 요소 공개 상태 추적을 위한 여러 수정자를 제공합니다.

• onVisibilityChanged - 이 수정자는 컴포저블의 공개 상태가 변경될 때 알림을 보냅니다. 컴포저블이 표시될 때마다 작업 또는 부수 효과를 트리거하는 데 적합합니다.
• onLayoutRectChanged - 이 수정자는 루트, 창, 화면을 기준으로 컴포저블의 경계에 관한 정보를 제공합니다. 하위 수준 제어를 제공하며 onVisibilityChanged의 기본 API입니다. 이 수정자는 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 수정자에서도 시퀀스가 중요합니다. 앞의 예에서는 패딩이 있는 텍스트를 렌더링하는 구성 가능한 함수를 보여줍니다. 수정자가 패딩과 함께 전체 컴포저블에 영향을 미치도록 하려면 padding 수정자 앞에 onVisibilityChanged 수정자를 추가하세요.

표시 콜백을 트리거하기 전에 컴포저블에 시간 제한 설정

경우에 따라 항목이 사용자에게 일정 시간 동안 표시된 후에만 작업을 트리거할 수 있습니다. 예를 들어 동영상이 사용자에게 일정 시간 동안 표시된 경우 자동으로 재생할 수 있습니다.

항목이 정의된 기간 동안 표시된 후 작업을 트리거하려면 onVisibilityChanged 수정자의 minDurationMs 매개변수를 사용하세요. 이 매개변수는 콜백이 트리거되려면 컴포저블이 계속 표시되어야 하는 최소 시간을 지정합니다. 컴포저블이 기간이 충족되기 전에 표시되지 않으면 타이머가 재설정됩니다. 기본값은 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

최소 표시 비율 설정

컴포저블의 공개 상태 콜백에 최소 표시 비율을 설정하는 것은 스크롤 가능한 콘텐츠 (예: LazyColumn)로 작업할 때 화면 크기를 초과하는 항목의 데이터 가져오기를 최적화하는 데 유용합니다.

이러한 경우 onVisibilityChanged 수정자의 minFractionVisible 매개변수를 사용하여 컴포저블이 표시된 것으로 표시되려면 화면에 표시되어야 하는 비율을 정의합니다. 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

앞에서 사용한 예에서는 컴포저블이 완전히 표시되기 전에 네트워크에서 Androidify 봇을 미리 로드합니다. 그림 2에서는 컴포저블이 완전히 표시되지 않으므로 세 번째 봇이 로드되지 않습니다. 그림 3에서는 minFractionVisible이 설정되어 있으며 세 번째 봇이 화면에 완전히 표시되기 전에 로드됩니다.