WindowState

[アーティクル]
07/10/2023

重要

この記事では、パブリックプレビュー段階であり、一般公開前に大幅に変更される可能性がある機能とガイダンスについて説明します。本書に記載された情報について、Microsoft は明示または黙示を問わずいかなる保証をするものでもありません。

WindowState は Jetpack Compose のユーティリティライブラリで、これにより、デュアルスクリーン、折りたたみ型、および大画面デバイスのウィンドウ状態に関する詳細を簡単に取得できます。この情報は、Google の Jetpack Window Manager ライブラリを使用して収集されます。

WindowState クラスは、情報を Compose 状態として提供します。またこれには、折りたたみ機能の位置/向き、ウィンドウサイズクラス、ウィンドウモードなどのプロパティが含まれます。高さと幅のウィンドウサイズクラスは、公式の Android ガイドラインに基づいて測定され、現在のウィンドウモードは、折りたたみ機能とデバイスの向きによって決定されます。注意すべき点として、ウィンドウモードは、デュアルスクリーンおよび折りたたみ型フォームファクターを活用するディスプレイポスチャです。使用可能なモードには、デュアル縦向き、デュアル横向き、シングル縦向き、シングル横向きの 4 つがあります。

4 つのウィンドウモード/表示姿勢の図

依存関係を追加する

最上位の build.gradle ファイルに mavenCentral() リポジトリがあることを確認します。
```
allprojects {
    repositories {
        google()
        mavenCentral()
     }
}
```
次の依存関係をモジュールレベル build.gradle ファイルに追加します (現在のバージョンは、ここに示されているものとは異なる場合があります)。
```
implementation "com.microsoft.device.dualscreen:windowstate:1.0.0-alpha07"
```
また、モジュールレベルの build.gradle ファイルで compileSdkVersion が API 33 に設定され、targetSdkVersion が 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() メソッドを使用して、2 つの異なるレイアウト (1 つはシングルスクリーンデバイス用、もう 1 つはデュアルスクリーンデバイス用) のいずれかを選択します。

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

API リファレンスの詳細については、WindowState README を参照してください。

ペインのサイズを計算する

Jetpack Window Manager とウィンドウサイズクラス情報を表示するだけでなく、WindowState クラスは、2 つのペインレイアウトのペインサイズも計算します。 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() }
    )
}

ペインのサイズは、次のロジックに基づいて計算されます。

ウィンドウに分離された折りたたみ機能がある場合:
- 折りたたみ機能の境界に基づいてペインのサイズを計算します
ウィンドウが大きい (EXPANDED 幅と高さ以上 MEDIUM のサイズクラス) と見なされる場合:
- largeScreenPane1Weight プロパティ、ウィンドウサイズ、およびデバイスの向きに基づいてペインサイズを計算します
折りたたみ型または大画面以外の場合:
- 表示するペインは 1 つだけなので、ペインサイズ 0 を返します

これらのロジックチェックは順番に実行されるため、折りたたみ機能が分離されていない場合 (つまり、デバイスにヒンジがなく、フラットである場合)、大きな折りたたみ型デバイスは大画面と見なされる可能性があることに注意してください。

重要

重みを計算で使用するために pane1SizeDp または pane2SizeDp を呼び出す "前" に、largeScreenPane1Weight プロパティを設定する必要があります。

上で説明したプロパティを使用して、大きな画面と折りたたみ型の両方に対応するようにすることをお勧めします。ただし、分離された折りたたみ機能が存在する場合にのみペインサイズを使用する必要がある場合は、代わりに foldablePane1SizeDp プロパティと foldablePane2SizeDp プロパティを使用できます。

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

サンプル

WindowState の使用法の他の例については、ライブラリのサンプルや Compose サンプルを参照してください。

Share via

WindowState

依存関係を追加する

プロジェクトで WindowState を使用する

ペインのサイズを計算する

サンプル

その他のリソース