Compose のカットアウト

ディスプレイ カットアウトとは、一部のデバイスにある表示サーフェスに拡張された領域です。ディスプレイ カットアウトにより、デバイスの前面に重要なセンサーのスペースを確保しながら、エッジ ツー エッジのエクスペリエンスを実現できます。

縦向きモードでのカットアウトの例
図 1. 縦表示のカット例
横表示でのカットアウトの例
図 2. 横表示でのカットアウトの例

Android 9（API レベル 28）以降を搭載したデバイスでは、ディスプレイ カットアウトがサポートされています。ただし、デバイス メーカーは、Android 8.1 以前を搭載しているデバイスでディスプレイ カットアウトをサポートすることもできます。

このページでは、カットアウト領域（カットアウトを含む表示サーフェスの長方形全体）の活用方法など、Compose でカットアウト付きのデバイスに対するサポートを実装する方法について説明します。

デフォルトの場合

デフォルトでは、ディスプレイの切り欠きはウィンドウの切り欠き情報に含まれます。そのため、アプリをエッジ ツー エッジにするガイドに沿ってアプリを作成しても、ディスプレイのカットアウト領域には描画されません。

たとえば、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

この動作をさらにカスタマイズするには、切り抜き情報を自分で処理する必要があります。

切り抜き情報を手動で処理する

切り抜きは、次のいずれかの方法で処理できます。

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.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT を使用してウィンドウ属性を設定することで、ビュー カットアウトのドキュメントに記載されているものと同じ設定を適用できます。ただし、カットアウト モードはアクティビティ全体に適用され、個々のコンポーザブルごとに制御することはできません。

特定のコンポーザブルでディスプレイの切り欠きを考慮し、他のコンポーザブルでは考慮しない場合は、WindowInset.displayCutout を使用します。この API を使用すると、必要に応じて切り抜き情報にアクセスできます。

おすすめの方法

ディスプレイ カットアウトを使用する場合は、次の点を考慮してください。

  • UI の重要な要素の配置に注意してください。カットアウト領域によって重要なテキスト、コントロール、その他の情報が隠れないようにしてください。
  • 繊細なタップ認識を必要とするインタラクティブな要素をカットアウト領域に配置または拡張しないでください。カットアウト領域ではタップの感度が低下することがあります。
  • エッジ ツー エッジのガイダンスに従う場合、カットアウト情報は safeDrawing / safeContent インセットに含まれます。
  • 可能な場合は、Modifier.windowInsetsPadding(WindowInsets.safeDrawing) を使用して、コンテンツに適用する適切なパディングを決定します。ステータスバーの高さをハードコードしないようにしてください。ハードコードすると、コンテンツが重複したり切り取られたりするおそれがあります。

カットアウトを使用してコンテンツがどのようにレンダリングされるかをテストする

アプリの画面と動作をすべてテストしてください。可能な場合は、カットアウトのタイプが異なる各種デバイスでテストを実施します。カットアウト付きのデバイスがない場合は、Android 9 以降を搭載しているデバイスまたはエミュレータで、次の手順を使用して一般的なカットアウト構成をシミュレートできます。

  1. [開発者向けオプション] を有効にします。
  2. [開発者向けオプション] 画面で [描画] セクションまで下にスクロールし、[カットアウトがあるディスプレイのシミュレート] を選択します。
  3. カットアウトのタイプを選択します。
    エミュレータでのディスプレイ カットアウトのシミュレーション
    図 3. 開発者向けオプションを使用して、コンテンツがどのようにレンダリングされるかをテストします。