포커스 복원

사용자가 하드웨어 키보드나 D패드를 사용하여 복잡한 사용자 인터페이스를 탐색할 때 화면의 여러 섹션 간에 자주 이동합니다. 예를 들어 측면 탐색 레일에서 콘텐츠 목록으로 이동하고, 항목과 상호작용하고, 다시 돌아가는 식입니다. 포커스 복원을 사용하면 컨테이너가 이전에 포커스가 있던 하위 요소를 기억하고 포커스가 컨테이너에 다시 들어가면 포커스를 해당 요소로 복원할 수 있습니다.

스크롤 가능한 컨테이너에서 포커스 복원

Jetpack Compose에서 LazyColumn, LazyRow, LazyVerticalGrid과 같은 스크롤 가능한 컨테이너는 자동으로 포커스 그룹 역할을 합니다. 지연 목록이나 그리드에서 포커스 복원을 사용 설정하려면 focusRestorer 수정자를 연결하세요.

LazyColumn(
    modifier = Modifier.focusRestorer()
) {
    items(items) { item ->
        Button(onClick = { /* Handle click */ }) {
            Text(item)
        }
    }
}

포커스가 LazyColumn를 벗어나면 컨테이너는 활성 상태였던 항목을 기록합니다. 사용자가 목록으로 다시 이동하면 포커스가 상단에서 다시 시작하는 대신 해당 항목으로 복원됩니다.

Row 및 Column에서 포커스 복원

지연 레이아웃 컨테이너와 달리 Row 및 Column과 같은 표준 스크롤 불가능 레이아웃 컨테이너는 기본적으로 포커스 경계를 설정하지 않습니다. focusRestorer 수정자를 단독으로 적용하는 것만으로는 충분하지 않습니다.

Row 또는 Column에서 포커스 복원을 사용 설정하려면 focusGroup를 focusRestorer와 결합하세요.

Row(
    modifier = Modifier
        .focusGroup()
        .focusRestorer()
) {
    Button(onClick = { /* Action 1 */ }) {
        Text("First item")
    }
    Button(onClick = { /* Action 2 */ }) {
        Text("Second item")
    }
    Button(onClick = { /* Action 3 */ }) {
        Text("Third item")
    }
}

대체 포커스 타겟 지정

포커스가 컨테이너에 처음 들어가면 이전에 포커스가 있던 하위 요소가 없습니다. Compose는 기본 포커스 순서에 따라 포커스를 지정할 하위 요소를 결정합니다.

대체 FocusRequester를 focusRestorer에 전달하여 첫 번째 항목에서 포커스를 받는 하위 요소를 맞춤설정할 수 있습니다 (또는 이전 Compose 버전에서 FocusRequester를 반환하는 람다).

val firstItemRequester = remember { FocusRequester() }

LazyColumn(
    modifier = Modifier.focusRestorer(firstItemRequester)
) {
    itemsIndexed(items) { index, item ->
        val itemModifier = if (index == 0) {
            Modifier.focusRequester(firstItemRequester)
        } else {
            Modifier
        }
        Button(
            onClick = { /* Handle click */ },
            modifier = itemModifier
        ) {
            Text(item)
        }
    }
}

이전에 포커스가 지정된 하위 요소가 없거나 포커스 복원이 실패하면 Compose는 연결된 대체 타겟으로 포커스를 이동합니다.

NavigationRail, NavigationBar, NavigationDrawer, TabRow과 같은 탐색 구성요소에서 사용자는 콘텐츠 영역에서 구성요소로 진입할 때 현재 선택된 대상에 포커스가 배치되기를 기대합니다.

Modifier.focusGroup()와 focusProperties를 결합하고 onEnter 속성 (또는 이전 Compose 버전의 경우 enter)을 설정하여 포커스를 활성 대상으로 지정할 수 있습니다.

val (homeRequester, searchRequester, settingsRequester) = remember { FocusRequester.createRefs() }

val selectedRequester = when (currentDestination) {
    "home" -> homeRequester
    "search" -> searchRequester
    "settings" -> settingsRequester
    else -> homeRequester
}

NavigationRail(
    modifier = modifier
        .focusProperties {
            // Redirect focus to the selected item when focus enters the navigation rail
            onEnter = { selectedRequester.requestFocus() }
        }
        .focusGroup()
) {
    NavigationRailItem(
        selected = currentDestination == "home",
        onClick = { onNavigate("home") },
        icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
        label = { Text("Home") },
        modifier = Modifier.focusRequester(homeRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "search",
        onClick = { onNavigate("search") },
        icon = { Icon(Icons.Default.Search, contentDescription = "Search") },
        label = { Text("Search") },
        modifier = Modifier.focusRequester(searchRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "settings",
        onClick = { onNavigate("settings") },
        icon = { Icon(Icons.Default.Settings, contentDescription = "Settings") },
        label = { Text("Settings") },
        modifier = Modifier.focusRequester(settingsRequester)
    )
}

화면 전환 시 포커스 복원

사용자가 항목을 클릭하여 세부정보 화면으로 이동한 후 뒤로 버튼이나 동작을 사용하여 돌아오는 경우 클릭한 항목으로 포커스를 복원할 수 있습니다.

화면 전환 시 포커스를 유지하고 복원하려면 다음을 실행하세요.

  1. 컨테이너를 FocusRequester와 연결합니다.
  2. 탐색 이벤트를 트리거하기 전에 컨테이너의 FocusRequester에서 saveFocusedChild()를 호출합니다.
  3. 사용자가 화면으로 다시 이동하면 컨테이너에 초기 포커스를 요청하거나 restoreFocusedChild()를 호출합니다.
이전
포커스 타겟 그룹화
다음
포커스 상태 표시