From 61d229b100ca8587a1f45f376b17e8d6f6adbc04 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 25 Apr 2024 11:18:11 +0800 Subject: [PATCH] Refactor(TopBar): Optimize TopBar Optimize TopBar in AboutScreen and LibrariesScreen --- .../oxygen/toolbox/ui/about/AboutScreen.kt | 102 ++++++++++-------- .../toolbox/ui/about/LibrariesScreen.kt | 68 +++++++----- .../toolbox/ui/component/OxygenTopAppBar.kt | 36 ++++--- app/src/main/res/values-zh/strings.xml | 1 + app/src/main/res/values/strings.xml | 1 + 5 files changed, 122 insertions(+), 86 deletions(-) diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt index b927d82..dc301bd 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt @@ -4,19 +4,31 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.WindowInsetsSides +import androidx.compose.foundation.layout.consumeWindowInsets +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.safeDrawingPadding -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton +import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TextButton +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.vectorResource @@ -24,6 +36,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import top.fatweb.oxygen.toolbox.R import top.fatweb.oxygen.toolbox.icon.OxygenIcons +import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar import top.fatweb.oxygen.toolbox.ui.theme.OxygenPreviews import top.fatweb.oxygen.toolbox.ui.theme.OxygenTheme import top.fatweb.oxygen.toolbox.ui.util.ResourcesUtils @@ -39,43 +52,56 @@ internal fun AboutRoute( ) } +@OptIn(ExperimentalMaterial3Api::class) @Composable internal fun AboutScreen( modifier: Modifier = Modifier, onBackClick: () -> Unit, onNavigateToLibraries: () -> Unit ) { - Column( - modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally - ) { - AboutToolBar( - onBackClick = onBackClick - ) - Spacer( - modifier = Modifier.height(64.dp) - ) - AboutAppInfo() - Spacer( - modifier = Modifier.weight(1f) - ) - AboutFooter( - onNavigateToLibraries = onNavigateToLibraries - ) - } -} + val scrollState = rememberScrollState() + val topAppBarScrollBehavior = + TopAppBarDefaults.enterAlwaysScrollBehavior(canScroll = { scrollState.maxValue > 0 }) -@Composable -private fun AboutToolBar( - modifier: Modifier = Modifier, onBackClick: () -> Unit -) { - Row( - modifier = modifier - .fillMaxWidth() - .padding(8.dp), - verticalAlignment = Alignment.CenterVertically - ) { - IconButton(onClick = onBackClick) { - Icon( - imageVector = OxygenIcons.ArrowBack, - contentDescription = stringResource(R.string.core_back) + Scaffold( + modifier = Modifier + .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection), + containerColor = Color.Transparent, + contentWindowInsets = WindowInsets(0, 0, 0, 0), + topBar = { + OxygenTopAppBar( + scrollBehavior = topAppBarScrollBehavior, + titleRes = R.string.feature_settings_more_about, + navigationIcon = OxygenIcons.Back, + navigationIconContentDescription = stringResource(R.string.core_back), + colors = TopAppBarDefaults.centerAlignedTopAppBarColors( + containerColor = Color.Transparent, + scrolledContainerColor = Color.Transparent + ), + onNavigationClick = onBackClick + ) + } + ) { padding -> + Column( + modifier = modifier + .fillMaxWidth() + .fillMaxHeight() + .padding(padding) + .consumeWindowInsets(padding) + .windowInsetsPadding( + WindowInsets.safeDrawing.only( + WindowInsetsSides.Horizontal + ) + ) + .verticalScroll(scrollState), horizontalAlignment = Alignment.CenterHorizontally + ) { + Spacer( + modifier = Modifier.height(64.dp) + ) + AboutAppInfo() + Spacer( + modifier = Modifier.weight(1f) + ) + AboutFooter( + onNavigateToLibraries = onNavigateToLibraries ) } } @@ -136,14 +162,6 @@ private fun AboutFooter( } } -@OxygenPreviews -@Composable -fun AboutToolBarPreview() { - OxygenTheme { - AboutToolBar(onBackClick = {}) - } -} - @OxygenPreviews @Composable fun AboutAppInfoPreview() { diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt index 77953dd..12dfe8a 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt @@ -11,10 +11,13 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.WindowInsetsSides +import androidx.compose.foundation.layout.consumeWindowInsets import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn +import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.safeDrawingPadding @@ -29,11 +32,12 @@ import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridS import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.AlertDialog -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TextButton +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -41,6 +45,8 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource @@ -49,6 +55,7 @@ import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import top.fatweb.oxygen.toolbox.R import top.fatweb.oxygen.toolbox.icon.OxygenIcons +import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller import top.fatweb.oxygen.toolbox.ui.component.scrollbar.scrollbarState @@ -70,6 +77,7 @@ internal fun LibrariesRoute( ) } +@OptIn(ExperimentalMaterial3Api::class) @Composable internal fun LibrariesScreen( modifier: Modifier = Modifier, @@ -93,16 +101,39 @@ internal fun LibrariesScreen( var dialogContent by remember { mutableStateOf("") } var dialogUrl by remember { mutableStateOf("") } - Column( - modifier = modifier - ) { - LibrariesToolBar( - onBackClick = onBackClick - ) + val topAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior() + + Scaffold( + modifier = Modifier + .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection), + containerColor = Color.Transparent, + contentWindowInsets = WindowInsets(0, 0, 0, 0), + topBar = { + OxygenTopAppBar( + scrollBehavior = topAppBarScrollBehavior, + titleRes = R.string.feature_settings_open_source_license, + navigationIcon = OxygenIcons.Back, + navigationIconContentDescription = stringResource(R.string.core_back), + actionIcon = OxygenIcons.Search, + actionIconContentDescription = stringResource(R.string.core_search), + colors = TopAppBarDefaults.centerAlignedTopAppBarColors( + containerColor = Color.Transparent, + scrolledContainerColor = Color.Transparent + ), + onNavigationClick = onBackClick + ) + } + ) { padding -> Box( modifier .fillMaxWidth() - .weight(1f) + .padding(padding) + .consumeWindowInsets(padding) + .windowInsetsPadding( + WindowInsets.safeDrawing.only( + WindowInsetsSides.Horizontal + ) + ) ) { when (librariesScreenUiState) { LibrariesScreenUiState.Loading -> { @@ -192,25 +223,6 @@ internal fun LibrariesScreen( } } -@Composable -private fun LibrariesToolBar( - modifier: Modifier = Modifier, onBackClick: () -> Unit -) { - Row( - modifier = modifier - .fillMaxWidth() - .padding(8.dp), - verticalAlignment = Alignment.CenterVertically - ) { - IconButton(onClick = onBackClick) { - Icon( - imageVector = OxygenIcons.ArrowBack, - contentDescription = stringResource(R.string.core_back) - ) - } - } -} - fun howManyItems(librariesScreenUiState: LibrariesScreenUiState) = when (librariesScreenUiState) { LibrariesScreenUiState.Loading -> 0 diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt index e55ed75..10cbbd2 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt @@ -30,10 +30,10 @@ fun OxygenTopAppBar( modifier: Modifier = Modifier, scrollBehavior: TopAppBarScrollBehavior? = null, @StringRes titleRes: Int, - navigationIcon: ImageVector, - navigationIconContentDescription: String, - actionIcon: ImageVector, - actionIconContentDescription: String, + navigationIcon: ImageVector? = null, + navigationIconContentDescription: String? = null, + actionIcon: ImageVector? = null, + actionIconContentDescription: String? = null, colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(), onNavigationClick: () -> Unit = {}, onActionClick: () -> Unit = {} @@ -47,21 +47,25 @@ fun OxygenTopAppBar( scrollBehavior = scrollBehavior, title = { Text(stringResource(titleRes)) }, navigationIcon = { - IconButton(onClick = onNavigationClick) { - Icon( - imageVector = navigationIcon, - contentDescription = navigationIconContentDescription, - tint = MaterialTheme.colorScheme.onSurface - ) + navigationIcon?.let { + IconButton(onClick = onNavigationClick) { + Icon( + imageVector = navigationIcon, + contentDescription = navigationIconContentDescription, + tint = MaterialTheme.colorScheme.onSurface + ) + } } }, actions = { - IconButton(onClick = onActionClick) { - Icon( - imageVector = actionIcon, - contentDescription = actionIconContentDescription, - tint = MaterialTheme.colorScheme.onSurface - ) + actionIcon?.let { + IconButton(onClick = onActionClick) { + Icon( + imageVector = actionIcon, + contentDescription = actionIconContentDescription, + tint = MaterialTheme.colorScheme.onSurface + ) + } } }, colors = colors, diff --git a/app/src/main/res/values-zh/strings.xml b/app/src/main/res/values-zh/strings.xml index bc02779..b173c10 100644 --- a/app/src/main/res/values-zh/strings.xml +++ b/app/src/main/res/values-zh/strings.xml @@ -8,6 +8,7 @@ 关闭 未知 网站 + 搜索 ⚠️ 无法连接至互联网 工具 收藏 diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 3577a1c..0e2257a 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -7,6 +7,7 @@ Close Unknown Website + Search ⚠️ Unable to connect to the internet Tools Star