このページは Cloud Translation API によって翻訳されました。

Compose のウィンドウインセット

Android プラットフォームは、ステータスバーとナビゲーションバーがあります。このシステム UI は、指定した環境またはユーザーが使用しているアプリ。

WindowInsets は、システムに関する情報です。アプリが正しい領域に描画され、UI が隠れないようにする UI 確認できます。

エッジツーエッジでシステムバーの背後に描画する — **図 1.** エッジツーエッジでシステムバーの背後に描画。

Android 14（API レベル 34）以前では、アプリの UI が下に描画されないシステムバーとディスプレイカットアウトがデフォルトになりました。

Android 15（API レベル 35）以降では、アプリはシステムの下に描画されます。アプリが SDK 35 をターゲットとすると、バーとディスプレイカットアウトが表示されます。その結果シームレスなユーザーエクスペリエンスを実現し、アプリで使用可能なウィンドウスペースを確保できます。

システム UI の背後にあるコンテンツを表示することを「エッジツーエッジ」と呼びます。対象ページでは、さまざまなタイプのインセット、エッジツーエッジへの対応方法、インセット API を使用して UI をアニメーション化し、アプリのコンテンツが確実に表示されるようにする方法を学べます。システム UI 要素によって隠されません。

インセットの基礎

アプリをエッジツーエッジ対応にする場合、重要なコンテンツやシステム UI によって不明瞭にならないようにします。たとえばあるボタンがナビゲーションバーの後ろに配置すると、ユーザーがクリックできない場合があります。

システム UI のサイズと配置場所に関する情報を指定する インセット

システム UI の各部分には、それに対応するタイプのインセットがあり、そのサイズと配置場所を指定します。たとえばステータスバーのインセットではナビゲーションバーのインセットを使用すると、ナビゲーションバーのサイズと位置。各タイプのインセットはピクセルサイズ: 上、左、右、下。これらのディメンションはシステム UI は、アプリウィンドウの対応する側から拡張されます。避けるべきことそのタイプのシステム UI と重なるため、アプリの UI をそのタイプのシステム UI に挿入する必要があります。します。

これらの Android の組み込みインセットタイプは、WindowInsets で使用できます。

`WindowInsets.statusBars`	ステータスバーを説明するインセット。これらは、通知アイコンやその他のインジケーターを含む上部のシステム UI バーです。
`WindowInsets.statusBarsIgnoringVisibility`	ステータスバーが表示されるタイミングをインセットします。没入型全画面モードに移行したため、現在ステータスバーが非表示になっている場合、メインステータスバーのインセットは空になりますが、これらのインセットは空になりません。
`WindowInsets.navigationBars`	ナビゲーションバーを説明するインセット。デバイスの左側、右側、下部に表示されるシステム UI バーで、タスクバーやナビゲーションアイコンを説明します。これらは、ユーザーが選択したナビゲーション方法やタスクバーの操作に基づいて、実行時に変更できます。
`WindowInsets.navigationBarsIgnoringVisibility`	ナビゲーションバーが表示されるタイミングをインセットします。没入型全画面モードに移行したため、現在ナビゲーションバーが非表示になっている場合、メインのナビゲーションバーのインセットは空になりますが、これらのインセットは空になりません。
`WindowInsets.captionBar`	上部のタイトルバーなど、フリーフォームのウィンドウ内にある場合の、システム UI ウィンドウの装飾について説明するインセット。
`WindowInsets.captionBarIgnoringVisibility`	字幕バーが表示されるタイミングのために字幕バーがインセットされます。字幕バーが現在非表示になっている場合、メインの字幕バーのインセットは空になりますが、空になりません。
`WindowInsets.systemBars`	ステータスバー、ナビゲーションバー、字幕バーを含むシステムバーインセットを結合したもの。
`WindowInsets.systemBarsIgnoringVisibility`	表示される場合のシステムバーのインセット。没入型全画面モードになったためにシステムバーが現在非表示になっている場合、メインのシステムバーのインセットは空になりますが、空になりません。
`WindowInsets.ime`	ソフトウェアキーボードが占有する下部のスペースの量を表すインセット。
`WindowInsets.imeAnimationSource`	現在のキーボードアニメーションの前にソフトウェアキーボードが占有していたスペースの量を表すインセット。
`WindowInsets.imeAnimationTarget`	現在のキーボードアニメーションの後にソフトウェアキーボードが占有するスペースの量を表すインセット。
`WindowInsets.tappableElement`	ナビゲーション UI に関する詳細情報を記述したインセットの一種で、「タップ」するスペースの大きさを指定します。アプリではなくシステムによって処理されます。ジェスチャーナビゲーションを備えた透明なナビゲーションバーの場合、一部のアプリ要素はシステムナビゲーション UI でタップできます。
`WindowInsets.tappableElementIgnoringVisibility`	表示されるときのタップ可能な要素のインセット。没入型全画面モードになったため、タップ可能な要素が現在非表示になっている場合、メインのタップ可能な要素のインセットは空になりますが、これらのインセットは空になりません。
`WindowInsets.systemGestures`	システムがナビゲーションのジェスチャーをインターセプトするインセットの数を表すインセット。アプリは `Modifier.systemGestureExclusion` を使用して、限られた量のジェスチャーの処理を手動で指定できます。
`WindowInsets.mandatorySystemGestures`	常にシステムによって処理され、`Modifier.systemGestureExclusion` で無効にできないシステムジェスチャーのサブセットです。
`WindowInsets.displayCutout`	ディスプレイカットアウト（ノッチまたはピンホール）と重ならないために必要な間隔を表すインセット。
`WindowInsets.waterfall`	ウォーターフォールディスプレイの曲線領域を表すインセット。ウォーターフォールディスプレイでは、画面の端に沿って湾曲した領域がデバイスの側面に沿って広がります。

これらの型は、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 の表示 / 非表示を切り替えることができます。
```

<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
        }
    }
}InsetsSnippets.kt

このスニペットでは、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)。類似する他のインセットタイプの修飾子です。

インセットサイズ修飾子

次の修飾子は、ウィンドウインセットのサイズをコンポーネントをインセットのサイズにする必要があります。

`Modifier.windowInsetsStartWidth(windowInsets: WindowInsets)`	windowInsets の開始側を幅として適用します（`Modifier.width` など）。
`Modifier.windowInsetsEndWidth(windowInsets: WindowInsets)`	windowInsets の終端を幅として適用します（`Modifier.width` など）。
`Modifier.windowInsetsTopHeight(windowInsets: WindowInsets)`	windowInsets の上側を高さとして適用します（`Modifier.height` など）。
`Modifier.windowInsetsBottomHeight(windowInsets: WindowInsets)`	windowInsets の下側を高さとして適用します（`Modifier.height` など）。

これらの修飾子は、Spacer インセットのスペース:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}InsetsSnippets.kt

インセットの使用量

インセットパディング修飾子（windowInsetsPadding や safeDrawingPadding など）は、インセットの一部を自動的に使用します。パディングとして適用されます。コンポジションツリーを深く掘り下げると、ネストされたインセットパディング修飾子とインセットサイズ修飾子は、インセットは、外側のインセットパディング修飾子によってすでに使用されているため、インセットの同じ部分を複数回使用すると、かなりのスペースを確保できます。

また、インセットサイズ修飾子では、インセットの同じ部分を複数回使用しないようにします。インセットがすでに消費されている場合はただし従来のプラットフォームではインセット自体は使用しません。

そのため、パディング修飾子をネストすると、パディングが調整されます。

前と同じ LazyColumn の例を見ると、LazyColumn は次のようになります。 imePadding 修飾子によってサイズ変更されます。LazyColumn 内では、最後のアイテムは次のようになります。システムバーの底部の高さに合わせてサイズが変更されます。

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}InsetsSnippets.kt

IME が閉じるとき、imePadding() 修飾子はパディングを適用しません。これは、次のためです。 IME には高さがありません。imePadding() 修飾子はパディングを適用していないため、インセットは使用されず、Spacer の高さは、システムバーの下側に表示されています。

IME を開くと、IME のサイズに合わせて IME インセットがアニメーション表示され、 imePadding() 修飾子で、サイズ変更のために下パディングの適用が開始されました LazyColumn。imePadding() 修飾子の適用が開始されるため、下部のパディングを増やすと、その量のインセットも消費されるようになります。したがって、システムの間隔の一環として、Spacer の高さが減少し始めるバーはすでに imePadding() 修飾子によって適用されています。完了後 imePadding() 修飾子がより大きな値の下パディングを適用しています Spacer の高さはゼロです。

IME が閉じると、変更が逆方向に行われ、Spacer が適用されている値が imePadding() の値を下回ったら、高さ 0 から拡張します。最終的に Spacer がシステムバーの高さと IME が完全にアニメーション化されると、システムバーの下部に表示されます。

</ph>

をご覧ください。

図 2.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))
}InsetsSnippets.kt

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))
}InsetsSnippets.kt

未加工のウィンドウインセットが使用されずに必要な場合は、 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")
        }
    }
}MigrationOtherConsiderationsSnippets.kt

キーボードを表示するように UI 要素が上下方向にスクロールするアニメーション — **図 3.**IME アニメーション

マテリアル 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])
            )
        }
    }
}InsetsSnippets.kt

デフォルトのインセットをオーバーライドする

コンポーザブルに渡される windowInsets パラメータは、次のように変更できます。コンポーズ可能な関数の動作を設定しますこのパラメータは、Pod とコンテナ内の代わりに適用するようにウィンドウインセットを使用するか、空のインスタンスを渡して無効にします。 WindowInsets(0, 0, 0, 0)。

たとえば、Terraform でインセット処理を無効にするには、 LargeTopAppBar windowInsets パラメータを空のインスタンスに設定します。

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)InsetsSnippets.kt

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 に移行する
その他の考慮事項