From 7130b8cc7ab0be62b0bcd02498301723787e91c6 Mon Sep 17 00:00:00 2001 From: SuperDragonXD <70206496+SuperDragonXD@users.noreply.github.com> Date: Mon, 5 Sep 2022 19:13:05 +0800 Subject: [PATCH] Change TopBar.kt to use LargeTopAppBar (#2900) This squashed commit from the PR originally contains the following commits: * Change TopBar.kt to use LargeTopAppBar * `PreferenceScaffold`: Change scroll behavior Change scroll behavior to use `enterAlwaysScrollBehavior()` instead of `exitUntilCollapsedScrollBehavior()` to fix returning to expanded state issues. * `TopBar`: Remove custom text weight & fix variable Remove custom weight on Text() and return topBarSize variable to old value (since it is used in PreferenceSearchScaffold) --- build.gradle | 2 +- .../ui/preferences/HiddenAppsPreferences.kt | 1 - .../ui/preferences/PickAppForGesture.kt | 1 - .../components/PreferenceLayout.kt | 14 --- .../components/PreferenceScaffold.kt | 28 +++++- .../ui/preferences/components/TopBar.kt | 86 ++++++++++--------- .../pickers/CustomColorPicker.kt | 1 + 7 files changed, 74 insertions(+), 59 deletions(-) diff --git a/build.gradle b/build.gradle index 7602fb9b83..0a1e1d1387 100644 --- a/build.gradle +++ b/build.gradle @@ -323,7 +323,7 @@ dependencies { implementation "androidx.compose.foundation:foundation:$compose_version" implementation "androidx.compose.material:material-icons-extended:$compose_version" implementation "androidx.compose.material:material:$compose_version" - implementation "androidx.compose.material3:material3:1.0.0-alpha14" + implementation "androidx.compose.material3:material3:1.0.0-beta01" implementation "androidx.compose.runtime:runtime-livedata:$compose_version" implementation "androidx.compose.compiler:compiler:$compose_compiler_version" implementation "androidx.constraintlayout:constraintlayout:2.1.4" diff --git a/lawnchair/src/app/lawnchair/ui/preferences/HiddenAppsPreferences.kt b/lawnchair/src/app/lawnchair/ui/preferences/HiddenAppsPreferences.kt index 94696e2f13..80f797d76e 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/HiddenAppsPreferences.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/HiddenAppsPreferences.kt @@ -52,7 +52,6 @@ fun HiddenAppsPreferences() { val state = rememberLazyListState() PreferenceScaffold( label = pageTitle, - floating = rememberFloatingState(state), ) { Crossfade(targetState = optionalApps.isPresent) { present -> if (present) { diff --git a/lawnchair/src/app/lawnchair/ui/preferences/PickAppForGesture.kt b/lawnchair/src/app/lawnchair/ui/preferences/PickAppForGesture.kt index 1be4189802..c1063acb9a 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/PickAppForGesture.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/PickAppForGesture.kt @@ -40,7 +40,6 @@ fun PickAppForGesture() { PreferenceScaffold( label = stringResource(id = R.string.pick_app_for_gesture), - floating = rememberFloatingState(state), ) { Crossfade(targetState = optionalApps.isPresent) { present -> if (present) { diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceLayout.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceLayout.kt index 42f1743e81..0e4363c7df 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceLayout.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceLayout.kt @@ -45,7 +45,6 @@ fun PreferenceLayout( ) { PreferenceScaffold( backArrowVisible = backArrowVisible, - floating = rememberFloatingState(scrollState), label = label, actions = actions, bottomBar = bottomBar, @@ -71,7 +70,6 @@ fun PreferenceLayoutLazyColumn( ) { PreferenceScaffold( backArrowVisible = backArrowVisible, - floating = rememberFloatingState(state), label = label, actions = actions, ) { @@ -83,15 +81,3 @@ fun PreferenceLayoutLazyColumn( ) } } - -@Composable -fun rememberFloatingState(state: ScrollState?) = - remember(state) { - if (state != null) derivedStateOf { state.value > 0 } else mutableStateOf(false) - } - -@Composable -fun rememberFloatingState(state: LazyListState) = - remember(state) { - derivedStateOf { state.firstVisibleItemIndex > 0 || state.firstVisibleItemScrollOffset > 0 } - } diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceScaffold.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceScaffold.kt index 031d9f0997..255db4ead3 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceScaffold.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceScaffold.kt @@ -1,3 +1,20 @@ + +/* + * Copyright 2022, Lawnchair + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + package app.lawnchair.ui.preferences.components import androidx.compose.foundation.layout.* @@ -5,30 +22,35 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.State import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.material3.* +import androidx.compose.ui.Modifier +import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalContext import com.android.quickstep.SysUINavigationMode import com.google.accompanist.insets.ui.Scaffold +@OptIn(ExperimentalMaterial3Api::class) @Composable fun PreferenceScaffold( backArrowVisible: Boolean = true, - floating: State = remember { mutableStateOf(false) }, label: String, actions: @Composable RowScope.() -> Unit = {}, bottomBar: @Composable () -> Unit = { BottomSpacer() }, content: @Composable (PaddingValues) -> Unit ) { + val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior() Scaffold( + modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { TopBar( backArrowVisible = backArrowVisible, - floating = floating.value, label = label, actions = actions, + scrollBehavior = scrollBehavior ) }, bottomBar = bottomBar, - contentPadding = WindowInsets.systemBars.only(WindowInsetsSides.Horizontal).asPaddingValues() + contentPadding = WindowInsets.systemBars.only(WindowInsetsSides.Horizontal).asPaddingValues(), ) { content(it) } diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/TopBar.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/TopBar.kt index 557adf73bc..50ab852778 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/TopBar.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/TopBar.kt @@ -16,6 +16,7 @@ package app.lawnchair.ui.preferences.components +import androidx.compose.animation.core.FastOutLinearInEasing import androidx.activity.compose.LocalOnBackPressedDispatcherOwner import androidx.compose.foundation.layout.* import androidx.compose.material.icons.Icons @@ -27,65 +28,72 @@ import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.lerp import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp +@OptIn(ExperimentalMaterial3Api::class) @Composable fun TopBar( backArrowVisible: Boolean, - floating: Boolean, + scrollBehavior: TopAppBarScrollBehavior? = null, label: String, actions: @Composable RowScope.() -> Unit = {}, ) { val backDispatcher = LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher - val scrollFraction = if (floating) 1f else 0f + + val containerColor: Color = MaterialTheme.colorScheme.surface + val scrolledContainerColor: Color = MaterialTheme.colorScheme.surfaceColorAtElevation(3.0.dp) - val colors = TopAppBarDefaults.smallTopAppBarColors() - val appBarContainerColor by colors.containerColor(scrollFraction) - val navigationIconContentColor = colors.navigationIconContentColor(scrollFraction) - val titleContentColor = colors.titleContentColor(scrollFraction) - val actionIconContentColor = colors.actionIconContentColor(scrollFraction) + fun containerColor(colorTransitionFraction: Float): Color { + return lerp( + containerColor, + scrolledContainerColor, + FastOutLinearInEasing.transform(colorTransitionFraction) + ) + } - Surface(color = appBarContainerColor) { - Row( - verticalAlignment = Alignment.CenterVertically, + val backgroundColor = containerColor(scrollBehavior?.state?.overlappedFraction ?: 0f) + + val foregroundColors = TopAppBarDefaults.centerAlignedTopAppBarColors( + containerColor = Color.Transparent, + scrolledContainerColor = Color.Transparent + ) + + Surface ( + color = backgroundColor + ) { + LargeTopAppBar( modifier = Modifier .statusBarsPadding() .fillMaxWidth() - .height(topBarSize) .padding(horizontal = 4.dp), - ) { - if (backArrowVisible) { - CompositionLocalProvider(LocalContentColor provides navigationIconContentColor.value) { - ClickableIcon( - imageVector = backIcon(), - onClick = { backDispatcher?.onBackPressed() }, - ) - } - } - Text( - text = label, - style = MaterialTheme.typography.titleLarge, - color = titleContentColor.value, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - modifier = Modifier - .padding(horizontal = if (backArrowVisible) 4.dp else 12.dp) - .weight(weight = 1f), - ) - CompositionLocalProvider(LocalContentColor provides actionIconContentColor.value) { - Row( - modifier = Modifier.fillMaxHeight(), - horizontalArrangement = Arrangement.End, - verticalAlignment = Alignment.CenterVertically, - content = actions, + title = { + Text( + text = label, + maxLines = 1, + overflow = TextOverflow.Ellipsis, ) - } - } - } + }, + actions = actions, + navigationIcon = { + if (backArrowVisible) { + ClickableIcon( + imageVector = backIcon(), + onClick = { backDispatcher?.onBackPressed() }, + ) + } else { + null + } + }, + scrollBehavior = scrollBehavior, + colors = foregroundColors + ) + } } @Composable diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/colorpreference/pickers/CustomColorPicker.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/colorpreference/pickers/CustomColorPicker.kt index 3b96e2b670..de485880e9 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/colorpreference/pickers/CustomColorPicker.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/colorpreference/pickers/CustomColorPicker.kt @@ -189,6 +189,7 @@ fun CustomColorPicker( } } +@OptIn(ExperimentalMaterial3Api::class) @Composable private fun HexColorPicker( modifier: Modifier = Modifier,