一部のデバイスでは、ディスプレイ カットアウトはディスプレイ サーフェスまで広がる領域です。デバイスの前面に重要なセンサー用のスペースを確保しながら、エッジ ツー エッジのエクスペリエンスを提供します。
Android は、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 } } }
この動作をさらにカスタマイズするには、カットアウト情報を自身で処理する必要があります。
カットアウト情報を手動で処理する
カットアウトは次のいずれかの方法で処理できます。
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())) }
このアプローチでは、必要に応じて displayCutout
パディングを考慮するか、不要な場合は無視できます。
または、アクティビティ テーマ android:windowLayoutInDisplayCutoutMode
を別のオプションに設定するか、window.attributes.layoutInDisplayCutoutMode =
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
を使用してウィンドウ属性を設定することで、ビュー カットアウトのドキュメントに記載されているものと同じ設定を適用できます。ただし、カットアウト モードはアクティビティ全体に適用され、個々のコンポーザブルごとに制御することはできません。
特定のコンポーザブルのディスプレイ カットアウトを優先し、他のコンポーザブルは尊重しない場合は、WindowInset.displayCutout
を使用します。この API を使用すると、必要に応じてカットアウト情報にアクセスできます。
おすすめの方法
ディスプレイ カットアウトを使用する場合は、次の点を考慮してください。
- UI の重要な要素の配置に注意してください。カットアウト領域によって重要なテキスト、コントロール、その他の情報が隠れないようにしてください。
- きめ細かい認識が必要なインタラクティブ要素をカットアウト領域に配置または拡張しないでください。カットアウト領域では、タップの感度が低くなる場合があります。
- エッジ ツー エッジのガイダンスに従う場合、カットアウト情報は
safeDrawing
/safeContent
インセットに含まれます。 - 可能な場合は、
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
を使用して、コンテンツに適用する適切なパディングを決定します。ステータスバーの高さをハードコードしないようにしてください。ハードコードすると、コンテンツが重複したり切り取られたりするおそれがあります。
カットアウトを使用してコンテンツがどのようにレンダリングされるかをテストする
アプリの画面と動作をすべてテストしてください。可能であれば、さまざまな種類のカットアウトを持つデバイスでテストします。カットアウト付きのデバイスがない場合は、Android 9 以降を搭載したデバイスまたはエミュレータで、一般的なカットアウト構成をシミュレートできます。手順は次のとおりです。
- [開発者向けオプション] を有効にします。
- [開発者向けオプション] 画面で [描画] セクションまで下にスクロールし、[カットアウトでディスプレイをシミュレート] を選択します。
- カットアウトのタイプを選択します。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose のウィンドウ インセット
- グラフィック修飾子
- 段落スタイル