포커스 순회 순서 변경
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
기본 포커스 순회 순서 섹션에서 Compose가 어떻게 작동하는지 설명함
자동으로 요소에 포커스 순회 동작을 추가하며
1차원 (tab
키) 및 2차원 (화살표 키) 탐색 일부
이 기본 동작을 재정의하고
정보를 제공합니다.
1차원 순회 순서 재정의
1차원 탐색을 위한 기본 포커스 순회 순서를 변경하려면
포커스 가능한 컴포저블마다 하나씩 참조 집합을 만듭니다.
val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
그런 다음 focusRequester
수정자를 사용하여 각각을
구성 가능한 함수:
Column {
Row {
TextButton({}, Modifier.focusRequester(first)) { Text("First field") }
TextButton({}, Modifier.focusRequester(third)) { Text("Third field") }
}
Row {
TextButton({}, Modifier.focusRequester(second)) { Text("Second field") }
TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") }
}
}
이제 focusProperties
수정자를 사용하여 맞춤 순회 순서를 지정할 수 있습니다.
Column {
Row {
TextButton(
{},
Modifier
.focusRequester(first)
.focusProperties { next = second }
) {
Text("First field")
}
TextButton(
{},
Modifier
.focusRequester(third)
.focusProperties { next = fourth }
) {
Text("Third field")
}
}
Row {
TextButton(
{},
Modifier
.focusRequester(second)
.focusProperties { next = third }
) {
Text("Second field")
}
TextButton(
{},
Modifier
.focusRequester(fourth)
.focusProperties { next = first }
) {
Text("Fourth field")
}
}
}
2차원 순회 순서 재정의
포커스 순회 순서를 세밀하게 제어할 수도 있습니다.
을 사용하도록 설정합니다. 각 요소에 대해 다음 작업을 수행할 수 있습니다.
를 추가하여 각 경로의 기본 탐색 대상을 재정의합니다.
focusProperties
수정자를 재정의하고 표시될 항목을 지정합니다.
아래쪽 또는 다른 방향입니다.
TextButton(
onClick = {},
modifier = Modifier
.focusRequester(fourth)
.focusProperties {
down = third
right = second
}
) {}
이 기법은 키보드 화살표를 효과적으로 사용할 뿐 아니라
유선 및 무선 컨트롤러의 D패드 및 스틱.
추천 서비스
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-23(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-23(UTC)"],[],[],null,["# Change focus traversal order\n\nThe [Default focus traversal order](/develop/ui/compose/touch-input/focus) section described how Compose\nautomatically adds focus traversal behavior to your elements, for both\none-dimensional (`tab` key) and two-dimensional (arrow keys) navigation. In some\ncases, you might need to override this default behavior and be more explicit\nabout the required traversal order.\n\nOverride one-dimensional traversal order\n----------------------------------------\n\nTo change the default focus traversal order for one-dimensional navigation, you\ncreate a set of references, one for each focusable composable:\n\n\n```kotlin\nval (first, second, third, fourth) = remember { FocusRequester.createRefs() }https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L119-L119\n```\n\n\u003cbr /\u003e\n\nThen, use the [`focusRequester`](/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).focusRequester(androidx.compose.ui.focus.FocusRequester)) modifier to associate each of them with a\ncomposable:\n\n\n```kotlin\nColumn {\n Row {\n TextButton({}, Modifier.focusRequester(first)) { Text(\"First field\") }\n TextButton({}, Modifier.focusRequester(third)) { Text(\"Third field\") }\n }\n\n Row {\n TextButton({}, Modifier.focusRequester(second)) { Text(\"Second field\") }\n TextButton({}, Modifier.focusRequester(fourth)) { Text(\"Fourth field\") }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L122-L132\n```\n\n\u003cbr /\u003e\n\nYou can now use the [`focusProperties`](/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).focusProperties(kotlin.Function1)) modifier to specify a custom traversal order:\n\n\n```kotlin\nColumn {\n Row {\n TextButton(\n {},\n Modifier\n .focusRequester(first)\n .focusProperties { next = second }\n ) {\n Text(\"First field\")\n }\n TextButton(\n {},\n Modifier\n .focusRequester(third)\n .focusProperties { next = fourth }\n ) {\n Text(\"Third field\")\n }\n }\n\n Row {\n TextButton(\n {},\n Modifier\n .focusRequester(second)\n .focusProperties { next = third }\n ) {\n Text(\"Second field\")\n }\n TextButton(\n {},\n Modifier\n .focusRequester(fourth)\n .focusProperties { next = first }\n ) {\n Text(\"Fourth field\")\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L136-L174\n```\n\n\u003cbr /\u003e\n\nOverride two-dimensional traversal order\n----------------------------------------\n\nIt is also possible to add fine-grained control over the focus traversal order\nfor two-dimensional navigation with the arrow keys. For each element, you can\noverride the default navigation destination for each of the directions by adding\nthe [`focusProperties`](/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).focusProperties(kotlin.Function1)) modifier and specifying the item that would come up,\ndown, or any other direction:\n\n\n```kotlin\nTextButton(\n onClick = {},\n modifier = Modifier\n .focusRequester(fourth)\n .focusProperties {\n down = third\n right = second\n }\n) {}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L185-L193\n```\n\n\u003cbr /\u003e\n\nThis technique not only effectively uses keyboard arrows, but would work with\nD-Pads and sticks on wired and wireless controllers.\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Change focus behavior](/develop/ui/compose/touch-input/focus/change-focus-behavior)\n- [Focus in Compose](/develop/ui/compose/touch-input/focus)"]]