ComposeのWindowInsets

Jun 8, 2022

Composeでの WindowInsets の使用方法についてまとめます。

これまでは accompanist/insets として提供されていましが、こちらがDeprecatedとなり、Compose 1.2から公式に WindowInsets の対応が入っています。

WindowInsets はedge-to-edgeの対応で使います。edge-to-edgeについては以下のドキュメントを確認してみてください。

また、 WindowInsets はIMEアニメーションでも使用します。IMEアニメーションについては以下のドキュメントを確認してください。

準備

まずThemeは以下のように設定します。

メインのActivityでは以下のコードを実行しておきます。

WindowCompat.setDecorFitsSystemWindows(window, false)

WindowInsetsは Modifier の拡張関数として、 windowInsetsPadding があるので、こちらを使用していきます。これは引数に指定したWindowInsetsのスペースを確保します。

この例だと、Boxの中にBoxが配置してあり、中に配置してるBoxにPaddingが設定されます。

windowInsetsPadding の引数にはどのスペースを設定するかを指定します。

いくつかあるのですが、よく使うものだと、 safeDrawing 、safeGestures 、 safeContent などがあります。

safeXXXっていうのを使えばほとんどケースを対応できるかと思います。以下に実行例を示しておきます。

基本は safeDrawing を使いつつ、ジェスチャなどの処理が入る場合にその他を使用する感じなるかなと思います。

また、これらをもっとシンプルに書けるAPIもあります。

safeDrawingPadding や safeGesturesPadding などを使えばシンプルに書けます。

例えば、 TopAppBar に上のスペースだけWindowInsetsを適用したい場合は、以下のように実装することで対応可能です。

only を使って WindowInsetsSides で位置を指定すれば、そこだけのスペースが適用されます。

また、 + を使うことで、複数の位置を指定することも可能です。以下の例は上と横のスペースが適用されます。

他にもWindowInsetsを PaddingValues として取得することも可能です。

また、IMEアニメーションも可能です。IMEアニメーションについてはドキュメントがあるので、そちらを確認してください。