From c8a4630fb2551d126b38249ab0a4740c230aa31d Mon Sep 17 00:00:00 2001 From: germainkevinbusiness <67168053+kevingermainbusiness@users.noreply.github.com> Date: Sun, 5 Jun 2022 08:38:55 -0400 Subject: [PATCH] 1.0.0-beta03 release version --- README.md | 2 +- app/build.gradle | 2 +- .../collapsingtopbarcompose/MainActivity.kt | 2 +- .../collapsingtopbarcompose/ui/Components.kt | 9 +- build.gradle | 2 +- collapsingtopbar/build.gradle | 2 +- .../collapsingtopbar/CollapsingTopBar.kt | 109 ++++++++++++------ 7 files changed, 86 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index b2ecc28..badbf7c 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ repositories { ```groovy dependencies { - implementation 'com.github.germainkevinbusiness:CollapsingTopBarCompose:1.0.0-beta02' + implementation 'com.github.germainkevinbusiness:CollapsingTopBarCompose:1.0.0-beta03' } ``` diff --git a/app/build.gradle b/app/build.gradle index 47704cd..f864a1f 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -11,7 +11,7 @@ android { minSdk 21 targetSdk 32 versionCode 1 - versionName "1.0.0-beta02" + versionName "1.0.0-beta03" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" vectorDrawables { diff --git a/app/src/main/java/com/germainkevin/collapsingtopbarcompose/MainActivity.kt b/app/src/main/java/com/germainkevin/collapsingtopbarcompose/MainActivity.kt index 923aff7..90d5a28 100644 --- a/app/src/main/java/com/germainkevin/collapsingtopbarcompose/MainActivity.kt +++ b/app/src/main/java/com/germainkevin/collapsingtopbarcompose/MainActivity.kt @@ -64,7 +64,7 @@ class MainActivity : ComponentActivity() { isAlwaysCollapsed = false, isExpandedWhenFirstDisplayed = true, centeredTitleAndSubtitle = false, - expandedTopBarMaxHeight = 256.dp, + expandedTopBarMaxHeight = 156.dp, ) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), diff --git a/app/src/main/java/com/germainkevin/collapsingtopbarcompose/ui/Components.kt b/app/src/main/java/com/germainkevin/collapsingtopbarcompose/ui/Components.kt index 671ea8a..e542293 100644 --- a/app/src/main/java/com/germainkevin/collapsingtopbarcompose/ui/Components.kt +++ b/app/src/main/java/com/germainkevin/collapsingtopbarcompose/ui/Components.kt @@ -6,7 +6,9 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.* +import androidx.compose.material.icons.filled.Contacts +import androidx.compose.material.icons.filled.Email +import androidx.compose.material.icons.filled.Settings import androidx.compose.material.icons.outlined.MoreVert import androidx.compose.material.icons.outlined.Search import androidx.compose.material3.* @@ -15,7 +17,6 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import com.germainkevin.collapsingtopbarcompose.R @@ -76,14 +77,14 @@ fun LeftDrawer( drawerItems.forEach { item -> NavigationDrawerItem( icon = { Icon(item, contentDescription = null) }, - label = { Text(item.name) }, + label = { Text(item.name.replace("Filled.", "")) }, selected = item == selectedItem.value, onClick = { selectedItem.value = item closeLeftDrawer() }, shape = RoundedCornerShape(topEnd = 24.dp, bottomEnd = 24.dp), - badge = { Text(text = " 20") }, + badge = { Text(text = "20") }, modifier = Modifier.padding(end = 16.dp, top = 12.dp, bottom = 12.dp) ) } diff --git a/build.gradle b/build.gradle index 2aba049..c0aaa89 100644 --- a/build.gradle +++ b/build.gradle @@ -1,6 +1,6 @@ buildscript { ext { - compose_version = '1.2.0-beta02' + compose_version = '1.2.0-beta03' accompanist_version = '0.24.3-alpha' } }// Top-level build file where you can add configuration options common to all sub-projects/modules. diff --git a/collapsingtopbar/build.gradle b/collapsingtopbar/build.gradle index 5e19897..57f5de1 100644 --- a/collapsingtopbar/build.gradle +++ b/collapsingtopbar/build.gradle @@ -24,7 +24,7 @@ afterEvaluate { // You can then customize attributes of the publication as shown below. groupId = 'com.germainkevin.collapsingtopbarcompose' artifactId = 'collapsingtopbarcompose' - version = '1.0.0-beta02' + version = '1.0.0-beta03' } } } diff --git a/collapsingtopbar/src/main/java/com/germainkevin/collapsingtopbar/CollapsingTopBar.kt b/collapsingtopbar/src/main/java/com/germainkevin/collapsingtopbar/CollapsingTopBar.kt index 2869317..f55bc38 100644 --- a/collapsingtopbar/src/main/java/com/germainkevin/collapsingtopbar/CollapsingTopBar.kt +++ b/collapsingtopbar/src/main/java/com/germainkevin/collapsingtopbar/CollapsingTopBar.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.* import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -50,45 +51,28 @@ fun CollapsingTopBar( ) = with(scrollBehavior) { if (!isAlwaysCollapsed && !isExpandedWhenFirstDisplayed && trackOffSetIsZero >= 3) { - // Make sure the trackOffSetIsZero variable does not exceed the number 10 - if (trackOffSetIsZero > 10) trackOffSetIsZero = 3 + // Makes sure the trackOffSetIsZero stays below the number 6, just a random number above 3 + // cause I don't need to store super high numbers for that variable + if (trackOffSetIsZero > 6) { + trackOffSetIsZero = 3 + } currentTopBarHeight = expandedTopBarMaxHeight + topBarOffset.dp } else if (isExpandedWhenFirstDisplayed && !isAlwaysCollapsed) { currentTopBarHeight = expandedTopBarMaxHeight + topBarOffset.dp } - /** - * We'll reference [TopBarScrollBehavior.collapsedTopBarHeight] as 56 and - * [TopBarScrollBehavior.expandedTopBarMaxHeight] as 200 - * - * We'll add a margin to make the Title Subtitle column disappear before the CollapsingTopBar - * reaches the height of 56.dp which is a margin of 20.dp - * - * 56 + 20 --------> 0f (alpha value meaning when the title subtitle section is fully invisible) - * 200 --------> 1f (alpha value meaning when the title subtitle section is fully visible) - * - * The distance between 56+20 and 200 is 124. This distance represents the 100% distance from the - * collapsed state and expanded state of the [CollapsingTopBar] - * - * So what we do is: - * 124 ----------> 100% - * currentTopBarHeight's actual value -------------> x - * - * Whatever value x is, is considered a alpha value for the titleSubtitleAlphaRange - */ - val titleSubtitleAlpha = - (currentTopBarHeight - (collapsedTopBarHeight + 20.dp)) / - (expandedTopBarMaxHeight - (collapsedTopBarHeight + 20.dp)) - - val columnWithTitleSubtitleAlpha by animateFloatAsState(titleSubtitleAlpha) - - val visibleValue = collapsedTopBarHeight - val invisibleValue = collapsedTopBarHeight + 6.dp - - val collapsedTitleAlphaRange: Float = if (currentTopBarHeight == visibleValue) 1f - else (visibleValue - currentTopBarHeight) / (invisibleValue - visibleValue) + val columnWithTitleSubtitleAlpha by getTitleAndSubtitleColumnAlpha( + currentTopBarHeight = currentTopBarHeight, + collapsedTopBarHeight = collapsedTopBarHeight, + expandedTopBarMaxHeight = expandedTopBarMaxHeight, + margin = 20.dp + ) - val collapsedTitleAlpha by animateFloatAsState(collapsedTitleAlphaRange) + val collapsedTitleAlpha by getCollapsedTitleAlpha( + currentTopBarHeight = currentTopBarHeight, + visibleValue = collapsedTopBarHeight, + invisibleValue = collapsedTopBarHeight + 6.dp + ) CollapsingTopBarLayout( modifier = modifier, @@ -228,6 +212,9 @@ fun CollapsingTopBarLayout( } +/** + * The Section where all the options menu items will be laid out on + * */ val actionsRow: @Composable (@Composable RowScope.() -> Unit) -> Unit = { Row( modifier = Modifier.fillMaxHeight(), @@ -235,4 +222,60 @@ val actionsRow: @Composable (@Composable RowScope.() -> Unit) -> Unit = { verticalAlignment = Alignment.Bottom, content = it ) +} + +/** + * We'll reference [collapsedTopBarHeight] as 56 and [expandedTopBarMaxHeight] as 200 + * + * We'll add a margin to make the Title Subtitle Column disappear before the CollapsingTopBar + * reaches the height of 56.dp which is a margin of 20.dp + * + * 56 + 20 --------> 0f (alpha value meaning when the title subtitle section is fully invisible) + * 200 --------> 1f (alpha value meaning when the title subtitle section is fully visible) + * + * The distance between 56+20 and 200 is 124. This distance represents the 100% distance from the + * collapsed state and expanded state of the [CollapsingTopBar] + * + * So what we do is: + * 124 ----------> 100% + * currentTopBarHeight's actual value -------------> x + * + * Whatever value x is, is considered the level of visibility the Title Subtitle Column should have + * + * @param currentTopBarHeight The current height of the [CollapsingTopBar] in [Dp] + * @param collapsedTopBarHeight The height of the [CollapsingTopBar] when it is collapsed + * @param expandedTopBarMaxHeight The height of the [CollapsingTopBar] when it is expanded + * @param margin A distance added to start making the TitleAndSubtitleColumn's visible only when + * [currentTopBarHeight] reaches [collapsedTopBarHeight] + margin + */ +@Composable +fun getTitleAndSubtitleColumnAlpha( + currentTopBarHeight: Dp, + collapsedTopBarHeight: Dp, + expandedTopBarMaxHeight: Dp, + margin: Dp +): State { + return animateFloatAsState( + (currentTopBarHeight - (collapsedTopBarHeight + margin)) / + (expandedTopBarMaxHeight - (collapsedTopBarHeight + margin)) + ) +} + +/** + * @param currentTopBarHeight The current height of the [CollapsingTopBar] in [Dp] + * @param visibleValue A value in [Dp] that if [currentTopBarHeight] reaches it, the + * Collapsed Title should become visible + * @param invisibleValue A value in [Dp] that if [currentTopBarHeight] reaches it, the + * Collapsed Title section should become invisible + * */ +@Composable +fun getCollapsedTitleAlpha( + currentTopBarHeight: Dp, + visibleValue: Dp, + invisibleValue: Dp +): State { + return animateFloatAsState( + if (currentTopBarHeight == visibleValue) 1f + else (visibleValue - currentTopBarHeight) / (invisibleValue - visibleValue) + ) } \ No newline at end of file