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의 경우 windowLayoutInDisplayCutoutMode를 다음과 같이 설정하는 것이 좋습니다. 전체 테마로 default하고 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. 개발자 옵션을 사용하여 콘텐츠가 렌더링되는 방식을 테스트합니다.