Jetpack Compose Glimmer의 포커스

적용 가능한 XR 기기

이 가이드는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 데 도움이 됩니다.

XR 기기 유형 알아보기 →

AI 안경

XR 기기 유형 알아보기 →

모든 Jetpack Compose Glimmer 구성요소는 AI 안경의 터치패드에서 탭 또는 스와이프와 같은 휴대전화와 유사한 표준 입력 메서드와 함께 작동하도록 설계되었으며 카메라 및 디스플레이 버튼과 같은 AI 안경 하드웨어에 특정한 입력 명령어에도 반응합니다. Jetpack Compose Glimmer 구성요소는 필요한 입력 이벤트를 자동으로 처리합니다. 맞춤 구성요소의 경우 기존 Compose API(예: Modifier.draggable 또는 Modifier.scrollable)를 활용하여 특정 상호작용 동작을 구현할 수 있습니다.

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

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

(임시 요구사항) 필수 입력 플래그 사용 설정:

Jetpack Compose의 기능을 사용하면 화면이 로드될 때 시스템에서 초기 포커스를 포커스 가능한 첫 번째 요소(화면의 왼쪽 상단 항목인 경우가 많음)로 자동으로 설정할 수 있습니다. 이 기능은 아직 개발 중이며 기본적으로 사용 설정되어 있지 않습니다. 이 기능을 활성화하려면 활동의 onCreate() 메서드에서 isInitialFocusOnFocusableAvailable 플래그를 true로 설정합니다.

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

탐색 동작 및 순서

사용자가 앱을 탐색할 때 포커스 이동 및 순서가 변경됩니다.

포커스 이동

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

포커스 순서

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입니다.

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

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