Jetpack Compose Glimmer의 포커스

해당 XR 기기
이 안내는 이러한 유형의 XR 기기용 환경을 구축하는 데 도움이 됩니다.
AI 글래스

모든 Jetpack Compose Glimmer 구성요소는 AI 글래스의 터치패드에서 탭하거나 스와이프하는 등의 표준 입력 방식과 함께 작동하도록 설계되었으며 AI 글래스 하드웨어에 특화된 하위 수준 입력 명령에도 반응합니다. Jetpack Compose Glimmer 구성요소는 필요한 입력 이벤트를 자동으로 처리합니다. 맞춤 구성요소의 경우 Modifier.draggable 또는 Modifier.scrollable과 같은 기존 Compose API를 활용하여 특정 상호작용 동작을 구현할 수 있습니다.

디스플레이가 있는 AI 안경에서 포인터 입력은 초점에 영향을 줄 수 있습니다.

  • : 요소를 활성화하기 위한 직접적인 상호작용입니다. 사용자가 요소와 상호작용하면 포커스가 요소로 이동합니다.
  • 스와이프: 탐색 및 스크롤에 사용됩니다. 처리되지 않은 스와이프 동작은 자동으로 포커스 이동으로 변환되므로 직접 포인터 입력 없이도 원활한 UI 탐색이 가능합니다.

사용자가 앱을 탐색할 때 포커스 이동과 순서 변경

포커스 이동

스크롤 가능한 컨테이너에서 포커스는 터치패드에서 스와이프할 때 연속적으로 이동합니다. 버튼 행과 같은 개별 요소의 경우 스와이프할 때마다 포커스가 한 번에 한 요소씩 이동합니다.

포커스 순서

Jetpack Compose와 마찬가지로 Jetpack Compose Glimmer는 1차원 포커스 검색을 사용합니다. 포커스 이동 순서에 대해 자세히 알아보려면 포커스 이동 순서 변경을 참고하세요.

처음에 포커스가 맞춰진 항목을 변경하려면 최상위 Modifier.focusGroup()를 추가하고 맞춤 onEnter focusProperty를 지정하면 됩니다.

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

스크롤 컨테이너

최적의 사용자 환경을 위해 목록과 같은 스크롤 컨테이너는 화면의 유일한 주요 구성요소여야 합니다. 탐색 혼동을 방지하고 부드럽고 예측 가능한 포커스 이동을 촉진하려면 스크롤 가능한 목록을 버튼과 같은 다른 상호작용 요소 바로 위나 아래에 배치하지 마세요.

기본 포커스 상태

Jetpack Compose Glimmer는 서페이스, 카드, 목록 항목 등 상호작용 가능한 구성요소 전반에 기본 포커스 상태를 구현하여 사용자 상호작용 중에 일관되고 명확한 시각적 피드백을 제공합니다.

그림 1. Jetpack Compose Glimmer의 세 가지 포커스 상태로, 윤곽선 기반 시각적 피드백을 사용하여 구분됩니다.
  • 기본값: 버튼의 배경색은 GlimmerTheme.colors.surface에서 파생되고, 기본 콘텐츠는 해당 표면의 콘텐츠 색상을 계산하며, 아이콘은 GlimmerTheme.colors.primary입니다.

  • 포커스: 포커스를 전달하기 위해 테두리 너비가 증가합니다.

  • 포커스 + 누름: 선택된 상태를 전달하기 위해 배경이 불투명도 100%의 GlimmerTheme.colors.surface로 설정됩니다.