Compose のカットアウト

ディスプレイ カットアウトとは、一部のデバイスではディスプレイまで広がる領域のことです。 あります。エッジ ツー エッジのエクスペリエンスを提供しながら、 デバイスの前面にある重要なセンサーです。

図 1. 縦表示のカットアウトの例

<ph type="x-smartling-placeholder">

</ph>

図 2.横表示のカットアウトの例

Android は、Android 9（API レベル 28）を搭載したデバイスでディスプレイ カットアウトをサポートします。 高くなります。ただし、デバイス メーカーはディスプレイ カットアウトを Android 8.1 以前を搭載したデバイス

このページでは、カットアウトがあるデバイスのサポートを実装する方法について説明します。 Compose（カットアウト領域、つまりエッジ ツー エッジの処理方法を含む） カットアウトを含むディスプレイ面上の長方形。

デフォルトの場合

デフォルトでは、ディスプレイ カットアウトはウィンドウ インセット情報に含まれています。 そのため、 アプリをエッジ ツー エッジ対応にするためのガイドです。

たとえば、kubectl の 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 属性を設定するか、 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. 開発者向けオプションを使用して、コンテンツがどのようにレンダリングされるかをテストします。

   をご覧ください。