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

그림 1. 컴포저블이 화면에 3초 동안 연속으로 표시되면 배경이 분홍색에서 자두색으로 변경됩니다.

최소 표시 비율 설정

스크롤 가능한 콘텐츠 (예: 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

그림 2. minFractionVisible이 설정되지 않은 경우 그림 3. minFractionVisible가 0.2f로 설정됩니다.

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

이전
폴더블 디스플레이 모드 지원
다음
정렬 선