컴포저블 미리보기로 Jetpack Compose Glimmer UI 미리보기

Jetpack Compose Glimmer는 디스플레이 AI 안경을 위한 풍부하고 주변 환경에 적합한 환경을 빌드하기 위한 UI 도구 키트입니다. Jetpack Compose Glimmer UI를 개발할 때 컴포저블 미리보기를 사용하여 디자인을 빠르고 효율적으로 시각화하고 반복하세요. 컴포저블 미리보기를 사용하면 Android 스튜디오 내에서 Jetpack Compose Glimmer UI 구성요소를 실시간으로 대화형으로 렌더링할 수 있습니다. 이러한 미리보기는 작은 UI 변경사항이 있을 때마다 에뮬레이터나 실제 기기에서 앱을 지속적으로 빌드하고 실행할 필요가 없으므로 개발 주기를 크게 단축합니다.

Jetpack Compose Glimmer UI 구성요소 미리보기

  1. 최신 Canary 빌드의 Android 스튜디오에서 XR 프로젝트를 엽니다.
  2. 컴포저블 함수에 @Preview 주석이 달려 있는지 확인합니다.
  3. 코드 뷰에서 컴포저블 함수의 미리보기 구성 선택기를 클릭합니다.

  4. 기기 드롭다운 메뉴에서 AI 글래스를 선택합니다.

    이렇게 하면 AI 안경 디스플레이의 고유한 해상도와 가로세로 비율에 맞게 미리보기 노출 영역이 조정됩니다.

    구성 가능한 함수 미리보기 구성에서 기기로 AI 글라스를 선택합니다.

  5. 디자인 또는 분할 뷰를 선택하여 미리보기를 확인합니다.

    컴포저블 미리보기가 시뮬레이션된 AI 안경 기기의 분할 뷰에 표시됩니다.

미리보기 환경 조정

안경은 가산 투명 디스플레이를 사용합니다. 이 특성은 디스플레이가 빛만 추가할 수 있고 검은색을 만들 수 없음을 의미합니다. 가산 디스플레이에서는 검은색이 색상이 아닙니다. 100% 투명하게 표시됩니다. Compose 미리보기는 다양한 보기 조건에서 UI가 어떻게 작동하는지 이해하는 데 도움이 되는 근사치를 제공합니다.

다양한 보기 조건을 시뮬레이션하려면 미리보기 창 툴바에서 환경 아이콘을 클릭합니다. 다양한 배경 옵션 (예: 밝음, 어두움, 바쁨)을 시도하여 텍스트와 구성요소의 대비와 가시성이 적절한지 확인합니다.