Android プラットフォームは、 ステータスバーとナビゲーション バーがあります。このシステム UI は、指定した環境または ユーザーが使用しているアプリ。
WindowInsets
は、システムに関する情報です。
アプリが正しい領域に描画され、UI が隠れないようにする UI
確認できます。
![エッジ ツー エッジでシステムバーの背後に描画する](https://developer.android.com/static/develop/ui/compose/images/layouts/insets/e2e-intro.gif?authuser=9&hl=ja)
Android 14(API レベル 34)以前では、アプリの UI が下に描画されない システムバーとディスプレイ カットアウトがデフォルトになりました。
Android 15(API レベル 35)以降では、アプリはシステムの下に描画されます。 アプリが SDK 35 をターゲットとすると、バーとディスプレイ カットアウトが表示されます。その結果 シームレスなユーザー エクスペリエンスを実現し、アプリで 使用可能なウィンドウ スペースを確保できます。
システム UI の背後にあるコンテンツを表示することを「エッジ ツー エッジ」と呼びます。対象 ページでは、さまざまなタイプのインセット、エッジ ツー エッジへの対応方法、 インセット API を使用して UI をアニメーション化し、アプリのコンテンツが確実に表示されるようにする方法を学べます。 システム UI 要素によって隠されません。
インセットの基礎
アプリをエッジ ツー エッジ対応にする場合、重要なコンテンツや システム UI によって不明瞭にならないようにします。たとえば あるボタンが ナビゲーション バーの後ろに配置すると、ユーザーがクリックできない場合があります。
システム UI のサイズと配置場所に関する情報を指定する インセット
システム UI の各部分には、それに対応するタイプのインセットがあり、 そのサイズと配置場所を指定します。たとえばステータスバーのインセットでは ナビゲーション バーのインセットを使用すると、 ナビゲーション バーのサイズと位置。各タイプのインセットは ピクセルサイズ: 上、左、右、下。これらのディメンションは システム UI は、アプリ ウィンドウの対応する側から拡張されます。避けるべきこと そのタイプのシステム UI と重なるため、アプリの UI をそのタイプのシステム UI に挿入する必要があります。 します。
これらの Android の組み込みインセットタイプは、WindowInsets
で使用できます。
ステータスバーを説明するインセット。これらは、通知アイコンやその他のインジケーターを含む上部のシステム UI バーです。 |
|
ステータスバーが表示されるタイミングをインセットします。没入型全画面モードに移行したため、現在ステータスバーが非表示になっている場合、メイン ステータスバーのインセットは空になりますが、これらのインセットは空になりません。 |
|
ナビゲーション バーを説明するインセット。デバイスの左側、右側、下部に表示されるシステム UI バーで、タスクバーやナビゲーション アイコンを説明します。これらは、ユーザーが選択したナビゲーション方法やタスクバーの操作に基づいて、実行時に変更できます。 |
|
ナビゲーション バーが表示されるタイミングをインセットします。没入型全画面モードに移行したため、現在ナビゲーション バーが非表示になっている場合、メインのナビゲーション バーのインセットは空になりますが、これらのインセットは空になりません。 |
|
上部のタイトルバーなど、フリーフォームのウィンドウ内にある場合の、システム UI ウィンドウの装飾について説明するインセット。 |
|
字幕バーが表示されるタイミングのために字幕バーがインセットされます。字幕バーが現在非表示になっている場合、メインの字幕バーのインセットは空になりますが、空になりません。 |
|
ステータスバー、ナビゲーション バー、字幕バーを含むシステムバー インセットを結合したもの。 |
|
表示される場合のシステムバーのインセット。没入型全画面モードになったためにシステムバーが現在非表示になっている場合、メインのシステムバーのインセットは空になりますが、空になりません。 |
|
ソフトウェア キーボードが占有する下部のスペースの量を表すインセット。 |
|
現在のキーボード アニメーションの前にソフトウェア キーボードが占有していたスペースの量を表すインセット。 |
|
現在のキーボード アニメーションの後にソフトウェア キーボードが占有するスペースの量を表すインセット。 |
|
ナビゲーション UI に関する詳細情報を記述したインセットの一種で、「タップ」するスペースの大きさを指定します。アプリではなくシステムによって処理されます。ジェスチャー ナビゲーションを備えた透明なナビゲーション バーの場合、一部のアプリ要素はシステム ナビゲーション UI でタップできます。 |
|
表示されるときのタップ可能な要素のインセット。没入型全画面モードになったため、タップ可能な要素が現在非表示になっている場合、メインのタップ可能な要素のインセットは空になりますが、これらのインセットは空になりません。 |
|
システムがナビゲーションのジェスチャーをインターセプトするインセットの数を表すインセット。アプリは |
|
常にシステムによって処理され、 |
|
ディスプレイ カットアウト(ノッチまたはピンホール)と重ならないために必要な間隔を表すインセット。 |
|
ウォーターフォール ディスプレイの曲線領域を表すインセット。ウォーターフォール ディスプレイでは、画面の端に沿って湾曲した領域がデバイスの側面に沿って広がります。 |
これらの型は、3 つの「安全」なインセット型を使用すると、 曖昧:
これらの「安全」なインセット型は、コンテンツの属性に基づいて、さまざまな方法でコンテンツを保護します。 基盤となるプラットフォーム インセット:
WindowInsets.safeDrawing
を使用して、描画すべきでないコンテンツを保護する すべてのシステム UI に表示されます。これはインセットの最も一般的な使用方法です。 システム UI によって隠されるコンテンツの描画(部分的または あります)。WindowInsets.safeGestures
を使用すると、ジェスチャーでコンテンツを保護できます。この システム ジェスチャーとアプリのジェスチャー(下部の操作など)との競合を回避します。 スプレッドシート、カルーセル、ゲームなど)。WindowInsets.safeContent
を次の組み合わせとして使用するWindowInsets.safeDrawing
とWindowInsets.safeGestures
で、 コンテンツの視覚的な重なり、ジェスチャーの重なりはありません。
インセットのセットアップ
アプリがコンテンツを描画する場所を完全に制御できるようにするには、次のセットアップを行います。 できます。この手順を行わないと、アプリの背景が黒または単色で表示されることがあります。 ソフトウェア キーボードと同期してアニメーション化しない、などです。
- SDK 35 以降をターゲットとし、Android 15 以降でエッジ ツー エッジを適用します。アプリ システム UI の背後に表示されます。アプリの UI を調整するには、 使用します。
- 必要に応じて、次で
enableEdgeToEdge()
を呼び出します。Activity.onCreate()
: 以前のプラットフォームでのエッジ ツー エッジ対応を実現します。 Android のバージョン。 アクティビティの [
android:windowSoftInputMode="adjustResize"
] でAndroidManifest.xml
エントリ。この設定により、アプリはサイズを ソフトウェア IME のインセットとして使用し、コンテンツをパディングして配置するために使用できます。 IME の表示 / 非表示を切り替えることができます。<!-- in your AndroidManifest.xml file: --> <activity android:name=".ui.MainActivity" android:label="@string/app_name" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.MyApplication" android:exported="true">
Compose API
アクティビティがすべてのインセットの処理を制御できるようになると、Compose を使用できるようになります。 コンテンツが不明瞭でなく、操作可能な要素が隠れないようにする API システム UI と重なります。また、これらの API は、アプリのレイアウトを インセットの変更。
たとえば、これはインセットをコンテンツに適用する最も基本的な方法です。 必要があります。
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { Box(Modifier.safeDrawingPadding()) { // the rest of the app } } }
このスニペットでは、safeDrawing
ウィンドウ インセットを、
表示されなくなります。これにより操作可能な要素が
システム UI と重なっているため、どのアプリもバックグラウンドに
システム UI を調整し、エッジ ツー エッジのエフェクトを実現しています。Google Cloud の
インセットが適用される場所を画面ごとに微調整する必要があります。
またはコンポーネントごとに指定できます。
これらのインセット タイプはすべて、IME アニメーションで自動的にアニメーション化されます。 API 21 にバックポートされますこれらのインセットを使用するすべてのレイアウトは、 インセット値の変化に応じて自動的にアニメーション化することもできます。
これらのインセット型を使用してコンポーザブルを調整する主な方法は 2 つあります。 レイアウト: パディング修飾子とインセット サイズ修飾子
パディング修飾子
Modifier.windowInsetsPadding(windowInsets: WindowInsets)
は、
パディングとして指定されたウィンドウ インセットを、Modifier.padding
と同様に動作します。
たとえば、Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
は、
安全な描画インセットが、上下左右のパディングとして設定されています。
また、最も一般的なインセット タイプのための組み込みユーティリティ メソッドもいくつかあります。
そのようなメソッドの 1 つに Modifier.safeDrawingPadding()
があります。これは次と同等です。
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
。類似する
他のインセット タイプの修飾子です。
インセット サイズ修飾子
次の修飾子は、ウィンドウ インセットのサイズを コンポーネントをインセットのサイズにする必要があります。
windowInsets の開始側を幅として適用します( |
|
windowInsets の終端を幅として適用します( |
|
windowInsets の上側を高さとして適用します( |
|
|
windowInsets の下側を高さとして適用します( |
これらの修飾子は、Spacer
インセットのスペース:
LazyColumn( Modifier.imePadding() ) { // Other content item { Spacer( Modifier.windowInsetsBottomHeight( WindowInsets.systemBars ) ) } }
インセットの使用量
インセット パディング修飾子(windowInsetsPadding
や
safeDrawingPadding
など)は、インセットの一部を自動的に使用します。
パディングとして適用されます。コンポジション ツリーを深く掘り下げると、ネストされたインセット
パディング修飾子とインセット サイズ修飾子は、
インセットは、外側のインセット パディング修飾子によってすでに使用されているため、
インセットの同じ部分を複数回使用すると、
かなりのスペースを確保できます。
また、インセット サイズ修飾子では、インセットの同じ部分を複数回使用しないようにします。 インセットがすでに消費されている場合はただし 従来のプラットフォームでは インセット自体は使用しません。
そのため、パディング修飾子をネストすると、 パディングが調整されます。
前と同じ LazyColumn
の例を見ると、LazyColumn
は次のようになります。
imePadding
修飾子によってサイズ変更されます。LazyColumn
内では、最後のアイテムは次のようになります。
システムバーの底部の高さに合わせてサイズが変更されます。
LazyColumn( Modifier.imePadding() ) { // Other content item { Spacer( Modifier.windowInsetsBottomHeight( WindowInsets.systemBars ) ) } }
IME が閉じるとき、imePadding()
修飾子はパディングを適用しません。これは、次のためです。
IME には高さがありません。imePadding()
修飾子はパディングを適用していないため、
インセットは使用されず、Spacer
の高さは、
システムバーの下側に表示されています。
IME を開くと、IME のサイズに合わせて IME インセットがアニメーション表示され、
imePadding()
修飾子で、サイズ変更のために下パディングの適用が開始されました
LazyColumn
。imePadding()
修飾子の適用が開始されるため、
下部のパディングを増やすと、その量のインセットも消費されるようになります。したがって、
システムの間隔の一環として、Spacer
の高さが減少し始める
バーはすでに imePadding()
修飾子によって適用されています。完了後
imePadding()
修飾子がより大きな値の下パディングを適用しています
Spacer
の高さはゼロです。
IME が閉じると、変更が逆方向に行われ、Spacer
が
適用されている値が imePadding()
の値を下回ったら、高さ 0 から拡張します。
最終的に Spacer
がシステムバーの高さと
IME が完全にアニメーション化されると、システムバーの下部に表示されます。
TextField
を指定したエッジ ツー エッジの遅延列。この動作は、VPC ネットワーク間の
windowInsetsPadding
修飾子があり、他のいくつかの修飾子によって
できます。
Modifier.consumeWindowInsets(insets: WindowInsets)
もインセットを使用する
Modifier.windowInsetsPadding
と同じですが、
パディングとして消費されたインセットをこれは、インセットと組み合わせて使用すると便利です。
サイズ修飾子を使用して、特定の数のインセットを持つ兄弟姉妹に
使用済み:
Column(Modifier.verticalScroll(rememberScrollState())) { Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars)) Column( Modifier.consumeWindowInsets( WindowInsets.systemBars.only(WindowInsetsSides.Vertical) ) ) { // content Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime)) } Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.systemBars)) }
Modifier.consumeWindowInsets(paddingValues: PaddingValues)
は、
WindowInsets
引数を指定したバージョンに似ていますが、
任意の PaddingValues
を使用できます。この情報は
パディングやスペースが
インセット パディング修飾子(通常の Modifier.padding
や固定された高さなど)
スペーサー:
@OptIn(ExperimentalLayoutApi::class) Column(Modifier.padding(16.dp).consumeWindowInsets(PaddingValues(16.dp))) { // content Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime)) }
未加工のウィンドウ インセットが使用されずに必要な場合は、
WindowInsets
値を直接設定するか、WindowInsets.asPaddingValues()
を使用して以下を行います。
消費の影響を受けないインセットの PaddingValues
を返します。
ただし、以下の注意点を考慮し、ウィンドウ インセットのパディングを使用することをおすすめします。
可能な限り、修飾子とウィンドウ インセットのサイズ修飾子を使用します。
インセットと Jetpack Compose のフェーズ
Compose は、基盤となる AndroidX のコア API を使用して、インセットの更新とアニメーション化を行います。 基盤となるプラットフォーム API を使用してインセットを管理します。このプラットフォームのおかげで インセットは Jetpack のフェーズと特別な関係にあります。 Compose にあります。
インセットの値は、合成フェーズの後、かつ 説明します。つまり、コンポジション内のインセットの値を読み取ることで、 では通常、1 フレーム遅延したインセットの値が使用されます。組み込みの このページで説明する修飾子は、 インセットをレイアウト フェーズまで保持します。これにより、インセット値が 更新したときと同じフレームに配置されます。
WindowInsets
によるキーボード IME アニメーション
スクロール コンテナに Modifier.imeNestedScroll()
を適用して、
コンテナの一番下までスクロールすると、IME が自動的に閉じる。
class WindowInsetsExampleActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) setContent { MaterialTheme { MyScreen() } } } } @OptIn(ExperimentalLayoutApi::class) @Composable fun MyScreen() { Box { LazyColumn( modifier = Modifier .fillMaxSize() // fill the entire window .imePadding() // padding for the bottom for the IME .imeNestedScroll(), // scroll IME at the bottom content = { } ) FloatingActionButton( modifier = Modifier .align(Alignment.BottomEnd) .padding(16.dp) // normal 16dp of padding for FABs .navigationBarsPadding() // padding for navigation bar .imePadding(), // padding for when IME appears onClick = { } ) { Icon(imageVector = Icons.Filled.Add, contentDescription = "Add") } } }<ph type="x-smartling-placeholder">
![キーボードを表示するように UI 要素が上下方向にスクロールするアニメーション](https://developer.android.com/static/develop/ui/compose/images/interop-keyboard.gif?authuser=9&hl=ja)
マテリアル 3 コンポーネントのインセット サポート
使いやすさを考慮し、組み込みのマテリアル 3 コンポーザブルの多くは
(androidx.compose.material3
)
アプリ内へのコンポーザブルの配置方法に基づいて、インセット自体を処理する
マテリアル仕様に準拠しています。
コンポーザブルのインセット処理
以下は、マテリアル インフラストラクチャを インセットを自動的に処理します
アプリバー
TopAppBar
/SmallTopAppBar
/CenterAlignedTopAppBar
/MediumTopAppBar
/LargeTopAppBar
: システムバーの上と水平をパディングとして適用します。これは、ウィンドウの上部で使用されるためです。BottomAppBar
: システムバーの下部と水平側をパディングとして適用します。
コンテンツ コンテナ
ModalDrawerSheet
/DismissibleDrawerSheet
/PermanentDrawerSheet
(モーダル ナビゲーション ドロワー内のコンテンツ): コンテンツに垂直方向インセットと開始インセットを適用します。ModalBottomSheet
: 下部のインセットを適用します。NavigationBar
: 下インセットと水平インセットを適用します。NavigationRail
: 縦インセットと開始インセットを適用します。
Scaffold
デフォルトでは
Scaffold
では、インセットをパラメータ paddingValues
として使用して使用できます。
Scaffold
はインセットをコンテンツに適用しません。この責任はお客様にあります。
たとえば、Scaffold
内で LazyColumn
を使用してこれらのインセットを使用するには、次のようにします。
Scaffold { innerPadding -> // innerPadding contains inset information for you to use and apply LazyColumn( // consume insets as scaffold doesn't do it by default modifier = Modifier.consumeWindowInsets(innerPadding), contentPadding = innerPadding ) { items(count = 100) { Box( Modifier .fillMaxWidth() .height(50.dp) .background(colors[it % colors.size]) ) } } }
デフォルトのインセットをオーバーライドする
コンポーザブルに渡される windowInsets
パラメータは、次のように変更できます。
コンポーズ可能な関数の動作を設定しますこのパラメータは、Pod とコンテナ内の
代わりに適用するようにウィンドウ インセットを使用するか、空のインスタンスを渡して無効にします。
WindowInsets(0, 0, 0, 0)
。
たとえば、Terraform でインセット処理を無効にするには、
LargeTopAppBar
windowInsets
パラメータを空のインスタンスに設定します。
LargeTopAppBar( windowInsets = WindowInsets(0, 0, 0, 0), title = { Text("Hi") } )
View システム インセットとの相互運用
画面に View と View の両方がある場合は、デフォルトのインセットのオーバーライドが必要になることがあります。 同じ階層内のコードを作成する。この場合は、Terraform で明示的に どちらでインセットを使用し、どちらが無視するかを選択します。
たとえば、最も外側のレイアウトが Android のビュー レイアウトの場合、
View システムでインセットを使用し、Compose では無視します。
または、最も外側のレイアウトがコンポーザブルの場合、
Compose のインセットを使用し、それに応じて AndroidView
コンポーザブルをパディングします。
デフォルトでは、各 ComposeView
は
WindowInsetsCompat
レベルの消費。このデフォルトの動作を変更するには、
ComposeView.consumeWindowInsets
宛先: false
。
リソース
- Now in Android: Kotlin と Jetpack Compose のみで構築された、完全に機能する Android アプリです。
- Android 15 でエッジ ツー エッジの適用を処理する - Android 15 のエッジ ツー エッジの適用について説明する Codelab
- Android アプリのエクスペリエンスを向上させる 3 つのポイント: Edge to Edge、Predictive Back、Glance - Android 15 のエッジ ツー エッジの適用について説明する YouTube 動画
- エッジ ツー エッジとインセット |Compose のヒント - インセットを処理して端から端まで描画する方法を紹介する YouTube 動画
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- マテリアル コンポーネントとレイアウト
CoordinatorLayout
を Compose に移行する- その他の考慮事項