포커스 순회 순서

사용자는 Tab 키 또는 방향 (화살표 / D패드) 키를 사용하여 UI 요소 간에 키보드 포커스를 이동할 수 있습니다.

  • Tab / Shift+Tab: 1차원 모양 순서에서 포커스를 앞이나 뒤로 이동합니다.
  • 방향 키: 포커스를 2차원적으로 이동합니다 (위, 아래, 왼쪽, 오른쪽).

일차원 포커스 순회

일차원 포커스 순회에서 Tab 키는 화면의 시각적 모양 순서에 따라 UI를 통해 포커스를 이동합니다.

예를 들어 버튼 4개가 행으로 정렬된 경우:

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}

Tab 키를 누르면 포커스가 다음 순서로 버튼을 순차적으로 이동합니다.

  1. 첫 번째 버튼 (상단 시작)
  2. 두 번째 버튼 (상단)
  3. 세 번째 버튼 (하단 시작)
  4. 네 번째 버튼 (하단)

마지막 요소에서 Tab을 누르면 첫 번째 포커스 타겟으로 다시 돌아갑니다. Shift+Tab을 누르면 포커스가 역순으로 이동합니다.

2차원 포커스 순회

키보드 화살표 키를 누르거나 D패드를 사용하면 2차원 포커스 순회가 트리거됩니다.

2차원 순회에서 시스템은 UI 요소의 기하학적 좌표와 공간 경계를 검사하여 요청된 방향에서 가장 가까운 타겟을 결정합니다.

2차원 포커스 순회는 래핑되지 않습니다. 사용자가 최하단 요소에 포커스가 있는 상태에서 아래쪽 키를 누르면 포커스가 화면 상단으로 이동하지 않고 해당 요소에 유지됩니다.

포인터 클릭으로 포커스 이동 재설정

데스크톱 또는 대형 화면 기기에서 실제 키보드와 마우스 또는 터치패드 간에 전환할 때:

  • 탭 또는 클릭 시 포커스 지우기: 마우스나 트랙패드로 상호작용하지 않는 공간을 클릭하거나 탭하면 활성 요소에서 포커스가 해제됩니다.
  • 순회 다시 시작: 포커스가 지워진 후 다음 Tab 키를 누르면 이전에 활성 상태였던 요소에서 다시 시작하는 대신 시각적 모양 순서의 첫 번째 포커스 타겟에서 1차원 순회가 다시 시작됩니다. 2차원 포커스 순회와 동일합니다. 방향 키는 요청된 방향에서 가장 가까운 포커스 타겟으로 키보드 포커스를 이동합니다.

프로그래매틱 방식으로 포커스를 삭제하는 방법에 관한 자세한 내용은 포커스 이동 및 삭제를 참고하세요.

포커스 순회 순서 맞춤설정

focusProperties 수정자를 사용하여 탐색 동작을 맞춤설정할 수 있습니다.

1차원 순회 순서 맞춤설정

1차원 순회를 재정의하려면 FocusRequester로 next 또는 previous 속성을 지정합니다.

  1. remember { FocusRequester() }을 사용하여 FocusRequester 객체를 만듭니다.
  2. focusRequester 수정자를 사용하여 타겟 컴포저블에 FocusRequester를 연결합니다.
  3. 소스 컴포저블에 focusProperties 수정자를 적용하고 FocusRequester을 next (Tab의 경우) 또는 previous (Shift+Tab의 경우)에 할당합니다.

val (first, second, third) = remember { FocusRequester.createRefs() }

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}

2차원 순회 순서 맞춤설정

마찬가지로 FocusRequester 인스턴스를 focusProperties 내의 up, down, start, end, left 또는 right에 할당하여 2차원 포커스 이동을 재정의할 수 있습니다.

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}

특정 방향(예: 레이아웃 경계)에서 포커스 탐색을 차단하려면 해당 속성(예: down = FocusRequester.Cancel)에 FocusRequester.Cancel를 할당합니다. 특정 방향에 시스템의 기본 순회 알고리즘을 명시적으로 유지하려면 FocusRequester.Default를 할당합니다.

이전
포커스 타겟
다음
텍스트 필드에 포커스