Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mori-atsushi/insetsx
WindowInsets utility for compose multiplatform
https://github.com/mori-atsushi/insetsx
compose-multiplatform jetpack-compose kotlin kotlin-multiplatform
Last synced: 3 months ago
JSON representation
WindowInsets utility for compose multiplatform
- Host: GitHub
- URL: https://github.com/mori-atsushi/insetsx
- Owner: mori-atsushi
- License: apache-2.0
- Created: 2022-10-08T13:26:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-24T20:37:19.000Z (4 months ago)
- Last Synced: 2024-07-24T23:21:58.432Z (4 months ago)
- Topics: compose-multiplatform, jetpack-compose, kotlin, kotlin-multiplatform
- Language: Kotlin
- Homepage:
- Size: 479 KB
- Stars: 221
- Watchers: 2
- Forks: 2
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- kmp-awesome - InsetsX
- awesome - InsetsX
README
## InsetsX [🚧 Work in progress 🚧]
[](https://kotlinlang.org/docs/multiplatform.html)
[](https://mvnrepository.com/artifact/com.moriatsushi.insetsx/insetsx)
[](https://github.com/mori-atsushi/insetsx/blob/main/LICENSE)
InsetsX provides a [WindowInsets](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets) utility for [Compose Multiplatform](https://www.jetbrains.com/lp/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
kotlin {
/* ... */
sourceSets {
val commonMain by getting {
dependencies {
implementation("com.moriatsushi.insetsx:insetsx:0.1.0-alpha10")
}
}
}
}
```
### Android
1. (option) If you are using insets for IME support, set the activity's `windowSoftInputMode` to `adjustResize` in your AndroidManifest.xml file.
```xml
```
2. Call `WindowCompat.setDecorFitsSystemWindows()` with `false` in the `onCreate` method of the activity .
```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
}
```
Detail: [Lay out your app within window insets](https://developer.android.com/develop/ui/views/layout/insets)
### iOS
1. (option) If you want to use the `WindowInsetsController`, use `WindowInsetsUIViewController` instead of `ComposeUIViewController`.
```kotlin
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.
```kotlin
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.
```kotlin
@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.
```kotlin
@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)
}
}
```