insetsx
Introduction: WindowInsets utility for compose multiplatform
Tags:
InsetsX provides a WindowInsets utility for Compose Multiplatform.
The goal is to have a unified interface for handling WindowInsets across iOS and Android.
Once the official library supports WindowInsets, this library will be archived.
Setup
To use InsetsX, add the following dependency:
kotlin {
/* ... */
sourceSets {
val commonMain by getting {
dependencies {
implementation("com.moriatsushi.insetsx:insetsx:0.1.0-alpha10")
}
}
}
}
Android
- (option) If you are using insets for IME support, set the activity's
windowSoftInputMode
toadjustResize
in your AndroidManifest.xml file.
<activity
android:name=".MyActivity"
android:windowSoftInputMode="adjustResize">
</activity>
- Call
WindowCompat.setDecorFitsSystemWindows()
withfalse
in theonCreate
method of the activity .
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
}
Detail: Lay out your app within window insets
iOS
- (option) If you want to use the
WindowInsetsController
, useWindowInsetsUIViewController
instead ofComposeUIViewController
.
fun MainUIViewController(): UIViewController {
return WindowInsetsUIViewController {
MyApp()
}
}
How to use
WindowInsets
This works much like Android's WindowInsets. Please note that the package name is different.
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.moriatsushi.insetsx.systemBars
import com.moriatsushi.insetsx.systemBarsPadding
@Composable
fun Sample() {
val modifier1 = Modifier
.windowInsetsPadding(WindowInsets.safeDrawing)
val modifier2 = Modifier
.safeDrawingPadding()
}
API | android | ios |
---|---|---|
WindowInsets.safeArea | system bars + display cutouts | SafeArea |
WindowInsets.systemBars | status bar + navigation bar | home indicator + status bar |
WindowInsets.navigationBars | navigation bar | home indicator |
WindowInsets.statusBars | status bar | status bar |
WindowInsets.ime *1 | software keyboard | software keyboard |
WindowInsets.safeDrawing *1 | system bars + software keyboard | SafeArea + software keyboard |
(Modifier) | ||
Modifier.safeAreaPadding() | system bars + display cutouts | SafeArea |
Modifier.systemBarsPadding() | status bar + navigation bar | home indicator + status bar |
Modifier.navigationBarsPadding() | navigation bar | home indicator |
Modifier.statusBarsPadding() | status bar | status bar |
Modifier.imePadding() *1 | software keyboard | software keyboard |
Modifier.safeDrawingPadding() *1 | system bars + software keyboard | SafeArea + software keyboard |
*1 is experimental
WindowInsetsController
WindowInsetsController
can be used to change colors of system bars.
@Composable
fun Sample() {
val windowInsetsController = rememberWindowInsetsController()
LaunchedEffect(Unit) {
// The status bars icon + content will change to a light color
windowInsetsController?.setStatusBarContentColor(dark = false)
// The navigation bars icons will change to a light color (android only)
windowInsetsController?.setNavigationBarsContentColor(dark = false)
}
}
You can also hide WindowInsets.
@Composable
fun Sample() {
val windowInsetsController = rememberWindowInsetsController()
LaunchedEffect(Unit) {
// Hide the status bars
windowInsetsController?.setIsStatusBarsVisible(false)
// Hide the navigation bars
windowInsetsController?.setIsNavigationBarsVisible(false)
// Change an options for behavior when system bars are hidden
windowInsetsController?.setSystemBarsBehavior(SystemBarsBehavior.Immersive)
}
}