Compose의 컷아웃

디스플레이 컷아웃은 일부 기기에서 디스플레이 표면으로 확장되는 영역입니다. 에지 투 에지 환경을 제공하는 동시에 기기 전면에 중요한 센서를 위한 공간을 제공합니다.

세로 모드의 컷아웃 예시
그림 1. 세로 모드의 컷아웃 예
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> 가로 모드의 컷아웃 예
그림 2. 가로 모드의 컷아웃 예
를 통해 개인정보처리방침을 정의할 수 있습니다.

Android는 Android 9(API 수준 28) 이상을 실행하는 기기에서 디스플레이 컷아웃을 지원합니다. 그러나 기기 제조업체는 디스플레이 컷아웃을 지원할 수도 있습니다. Android 8.1 이하를 실행하는 기기에서 지원됩니다.

이 페이지에서는 컷아웃 영역(컷아웃이 포함된 디스플레이 표면의 에지 투 에지 직사각형)을 사용하는 방법을 포함하여 Compose에서 컷아웃이 있는 기기 지원을 구현하는 방법을 설명합니다.

기본 케이스

기본적으로 디스플레이 노출 영역은 창 인셋 정보에 포함됩니다. 따라서 앱을 더 넓은 화면에 표시하는 방법에 관한 가이드를 따르면 앱이 디스플레이 컷아웃 영역에 그려지지 않습니다.

예를 들어 Modifier.windowInsetsPadding(WindowInsets.safeContent) 또는 Modifier.windowInsetsPadding(WindowInsets.safeDrawing)를 사용하면 앱이 컷아웃이 배치된 영역을 자동으로 그리지 않습니다. WindowInsets.safeContentWindowInsets.safeDrawing는 모두 디스플레이 컷아웃 정보를 포함하며 기기 컷아웃이 있는 위치는 그리지 않습니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}

이 동작을 더 맞춤설정하려면 잘라내기 정보를 직접 처리해야 합니다.

잘림 정보를 수동으로 처리

다음 방법 중 하나로 컷아웃을 처리할 수 있습니다.

Compose의 경우 전체 테마에서 windowLayoutInDisplayCutoutModedefault로 설정한 다음 WindowInsets.displayCutout를 활용하여 컴포저블의 인셋을 처리하는 것이 좋습니다.

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}

이 접근 방식을 사용하면 필요한 경우 displayCutout 패딩을 준수할 수 있습니다. 필요하지 않은 경우에는 무시하세요

또는 보기 컷아웃에 적용된 설정과 동일한 설정을 적용할 수 있습니다. 문서에서 설명한 바와 같이 활동 테마 android:windowLayoutInDisplayCutoutMode를 옵션을 설정하거나 window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT입니다. 그러나 그러면 전체 활동에 잘라내기 모드가 적용되며 개별 컴포저블별로 제어할 수 없습니다.

특정 컴포저블에서만 디스플레이 컷아웃을 적용하려면 다음을 사용하세요. WindowInset.displayCutout 이 API를 사용하면 필요할 때 잘린 부분 정보에 액세스할 수 있습니다.

권장사항

디스플레이 컷아웃을 사용할 때는 다음 사항을 고려하세요.

  • UI의 중요한 요소 배치에 주의하세요. 사용자가 컷아웃 영역이 중요한 텍스트, 컨트롤 또는 기타 정보를 가리는 경우
  • 세밀한 터치가 필요한 상호작용 요소를 배치하거나 확장하지 않습니다. 컷아웃 영역으로 인식하기만 하면 됩니다. 터치 민감도는 컷아웃 영역 안에 있어야 합니다.
  • 전체 화면 안내를 따르는 경우 잘림 정보가 safeDrawing/safeContent 인셋에 포함됩니다.
  • 가능한 경우 Modifier.windowInsetsPadding(WindowInsets.safeDrawing)을 사용하여 콘텐츠에 적용할 적절한 패딩을 결정합니다. 콘텐츠를 겹치거나 잘라낼 수 있으므로 상태 표시줄 높이를 하드 코딩하지 않습니다.

컷아웃으로 콘텐츠가 렌더링되는 방식 테스트

앱의 모든 화면과 경험을 테스트해야 합니다. 기기에서 테스트 다양한 유형의 컷아웃을 사용할 수 있습니다. 컷아웃이 있는 기기가 없는 경우 Android 9 이상을 실행하는 모든 기기 또는 에뮬레이터에서 다음과 같이 일반적인 컷아웃 구성을 시뮬레이션할 수 있습니다.

  1. 개발자 옵션을 사용 설정합니다.
  2. 개발자 옵션 화면에서 드로잉 섹션까지 아래로 스크롤하고 컷아웃이 있는 디스플레이 시뮬레이션을 선택합니다.
  3. 컷아웃 유형을 선택합니다.
    에뮬레이터에서 디스플레이 컷아웃 시뮬레이션하기
    그림 3. 개발자 옵션을 사용하여 콘텐츠 렌더링 방식을 테스트합니다.