Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

エッジツーエッジのデザイン

エッジツーエッジアプリは、システムバーの下に UI を描画することで、画面全体を活用します。

**図 1.** 左。エッジツーエッジではないアプリ。そうです。エッジツーエッジのアプリ。

要点

システムバーの下に背景とスクロールコンテンツを描画して、エッジツーエッジのエクスペリエンスを実現します。
システムインセットの下にタップ操作やドラッグターゲットを追加しないでください。これらは、エッジツーエッジやジェスチャーナビゲーションと競合します。

システムバーの背後にコンテンツを描画する

エッジツーエッジ機能を使用すると、システムバーの下に UI を描画して、没入感のあるエクスペリエンスを実現できます。

アプリは、インセットに対応することで、コンテンツの重複に対処できます。インセットは、システムバーやディスプレイカットアウトなどの実機機能との重複を避けるために、アプリのコンテンツにパディングを適用する必要がある量を示します。Compose と Views でエッジツーエッジをサポートし、インセットを処理する方法について確認する。

エッジツーエッジのユースケースを設計する際は、次のタイプのインセットに注意してください。

システムバーインセットは、タップ可能で、システムバーによって視覚的に隠されない UI に適用されます。
システムジェスチャーインセットは、OS が使用するジェスチャーナビゲーション領域に適用され、アプリよりも優先されます。
ディスプレイカットアウトインセットは、カメラカットアウトなど、ディスプレイの表面に広がるデバイス領域に適用されます。

ステータスバーに関する考慮事項

システムバーの基本的な設計ガイダンスについては、Android のシステムバーをご覧ください。次のセクションでは、ステータスバーに関するその他の考慮事項について説明します。

コンテンツをスクロールする

トップアプリバーは、スクロール中に折りたたまれるようにします。マテリアル 3 の TopAppBar を折りたたむ方法を学習します。マテリアル 3 では、小さい上部アプリバーをステータスバーの高さまで折りたたんだり、画面外にスクロールしたりできます。中規模および大規模なトップアプリバーは、より小さなアプリバーに折りたたむことができます。[マテリアルのガイダンス][10] をご覧ください。

すべきこと

アプリバーが固定されている場合は、小さなトップアプリバーをステータスバーの高さまで折りたたみます。

すべきこと

小さなトップアプリバーが固定されていない場合は、一致する背景色のカラーグラデーションを追加します。

UI が下にスクロールされるときにステータスバーが半透明になるようにして、ステータスバーのアイコンが乱雑に見えないようにする必要があります。これを行うには、まず、LazyColumn または RecyclerView のドキュメントの手順に沿って、スクロール可能な UI をエッジツーエッジにします。次に、以下のいずれかを行って、システムバーを半透明にします。