다음을 통해 공유

WindowState

  • 아티클

중요

이 문서에서 설명하는 기능 및 지침은 공개 미리 보기 상태이며 일반적으로 공급되기 전에 대대적으로 수정될 수 있습니다. Microsoft는 여기에 제공된 정보에 대해 명시적 또는 묵시적 보증을 하지 않습니다.

WindowState는 이중 화면, 폴더블 및 대형 화면 디바이스의 창 상태에 대한 세부 정보를 쉽게 얻을 수 있도록 도와주는 Jetpack Compose용 유틸리티 라이브러리입니다. 이 정보는 Google의 Jetpack Window Manager 라이브러리를 사용하여 수집됩니다.

WindowState 클래스는 Compose 상태로 정보를 제공하며 접기 기능 위치/방향, 창 크기 클래스 및 창 모드와 같은 속성을 포함합니다. 높이 및 너비 창 크기 등급은 공식 Android 가이드라인에 따라 측정되며 현재 창 모드는 접기 기능 및 디바이스 방향에 따라 결정됩니다. 참고로 창 모드는 이중 화면 및 폴더블 폼 팩터를 활용하는 디스플레이 자세입니다. 이중 세로, 이중 가로, 단일 세로, 단일 가로 등의 네 가지 가능한 모드가 있습니다.

4개의 창 모드/디스플레이 포스처 그래픽

종속성 추가

  1. 최상위 수준 build.gradle 파일에 mavenCentral() 리포지토리가 있는지 확인합니다.

    allprojects {
    repositories {
        google()
        mavenCentral()
     }
}

  2. 모듈 수준 build.gradle 파일에 다음 종속성을 추가합니다(현재 버전은 여기에 표시된 것과 다를 수 있음).

    implementation "com.microsoft.device.dualscreen:windowstate:1.0.0-alpha07"

  3. 또한 compileSdkVersion이 API 33으로 설정되고 targetSdkVersion이 모듈 수준 build.gradle 파일에서 API 32 이상으로 설정되어 있는지 확인합니다.

    android { 
    compileSdkVersion 33

    defaultConfig { 
        targetSdkVersion 32
    } 
    ... 
}

프로젝트에서 WindowState 사용

Compose 프로젝트에서 라이브러리를 사용하려면 MainActivity에서 rememberWindowState() 함수를 호출합니다. 이 메서드는 최상위 컴포저블에 상태로서 전달할 수 있는 WindowState 개체를 반환합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        setContent {
            ExampleAppTheme {
                ExampleApp(rememberWindowState())
            }
        }
    }
}

그런 다음, 컴포저블 내에서 WindowState 개체의 다양한 속성에 액세스하여 앱 레이아웃을 선택할 수 있습니다. 아래 예에서 이 isDualScreen() 메서드는 단일 화면 디바이스용과 이중 화면 디바이스용 레이아웃 중 하나를 선택하는 데 사용됩니다.

fun ExampleApp(windowState: WindowState) {
    if (windowState.isDualScreen())
        DualScreenAppContent(windowState.foldSizeDp)
    else
        SingleScreenAppContent()
}

자세한 API 참조 정보는 WindowState 추가 정보를 참조하세요.

창 크기 계산

Jetpack Window Manager 및 창 크기 클래스 정보를 노출하는 것 외에도 WindowState 클래스는 두 개의 창 레이아웃에 대한 창 크기를 계산합니다. TwoPaneLayout 구성 요소가 프로젝트에 적합하지 않은 경우 largeScreenPane1Weight, pane1SizeDp 및 pane2SizeDp 속성을 사용하여 고유한 맞춤 레이아웃을 설정할 수 있습니다.

fun ExampleApp(windowState: WindowState) {
    windowState.largeScreenPane1Weight = 0.3f
    
    CustomListDetailLayout(
        pane1Width = windowState.pane1SizeDp.width,
        pane2Width = windowState.pane2SizeDp.width,
        list = { ListContent() },
        detail = { DetailContent() }
    )
}

창 크기는 다음 논리에 따라 계산됩니다.

  • 창에 분리 접기 기능이 포함된 경우:
    • 접기 기능의 경계에 따라 창 크기 계산
  • 창이 큰(너비 및 최소 MEDIUM 높이 크기 클래스)EXPANDED로 간주되는 경우:
    • 속성, 창 크기 및 디바이스 방향에 largeScreenPane1Weight 따라 창 크기 계산
  • 폴더블 또는 큰 화면이 아닌 경우:
    • 하나의 창만 표시되어야 하므로 반환 창 크기는 0입니다.

이러한 논리 검사는 순서대로 수행되므로 접는 기능이 분리되지 않는 경우 큰 폴더블 디바이스를 큰 화면으로 간주할 수 있습니다. 즉, 디바이스에 힌지가 없고 평평하다는 의미입니다.

중요

largeScreenPane1Weight 속성은 계산에 사용할 가중치에 대해 pane1SizeDp 또는 pane2SizeDp를 호출하기 전에 설정해야 합니다.

큰 화면과 폴더블을 모두 지원하려면 위에서 설명한 속성을 사용하는 것이 좋습니다. 그러나 분리 접기 기능이 있을 때 창 크기를 사용해야 하는 경우에만 foldablePane1SizeDp 및 foldablePane2SizeDp 속성을 대신 사용할 수 있습니다.

fun ExampleApp(windowState: WindowState) {
    CustomCompanionPaneLayout(
        pane1Size = windowState.foldablePane1SizeDp,
        pane2Size = windowState.foldablePane2SizeDp,
        game = { GameScreen() },
        controls = { ControlPanel() }
    )
}

샘플

WindowState 사용 방법에 대한 더 많은 예를 보려면 라이브러리 샘플 및 Compose 샘플을 확인하세요.