Recently the mood is quite not quiet, always unable to concentrate on a good thing. Simply write an essay to capture the focus

Material Design-style top and bottom navigation bars

For the Material Design style of Compose, our approach is as follows:

1. Scafoold is used as the top level of the page, with Topbar and BottomBar in Scafoold as the top navigation bar and bottom navigation bar respectively.

2, call WindowCompat. SetDecorFitsSystemWindows (window, false) method to make our layout is beyond the status bar, and the location of the navigation bar at the bottom of the 3, use ProvideWindowInsets package layout, 4. Manually handle the top and bottom navigation bars to make the page adapt to the screen

Interface design

TopBar design

implementation

Window, because using WindowCompat. SetDecorFitsSystemWindows (false) is set to the top of the page layout after the above the status bar, because we need to fill the status bar with a Spacer, let our layout look normal

code

The following is the encapsulated status bar method

@Composable
fun TopBarView(title: String, callback: () -> Unit) {
    Column {
        Spacer(
            modifier = Modifier
                .statusBarsHeight()// Set the status bar height
                .fillMaxWidth()
        )
        TopAppBar(title = {
            Text(title)
        }, navigationIcon = {
            IconButton(onClick = {
                callback()
            }) {
                Icon(Icons.Filled.ArrowBack, "")}})}}Copy the code

Handles UI state before and after the status bar

Processing before:

After the treatment:

The conclusion is that the occlusion of the status bar is solved after our processing

BottomBar design

implementation

Because the bottom navigation bar is pushed to the bottom after wrapping with the ProvideWindowInsets, a Spacer with the height of the bottom navigation bar needs to be filled.

code

bottomBar = {
            Column {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(60.dp)
                        .background(statusbarColor),
                    horizontalArrangement = Arrangement.SpaceAround,
                    verticalAlignment = Alignment.CenterVertically
                ){
                    Text(text = "Home page")
                    Text(text = "Address book")
                    Text(text = "Moments of friends")
                    Text(text = "I")

                }
                Spacer(modifier = Modifier.navigationBarsHeight())
            }
        }
Copy the code

Handles UI state before and after the status bar

Processing before:

After the treatment:

The conclusion is that the occlusion problem of the bottom navigation bar is solved after our processing

Status bar and bottom navigation bar color processing

Status bar and bottom navigation bar color Settings

Rely on

   implementation "Com. Google. Accompanist: accompanist - insets: 0.16.0"
    implementation "Com. Google. Accompanist: accompanist - systemuicontroller: 0.16.0"
Copy the code

code

 rememberSystemUiController().run {
                    setStatusBarColor(statusbarColor, false)
                    setSystemBarsColor(statusbarColor, false)
                    setNavigationBarColor(statusbarColor, false)}Copy the code

The overall effect

We noticed that the color of the status bar and the bottom navigation bar had changed

How do I handle areas where the content section is outside the bottom navigation bar

Using WindowCompat. SetDecorFitsSystemWindows (window, false) after processing a page, Scafoold content areas are below the top to the bottom of the navigation bar, also requires us to deal with

Here is the code and effects before and after processing

Before processing

code

LazyColumn() {
            items(30) { index ->
                Box(
                    modifier = Modifier
                        .padding(top = 10.dp)
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(Color.Green),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = index.toString())
                }
            }
        }
Copy the code

The effect

Only item 27 is shown here. Item 28 and 29 are not shown, so it needs to be processed

After processing

code

 {padding->
        LazyColumn(Modifier.padding(bottom = padding.calculateBottomPadding())) {// This will calculate the distance from the bottom, then set the padding of the distance to the bottom
            items(30) { index ->
                Box(
                    modifier = Modifier
                        .padding(top = 10.dp)
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(Color.Green),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = index.toString())
                }
            }
        }

    }
Copy the code

The effect

Item 29 is displayed after correction

Code: github.com/ananananzhu…