Compose의 컷아웃

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

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

이 페이지에서는 컷아웃 영역(즉, 컷아웃이 포함된 디스플레이 표면의 가장자리 둘레 직사각형)을 사용하는 방법을 포함하여 Compose에서 컷아웃이 있는 기기를 지원하는 방법을 설명합니다.

기본값 케이스

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

예를 들어 Modifier.windowInsetsPadding(WindowInsets.safeContent) 또는 Modifier.windowInsetsPadding(WindowInsets.safeDrawing)를 사용할 때 앱은 컷아웃이 배치되는 영역에 자동으로 그리지 않습니다. WindowInsets.safeContent 및 WindowInsets.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
        }
    }
}
CutoutSnippets.kt

이 동작을 추가로 맞춤설정하려면 컷아웃 정보를 직접 처리해야 합니다.

수동으로 컷아웃 정보 처리

컷아웃은 다음과 같은 방법으로 처리할 수 있습니다.

• WindowInsets.displayCutout 사용

• android:windowLayoutInDisplayCutoutMode로 테마 매니페스트에서 설정

• window.attributes.layoutInDisplayCutoutMode를 사용하여 Window에서 프로그래매틱 방식으로 옵션 설정

• LocalView.current.rootWindowInsets.displayCutout로 컷아웃 Path 객체에 액세스

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

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

이 접근 방식을 사용하면 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. 컷아웃 유형을 선택합니다.

   

추천 서비스

• 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
• Compose의 창 인셋
• 그래픽 수정자
• 단락 스타일 지정