이전 스니펫에서는 라이브러리에서 제공하는 Indicator를 사용했습니다. 이 스니펫은 MyCustomIndicator라는 맞춤 표시기 컴포저블을 만듭니다. 이 컴포저블에서 pullToRefreshIndicator 수정자는 위치 지정과 새로고침 트리거를 처리합니다.
이전 스니펫과 마찬가지로 이 예에서는 PullToRefreshState 인스턴스를 추출하므로 PullToRefreshBox과 pullToRefreshModifier 모두에 동일한 인스턴스를 전달할 수 있습니다.
이 예시에서는 PullToRefreshDefaults 클래스의 컨테이너 색상과 위치 임계값을 사용합니다. 이렇게 하면 Material 라이브러리의 기본 동작과 스타일을 재사용하면서 관심 있는 요소만 맞춤설정할 수 있습니다.
MyCustomIndicator는 Crossfade를 사용하여 클라우드 아이콘과 CircularProgressIndicator 간에 전환합니다. 사용자가 당기면 클라우드 아이콘이 확대되고 새로고침 작업이 시작되면 CircularProgressIndicator로 전환됩니다.
targetState는 isRefreshing를 사용하여 표시할 상태 (클라우드 아이콘 또는 원형 진행 상태 표시기)를 결정합니다.
animationSpec는 전환을 위한 tween 애니메이션을 정의하며, 지정된 재생 시간은 CROSSFADE_DURATION_MILLIS입니다.
state.distanceFraction는 사용자가 아래로 당긴 거리를 나타내며, 0f (당기지 않음)에서 1f (완전히 당김)까지의 범위를 갖습니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-27(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-27(UTC)"],[],[],null,["The pull to refresh component allows users to drag downwards at the beginning of\nan app's content to refresh the data.\n| **Note:** [`PullToRefreshBox()`](/reference/kotlin/androidx/compose/material3/pulltorefresh/package-summary#PullToRefreshBox(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.pulltorefresh.PullToRefreshState,androidx.compose.ui.Alignment,kotlin.Function1,kotlin.Function1)) is experimental.\n\nAPI surface\n\nUse the [`PullToRefreshBox`](/reference/kotlin/androidx/compose/material3/pulltorefresh/package-summary#PullToRefreshBox(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.pulltorefresh.PullToRefreshState,androidx.compose.ui.Alignment,kotlin.Function1,kotlin.Function1)) composable to implement pull-to-refresh, which\nacts as a container for your scrollable content. The following key parameters\ncontrol the refresh behavior and appearance:\n\n- `isRefreshing`: A boolean value indicating whether the refresh action is in progress.\n- `onRefresh`: A lambda function that executes when the user initiates a refresh.\n- `indicator`: Customizes the indicator that the system draws on pull-to-refresh.\n\nBasic example\n\nThis snippet demonstrates basic usage of `PullToRefreshBox`:\n\n\n```kotlin\n@Composable\nfun PullToRefreshBasicSample(\n items: List\u003cString\u003e,\n isRefreshing: Boolean,\n onRefresh: () -\u003e Unit,\n modifier: Modifier = Modifier\n) {\n PullToRefreshBox(\n isRefreshing = isRefreshing,\n onRefresh = onRefresh,\n modifier = modifier\n ) {\n LazyColumn(Modifier.fillMaxSize()) {\n items(items) {\n ListItem({ Text(text = it) })\n }\n }\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/PullToRefreshBox.kt#L92-L110\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- `PullToRefreshBox` wraps a [`LazyColumn`](/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Function1)), which displays a list of strings.\n- `PullToRefreshBox` requires `isRefreshing` and `onRefresh` parameters.\n- The content within the `PullToRefreshBox` block represents the scrollable content.\n\nResult\n\nThis video demonstrates the basic pull-to-refresh implementation from\nthe preceding code:\n**Figure 1**. A basic pull-to-refresh implementation on a list of items.\n\nAdvanced example: Customize indicator color\n\n\n```kotlin\n@Composable\nfun PullToRefreshCustomStyleSample(\n items: List\u003cString\u003e,\n isRefreshing: Boolean,\n onRefresh: () -\u003e Unit,\n modifier: Modifier = Modifier\n) {\n val state = rememberPullToRefreshState()\n\n PullToRefreshBox(\n isRefreshing = isRefreshing,\n onRefresh = onRefresh,\n modifier = modifier,\n state = state,\n indicator = {\n Indicator(\n modifier = Modifier.align(Alignment.TopCenter),\n isRefreshing = isRefreshing,\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n color = MaterialTheme.colorScheme.onPrimaryContainer,\n state = state\n )\n },\n ) {\n LazyColumn(Modifier.fillMaxSize()) {\n items(items) {\n ListItem({ Text(text = it) })\n }\n }\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/PullToRefreshBox.kt#L115-L145\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The indicator color is customized through the `containerColor` and `color` properties in the `indicator` parameter.\n- [`rememberPullToRefreshState()`](/reference/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshState) manages the state of the refresh action. You use this state in conjunction with the `indicator` parameter.\n\n| **Note:** In the basic example, `state` was not passed to `PullToRefreshBox` because it was using the default parameter value. However, in this example, you need to define the state, and pass that state to both the box and indicator to coordinate their behavior.\n\nResult\n\nThis video shows a pull-to-refresh implementation with a colored\nindicator:\n**Figure 2**. A pull-to-refresh implementation with a custom style.\n\nAdvanced example: Create a fully customized indicator\n\nYou can create complex custom indicators by leveraging existing composables and\nanimations.This snippet demonstrates how to create a fully custom indicator in\nyour pull-to-refresh implementation:\n\n\n```kotlin\n@Composable\nfun PullToRefreshCustomIndicatorSample(\n items: List\u003cString\u003e,\n isRefreshing: Boolean,\n onRefresh: () -\u003e Unit,\n modifier: Modifier = Modifier\n) {\n val state = rememberPullToRefreshState()\n\n PullToRefreshBox(\n isRefreshing = isRefreshing,\n onRefresh = onRefresh,\n modifier = modifier,\n state = state,\n indicator = {\n MyCustomIndicator(\n state = state,\n isRefreshing = isRefreshing,\n modifier = Modifier.align(Alignment.TopCenter)\n )\n }\n ) {\n LazyColumn(Modifier.fillMaxSize()) {\n items(items) {\n ListItem({ Text(text = it) })\n }\n }\n }\n}\n\n// ...\n@Composable\nfun MyCustomIndicator(\n state: PullToRefreshState,\n isRefreshing: Boolean,\n modifier: Modifier = Modifier,\n) {\n Box(\n modifier = modifier.pullToRefreshIndicator(\n state = state,\n isRefreshing = isRefreshing,\n containerColor = PullToRefreshDefaults.containerColor,\n threshold = PositionalThreshold\n ),\n contentAlignment = Alignment.Center\n ) {\n Crossfade(\n targetState = isRefreshing,\n animationSpec = tween(durationMillis = CROSSFADE_DURATION_MILLIS),\n modifier = Modifier.align(Alignment.Center)\n ) { refreshing -\u003e\n if (refreshing) {\n CircularProgressIndicator(Modifier.size(SPINNER_SIZE))\n } else {\n val distanceFraction = { state.distanceFraction.coerceIn(0f, 1f) }\n Icon(\n imageVector = Icons.Filled.CloudDownload,\n contentDescription = \"Refresh\",\n modifier = Modifier\n .size(18.dp)\n .graphicsLayer {\n val progress = distanceFraction()\n this.alpha = progress\n this.scaleX = progress\n this.scaleY = progress\n }\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/PullToRefreshBox.kt#L150-L222\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The previous snippet used the `Indicator` provided by the library. This snippet creates a custom indicator composable called `MyCustomIndicator`. In this composable, the `pullToRefreshIndicator` modifier handles positioning and triggering a refresh.\n- As in the previous snippet, the example extracts the `PullToRefreshState` instance, so you can pass the same instance to both the `PullToRefreshBox` and the `pullToRefreshModifier`.\n- The example uses the container color and the position threshold from the `PullToRefreshDefaults` class. This way, you can reuse the default behavior and styling from the Material library, while customizing only the elements you're interested in.\n- `MyCustomIndicator` uses [`Crossfade`](/reference/kotlin/androidx/compose/animation/package-summary#Crossfade(kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.String,kotlin.Function1)) to transition between a cloud icon and a `CircularProgressIndicator`. The cloud icon scales up as the user pulls, and transitions to a `CircularProgressIndicator` when the refresh action begins.\n - `targetState` uses `isRefreshing` to determine which state to display (the cloud icon or the circular progress indicator).\n - `animationSpec` defines a `tween` animation for the transition, with a specified duration of `CROSSFADE_DURATION_MILLIS`.\n - `state.distanceFraction` represents how far the user has pulled down, ranging from `0f` (no pull) to `1f` (fully pulled).\n - The `graphicsLayer` modifier modifies scale and transparency.\n\nResult\n\nThis video shows the custom indicator from the preceding code:\n**Figure 3**. A pull-to-refresh implementation with a custom indicator.\n\nAdditional resources\n\n- [`PullToRefreshState`](/reference/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshState)"]]