WindowInsetsRulers について

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

WindowInsetsRulers のメリット

• 消費の複雑さを回避: レイアウトの配置フェーズ で動作します。つまり、インセット消費チェーンを完全にバイパスし、親レイアウトが何を行ったかに関係なく、システムバーとディスプレイ カットアウトの正しい絶対位置を常に提供できます。祖先のコンポーザブルがインセットを誤って消費している場合に、Modifier.fitInside メソッドまたは Modifier.fitOutside メソッドを使用すると、問題を解決できます。
• システムバーを簡単に回避: アプリのコンテンツがシステムバー やディスプレイ カットアウトを回避するのに役立ちます。 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 は左、上、右、下のいずれかのルーラーを使用してコンポーザブルを配置します。

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.fitInside で上部の要素がステータスバーとキャプション バーを回避していることを確認するには、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 などのスクロール コンテナ内に配置すると、スクロール コンテナがルーラーのロジックと互換性のない無制限の高さの制約を提供するため、予期しない動作が発生する可能性があります。