This is the ninth day for me to participate in the Preface Challenge, and it provides a first-confidence confidence for the learners

There is currently a Chinese manual project for Jetpack Compose, which aims to help developers better understand and master the Compose framework.

This article is translated and written by @Yidong. It has been published in the handbook. Please refer to it.

Please follow the wechat official account Jetpack Compose Museum for more information about Compose technology.

An overview of the

The System UI Controller provides an easy-to-use method to help developers update the System bar color in Jetpack Compose.

usage

To control the System UI in the Compose layout, the developer must obtain the SystemUiController object. Through the library provide rememberSystemUiController function, developers will be able to get the current operating system (currently only supports Android) SystemUiController object.

Developers can change the color of the system bar (status bar and navigation bar on Android) in the layout as follows:

// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight

SideEffect {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setSystemBarsColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    // setStatusBarsColor() and setNavigationBarsColor() also exist
}
Copy the code

Status bar icon color

The library handles API version differences automatically when used on the Android platform. For example, Android native support for dark ICONS in the status bar has only been available since API 23, so for older devices, the library uses Scrim to automatically adjust the color of the status bar to maintain overall contrast:

Similarly, since Android native support for dark ICONS in the navigation bar has been around since API 26, the same approach will be applied to older devices.

Adjust Scrim logic

If you’re not happy with the color SystemUiController automatically handles, you can do it yourself:

systemUiController.setStatusBarsColor(
    color = Color.Transparent,
    darkIcons = true
) { requestedColor ->
    // TODO: return a darkened color to be used when the system doesn't
    // natively support dark icons
}
Copy the code

The sample

The transparent system bar (status bar and navigation bar on Android platform) in the Insets example is implemented by SystemUiController, please refer to it yourself if necessary.

download

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
}
Copy the code

Each version can be found in the snapshot repository and updated with each commit.