Feat(UI): Automatically hide app bar
Automatically hide top and bottom app bars when page scrolls
This commit is contained in:
@@ -11,6 +11,8 @@ import androidx.compose.foundation.layout.padding
|
|||||||
import androidx.compose.foundation.layout.safeDrawing
|
import androidx.compose.foundation.layout.safeDrawing
|
||||||
import androidx.compose.foundation.layout.safeDrawingPadding
|
import androidx.compose.foundation.layout.safeDrawingPadding
|
||||||
import androidx.compose.foundation.layout.windowInsetsPadding
|
import androidx.compose.foundation.layout.windowInsetsPadding
|
||||||
|
import androidx.compose.material3.BottomAppBar
|
||||||
|
import androidx.compose.material3.BottomAppBarDefaults
|
||||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
@@ -30,6 +32,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
|
|||||||
import androidx.compose.runtime.setValue
|
import androidx.compose.runtime.setValue
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.input.nestedscroll.nestedScroll
|
||||||
import androidx.compose.ui.res.stringResource
|
import androidx.compose.ui.res.stringResource
|
||||||
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
||||||
import androidx.navigation.NavDestination
|
import androidx.navigation.NavDestination
|
||||||
@@ -73,6 +76,9 @@ fun OxygenApp(appState: OxygenAppState) {
|
|||||||
|
|
||||||
val noConnectMessage = stringResource(R.string.no_connect)
|
val noConnectMessage = stringResource(R.string.no_connect)
|
||||||
|
|
||||||
|
val topAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
|
||||||
|
val bottomAppBarScrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
|
||||||
|
|
||||||
LaunchedEffect(isOffline) {
|
LaunchedEffect(isOffline) {
|
||||||
if (isOffline) {
|
if (isOffline) {
|
||||||
snackbarHostState.showSnackbar(
|
snackbarHostState.showSnackbar(
|
||||||
@@ -89,12 +95,18 @@ fun OxygenApp(appState: OxygenAppState) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Scaffold(
|
Scaffold(
|
||||||
|
modifier = Modifier
|
||||||
|
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection)
|
||||||
|
.nestedScroll(bottomAppBarScrollBehavior.nestedScrollConnection),
|
||||||
containerColor = Color.Transparent,
|
containerColor = Color.Transparent,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
contentWindowInsets = WindowInsets(0, 0, 0, 0),
|
contentWindowInsets = WindowInsets(0, 0, 0, 0),
|
||||||
snackbarHost = { SnackbarHost(snackbarHostState) },
|
snackbarHost = { SnackbarHost(snackbarHostState) },
|
||||||
bottomBar = {
|
bottomBar = {
|
||||||
if (appState.shouldShowBottomBar && destination != null) {
|
if (appState.shouldShowBottomBar && destination != null) {
|
||||||
|
BottomAppBar(
|
||||||
|
scrollBehavior = bottomAppBarScrollBehavior
|
||||||
|
) {
|
||||||
OxygenBottomBar(
|
OxygenBottomBar(
|
||||||
destinations = appState.topLevelDestinations,
|
destinations = appState.topLevelDestinations,
|
||||||
onNavigateToDestination = appState::navigateToTopLevelDestination,
|
onNavigateToDestination = appState::navigateToTopLevelDestination,
|
||||||
@@ -102,6 +114,7 @@ fun OxygenApp(appState: OxygenAppState) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
) { padding ->
|
) { padding ->
|
||||||
Row(
|
Row(
|
||||||
Modifier
|
Modifier
|
||||||
@@ -128,6 +141,7 @@ fun OxygenApp(appState: OxygenAppState) {
|
|||||||
) {
|
) {
|
||||||
if (destination != null) {
|
if (destination != null) {
|
||||||
OxygenTopAppBar(
|
OxygenTopAppBar(
|
||||||
|
scrollBehavior = topAppBarScrollBehavior,
|
||||||
titleRes = destination.titleTextId,
|
titleRes = destination.titleTextId,
|
||||||
navigationIcon = OxygenIcons.Search,
|
navigationIcon = OxygenIcons.Search,
|
||||||
navigationIconContentDescription = stringResource(R.string.feature_settings_top_app_bar_navigation_icon_description),
|
navigationIconContentDescription = stringResource(R.string.feature_settings_top_app_bar_navigation_icon_description),
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import androidx.compose.material3.MaterialTheme
|
|||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.material3.TopAppBarColors
|
import androidx.compose.material3.TopAppBarColors
|
||||||
import androidx.compose.material3.TopAppBarDefaults
|
import androidx.compose.material3.TopAppBarDefaults
|
||||||
|
import androidx.compose.material3.TopAppBarScrollBehavior
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.vector.ImageVector
|
import androidx.compose.ui.graphics.vector.ImageVector
|
||||||
@@ -22,6 +23,7 @@ import android.R as androidR
|
|||||||
@Composable
|
@Composable
|
||||||
fun OxygenTopAppBar(
|
fun OxygenTopAppBar(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
|
scrollBehavior: TopAppBarScrollBehavior? = null,
|
||||||
@StringRes titleRes: Int,
|
@StringRes titleRes: Int,
|
||||||
navigationIcon: ImageVector,
|
navigationIcon: ImageVector,
|
||||||
navigationIconContentDescription: String,
|
navigationIconContentDescription: String,
|
||||||
@@ -33,6 +35,7 @@ fun OxygenTopAppBar(
|
|||||||
) {
|
) {
|
||||||
CenterAlignedTopAppBar(
|
CenterAlignedTopAppBar(
|
||||||
modifier = modifier,
|
modifier = modifier,
|
||||||
|
scrollBehavior = scrollBehavior,
|
||||||
title = { Text(stringResource(titleRes)) },
|
title = { Text(stringResource(titleRes)) },
|
||||||
navigationIcon = {
|
navigationIcon = {
|
||||||
IconButton(onClick = onNavigationClick) {
|
IconButton(onClick = onNavigationClick) {
|
||||||
|
|||||||
Reference in New Issue
Block a user