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

WindowInsetsRulers について

WindowInsets は、システム UI によって部分的にまたは完全に隠される画面領域を処理するための Jetpack Compose の標準 API です。ステータスバー、ナビゲーションバー、画面キーボードなどが含まれます。代わりに、事前定義された WindowInsetsRulers（SafeDrawing など）を Modifier.fitInside または Modifier.fitOutside に渡して、コンテンツをシステムバーやディスプレイカットアウトに合わせたり、カスタム WindowInsetsRulers を作成したりすることもできます。

`WindowInsetsRulers` のメリット

消費の複雑さを回避: レイアウトの配置フェーズで動作します。つまり、インセット消費チェーンを完全にバイパスし、親レイアウトが何をしたかに関係なく、システムバーとディスプレイカットアウトの正しい絶対位置を常に提供できます。Modifier.fitInside メソッドまたは Modifier.fitOutside メソッドを使用すると、祖先 Composable がインセットを誤って消費している場合の問題を修正するのに役立ちます。
システムバーを簡単に回避: アプリのコンテンツがシステムバーやディスプレイカットアウトを回避するのに役立ちます。WindowInsets を直接使用するよりも簡単です。
高度なカスタマイズ性: デベロッパーは、コンテンツをカスタムルーラーに合わせたり、カスタムレイアウトでレイアウトを正確に制御したりできます。

`WindowInsetsRulers` のデメリット

測定には使用できません: 配置フェーズで動作するため、提供される位置情報は、それ以前の測定フェーズでは使用できません。

コンテンツを Modifier メソッドに合わせる

Modifier.fitInside を使用すると、アプリはコンテンツをシステムバーに合わせ、カットアウトを表示できます。WindowInsets の代わりに使用できます。Modifier.fitOutside は通常、Modifier.fitInside の逆関数です。

たとえば、アプリのコンテンツがシステムバーとディスプレイカットアウトを避けていることを確認するには、fitInside(WindowInsetsRulers.safeDrawing.current) を使用します。

@Composable
fun FitInsideDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            // Or DisplayCutout, Ime, NavigationBars, StatusBar, etc...
            .fitInside(WindowInsetsRulers.SafeDrawing.current)
    )
}InsetsSnippets.kt

次の表は、Modifier.fitInside または Modifier.fitOutside のいずれかを含む事前定義されたルーラーを使用した場合のアプリコンテンツの表示例を示しています。

事前定義されたルーラーの種類	`Modifier.fitInside`	`Modifier.fitOutside`
`DisplayCutout`
`Ime`		なし
`NavigationBars`
`SafeDrawing`		該当なし（代わりに `StatusBar`、`CaptionBar`、`NavigationBar` を使用）
`StatusBar`

Modifier.fitInside と Modifier.fitOutside を使用するには、コンポーザブルが制約されている必要があります。つまり、Modifier.size や Modifier.fillMaxSize などの修飾子を定義する必要があります。

SafeDrawing と SystemBars の Modifier.fitOutside などの一部のルールでは、複数のルールが返されます。この場合、Android は左、上、右、下のいずれかのルーラーを使用して Composable を配置します。

Modifier.fitInside で IME を回避する

Modifier.fitInside を含む IME で下部要素を処理するには、NavigationBar と Ime の最も内側の値を取得する RectRuler を渡します。

@Composable
fun FitInsideWithImeDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .fitInside(
                RectRulers.innermostOf(
                    WindowInsetsRulers.NavigationBars.current,
                    WindowInsetsRulers.Ime.current
                )
            )
    ) {
        TextField(
            value = "Demo IME Insets",
            onValueChange = {},
            modifier = modifier.align(Alignment.BottomStart).fillMaxWidth()
        )
    }
}InsetsSnippets.kt

Modifier.fitInside でステータスバーとキャプションバーを回避する

同様に、最上位の要素を確認してステータスバーとキャプションバーを Modifier.fitInsider とともに回避するには、StatusBars と CaptionBar の最も内側の値を取得する RectRuler を渡します。

@Composable
fun FitInsideWithStatusAndCaptionBarDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .fitInside(
                RectRulers.innermostOf(
                    WindowInsetsRulers.StatusBars.current,
                    WindowInsetsRulers.CaptionBar.current
                )
            )
    )
}InsetsSnippets.kt

カスタム `WindowInsetsRulers` を作成する

コンテンツをカスタムルーラーに沿って配置できます。たとえば、親コンポーザブルがインセットを適切に処理せず、ダウンストリームの子でパディングの問題が発生するユースケースについて考えてみましょう。この問題は、Modifier.fitInside を使用するなど、他の方法でも解決できますが、次の例と動画に示すように、親アップストリームで問題を修正することなく、子コンポーザブルを正確に配置するカスタムルーラーを作成することもできます。

@Composable
fun WindowInsetsRulersDemo(modifier: Modifier) {
    Box(
        contentAlignment = BottomCenter,
        modifier = modifier
            .fillMaxSize()
            // The mistake that causes issues downstream, as .padding doesn't consume insets.
            // While it's correct to instead use .windowInsetsPadding(WindowInsets.navigationBars),
            // assume it's difficult to identify this issue to see how WindowInsetsRulers can help.
            .padding(WindowInsets.navigationBars.asPaddingValues())
    ) {
        TextField(
            value = "Demo IME Insets",
            onValueChange = {},
            modifier = modifier
                // Use alignToSafeDrawing() instead of .imePadding() to precisely place this child
                // Composable without having to fix the parent upstream.
                .alignToSafeDrawing()

            // .imePadding()
            // .fillMaxWidth()
        )
    }
}

fun Modifier.alignToSafeDrawing(): Modifier {
    return layout { measurable, constraints ->
        if (constraints.hasBoundedWidth && constraints.hasBoundedHeight) {
            val placeable = measurable.measure(constraints)
            val width = placeable.width
            val height = placeable.height
            layout(width, height) {
                val bottom = WindowInsetsRulers.SafeDrawing.current.bottom
                    .current(0f).roundToInt() - height
                val right = WindowInsetsRulers.SafeDrawing.current.right
                    .current(0f).roundToInt()
                val left = WindowInsetsRulers.SafeDrawing.current.left
                    .current(0f).roundToInt()
                measurable.measure(Constraints.fixed(right - left, height))
                    .place(left, bottom)
            }
        } else {
            val placeable = measurable.measure(constraints)
            layout(placeable.width, placeable.height) {
                placeable.place(0, 0)
            }
        }
    }
}InsetsSnippets.kt

次の動画は、左側の画像でアップストリームの親が原因で発生した IME インセットの消費に関する問題の例と、右側の画像でカスタムルーラーを使用して問題を解決する方法を示しています。TextField コンポーザブルの下に余分なパディングが表示されています。これは、ナビゲーションバーのパディングが親によって消費されなかったためです。前述のコードサンプルで示されているように、カスタムルーラーを使用して、右側の画像内の正しい位置に子を配置します。

親が制約されていることを確認する

WindowInsetsRulers を安全に使用するには、親が有効な制約を提供していることを確認してください。親はサイズが定義されている必要があり、WindowInsetsRulers を使用する子のサイズに依存することはできません。親コンポーザブルで fillMaxSize または他のサイズ変更子を使用します。

同様に、WindowInsetsRulers を使用するコンポーザブルを verticalScroll などのスクロールコンテナ内に配置すると、スクロールコンテナが上限のない高さの制約を提供するため、ルーラーのロジックと互換性がなく、予期しない動作が発生する可能性があります。

システムバーの保護について

カットアウトについて

WindowInsetsRulers について コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

WindowInsetsRulers のメリット

WindowInsetsRulers のデメリット