창 크기 클래스

창 크기 클래스는 효과적인 표시 영역 중단점의 집합입니다. 반응형/적응형 레이아웃을 디자인, 개발, 테스트합니다. 중단점 균형 고유한 사례에 맞게 앱을 최적화할 수 있는 유연성이 있습니다.

창 크기 클래스는 앱에서 사용할 수 있는 디스플레이 영역을 다음과 같이 분류합니다. 좁게, 중간 또는 확장입니다. 사용 가능한 너비와 높이로 분류됨 언제라도 앱의 창 크기가 클래스 - 하나는 너비용, 다른 하나는 높이용입니다. 사용 가능한 너비는 일반적으로 세로 스크롤이 보편적이기 때문에 사용 가능한 높이보다 중요하므로 너비 창 크기 클래스가 앱의 UI와 더 관련이 있을 가능성이 높습니다.

그림에 시각화된 것처럼 중단점을 사용하면 레이아웃에 관해 자세히 알아보겠습니다. 각 크기 클래스 중단점은 일반적인 기기 시나리오의 대부분의 사례를 나타내며 중단점 기반 레이아웃의 디자인을 고려할 때 유용한 참조 기준일 수 있습니다.

크기 클래스를 실제 기기로 시각화하면 유용할 수 있지만 창 크기는 기기 화면의 크기에 의해 명시적으로 결정되지는 않습니다. 창문 크기 클래스는 isTablet 유형 로직용이 아닙니다. 대신 기간 크기 클래스는 애플리케이션에서 사용할 수 있는 창 크기에 따라 결정됩니다. 앱이 실행되는 기기의 유형과 관계없이 두 가지 중요한 의미:

• 실제 기기는 특정 창 크기 클래스를 보장하지 않습니다. 이 앱에서 사용할 수 있는 화면 공간이 앱의 화면 크기와 여러 가지 이유로 인해 휴대기기에서 화면 분할 모드를 사용하면 두 애플리케이션 간에 화면을 분할합니다. ChromeOS에서 Android 앱은 임의의 크기를 조절할 수 있는 자유 형식 창에 표시되어야 합니다. 폴더블에는 서로 다른 크기의 화면 두 개를 개별적으로 액세스할 수 있음 기기를 펼치거나 펼치면 됩니다.

• 창 크기 클래스는 앱의 전체 기간 동안 변경될 수 있습니다. 앱이 실행되는 동안 기기 방향이 변경되고 멀티태스킹이 가능하고 접기/펼치면 사용 가능한 화면 공간이 달라질 수 있습니다. 창 크기 클래스가 동적이며 앱의 UI가 변경할 수 있습니다

창 크기 클래스는 Material Design 레이아웃 안내를 참고하세요. 창 크기 클래스를 사용하여 애플리케이션 레이아웃을 대략적으로 결정하고, 예를 들어 특정 표준 레이아웃을 사용하여 추가 화면 공간이 필요합니다.

다음을 사용하여 현재 WindowSizeClass를 계산합니다. currentWindowAdaptiveInfo() 최상위 함수 androidx.compose.material3.adaptive 라이브러리로 이동합니다. 이 함수는 windowSizeClass가 포함된 WindowAdaptiveInfo의 인스턴스입니다. 이 다음 예는 창 크기 클래스를 계산하고 창 크기 클래스를 창 크기 클래스가 변경될 때마다 업데이트됩니다.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

Manage layouts with window size classes

Window size classes enable you to change your app layout as the display space available to your app changes, for example, when a device folds or unfolds, the device orientation changes, or the app window is resized in multi‑window mode.

Localize the logic for handling display size changes by passing window size classes down as state to nested composables just like any other app state:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Perform logic on the size class to decide whether to show the top app bar.
    val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT

    // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}
AdaptiveLayoutSnippets.kt

창 크기 클래스 테스트

레이아웃을 변경할 때 모든 창 크기에서 레이아웃 동작을 테스트합니다. 특히 소형, 중형 및 확장 중단점 너비에서 그렇습니다.

소형 화면을 위한 기존 레이아웃이 있는 경우 먼저 레이아웃을 최적화하세요. 를 사용합니다. 이 크기 클래스는 가장 많은 공간을 제공하기 때문입니다. 에서 확인하세요. 그런 다음 적합한 레이아웃을 중형 너비 크기 클래스 특수한 레이아웃을 추가하는 것이 좋습니다.

다음 단계

창 크기 클래스를 사용하여 반응형/적응형 광고를 만드는 방법을 자세히 알아보세요. 다음을 참고하세요.

• Compose 기반 레이아웃: 다양한 화면 크기 지원

• 보기 기반 레이아웃: 보기가 포함된 반응형/적응형 디자인

모든 기기 및 화면 크기에서 멋진 앱을 만드는 요소에 관해 자세히 알아보려면 참조:

• 반응형 레이아웃으로 UI 이전
• 대형 화면 앱 품질