[GroovinExpandableBox] Update Music Sample

- Add BottomBar : Hiding when MusicPlayer is animated on fullscren mode
gaiuszzang · Apr 6, 2024 · 132f868 · 132f868
1 parent 958c9c5
commit 132f868
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ This library offers a Box Composable that can be expanded/reduced through up/dow
 
 |                                                                    MusicPlayer Sample                                                                     |                                                                    Article Page Sample                                                                    |                                                                    Map Sample                                                                     |
 |:---------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------:|
-| <img src="https://github.com/gaiuszzang/GroovinExpandableBox/assets/15318053/5cca2871-b694-4002-955a-26f51385c0b6" alt="MusicPlayerSample" width="240px"> | <img src="https://github.com/gaiuszzang/GroovinExpandableBox/assets/15318053/78bdc12b-6884-4d4b-9470-76440474d461" alt="ArticlePageSample" width="240px"> | <img src="https://github.com/gaiuszzang/GroovinExpandableBox/assets/15318053/233f2b70-f706-45fc-89b4-d92227b6467e" alt="MapSample" width="240px"> |
+| <img src="https://github.com/gaiuszzang/GroovinExpandableBox/assets/15318053/66df4c2e-c4f6-498b-8522-61497cef70a4" alt="MusicPlayerSample" width="240px"> | <img src="https://github.com/gaiuszzang/GroovinExpandableBox/assets/15318053/78bdc12b-6884-4d4b-9470-76440474d461" alt="ArticlePageSample" width="240px"> | <img src="https://github.com/gaiuszzang/GroovinExpandableBox/assets/15318053/233f2b70-f706-45fc-89b4-d92227b6467e" alt="MapSample" width="240px"> |
 
 
 ## Including in your project

diff --git a/expandablebox/src/main/java/io/groovin/expandablebox/ExpandableBoxState.kt b/expandablebox/src/main/java/io/groovin/expandablebox/ExpandableBoxState.kt
@@ -327,7 +327,7 @@ class ExpandableBoxSwipeProgress(
     }
 
     override fun toString(): String {
-        return "ExpandableBoxSwipeProgress(from=$from, to=$to, fraction=$fromToProgress)"
+        return "ExpandableBoxSwipeProgress(from=$from, to=$to, fromToProgress=$fromToProgress)"
     }
 }
 

diff --git a/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/GroovinNavGraph.kt b/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/GroovinNavGraph.kt
@@ -18,11 +18,10 @@ import io.groovin.expandablebox.sampleapp.music.MusicSampleScreen
 
 
 object GroovinDestination {
-    const val Main = "Main"
-    const val MusicBottomExpandBox = "MusicBottomExpandBox"
-    const val MusicUpExpandBox     = "MusicUpExpandBox"
-    const val ArticleExpandBox     = "ArticleExpandBox"
-    const val MapExpandBox         = "MapExpandBox"
+    const val MAIN = "Main"
+    const val MUSIC_SAMPLE = "MusicSample"
+    const val ARTICLE_SAMPLE = "ArticleSample"
+    const val MAP_SAMPLE = "MapSample"
 }
 
 val LocalNavAction = compositionLocalOf<GroovinAction> { error("can't find GroovinAction") }
@@ -33,7 +32,7 @@ fun GroovinNavGraph(
 ) {
     NavHost(
         navController = navController,
-        startDestination = GroovinDestination.Main,
+        startDestination = GroovinDestination.MAIN,
         enterTransition = {
             fadeIn(animationSpec = tween(700)) + slideIntoContainer(
                 towards = AnimatedContentTransitionScope.SlideDirection.Companion.Up,
@@ -53,20 +52,17 @@ fun GroovinNavGraph(
             )
         }
     ) {
-        composable(GroovinDestination.Main) {
+        composable(GroovinDestination.MAIN) {
             MainScreen()
         }
-        composable(GroovinDestination.MusicBottomExpandBox) {
-            MusicSampleScreen(false)
+        composable(GroovinDestination.MUSIC_SAMPLE) {
+            MusicSampleScreen()
         }
-        composable(GroovinDestination.MusicUpExpandBox) {
-            MusicSampleScreen(true)
-        }
-        composable(GroovinDestination.ArticleExpandBox) {
+        composable(GroovinDestination.ARTICLE_SAMPLE) {
             ArticleSampleScreen()
         }
         composable(
-            route = "${GroovinDestination.MapExpandBox}?" +
+            route = "${GroovinDestination.MAP_SAMPLE}?" +
                 "nestedScrollOption={nestedScrollOption}",
             arguments = listOf(
                 navArgument("nestedScrollOption") { defaultValue = 0 }
@@ -80,16 +76,13 @@ fun GroovinNavGraph(
 
 class GroovinAction(private val navController: NavHostController?) {
     val moveToMusicBottomExpandBox: () -> Unit = {
-        navController?.navigate(GroovinDestination.MusicBottomExpandBox)
-    }
-    val moveToMusicUpExpandBox: () -> Unit = {
-        navController?.navigate(GroovinDestination.MusicUpExpandBox)
+        navController?.navigate(GroovinDestination.MUSIC_SAMPLE)
     }
     val moveToArticleExpandBox: () -> Unit = {
-        navController?.navigate(GroovinDestination.ArticleExpandBox)
+        navController?.navigate(GroovinDestination.ARTICLE_SAMPLE)
     }
     val moveToMapExpandBox: (Int) -> Unit = { nestedScrollOption ->
-        navController?.navigate(GroovinDestination.MapExpandBox + "?nestedScrollOption=$nestedScrollOption")
+        navController?.navigate(GroovinDestination.MAP_SAMPLE + "?nestedScrollOption=$nestedScrollOption")
     }
     val moveToBack: () -> Unit = {
         navController?.popBackStack()

diff --git a/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/MainScreen.kt b/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/MainScreen.kt
@@ -37,18 +37,11 @@ fun MainScreen() {
         ) {
             MainHeader()
             MainItem(
-                text = "Sample 1 : Music Player (Downside)",
+                text = "Sample 1 : Music Player",
                 onClick = {
                     navAction.moveToMusicBottomExpandBox()
                 }
             )
-            MainItem(
-                text = "Sample 2 : Music Player (Upside)",
-                onClick = {
-                    navAction.moveToMusicUpExpandBox()
-                }
-            )
-
             MainItem(
                 text = "Sample 2 : Article Page",
                 onClick = {

diff --git a/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/music/MusicBottomBar.kt b/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/music/MusicBottomBar.kt
@@ -0,0 +1,64 @@
+package io.groovin.expandablebox.sampleapp.music
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccountCircle
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+
+
+@Composable
+fun MusicBottomBar(
+    modifier: Modifier = Modifier,
+    onMenuClick: ((Int) -> Unit)? = null
+) {
+    Row(
+        modifier = modifier
+    ) {
+        MusicBottomBarItem(imageVector = Icons.Default.PlayArrow) {
+            onMenuClick?.invoke(0)
+        }
+        MusicBottomBarItem(imageVector = Icons.Default.Favorite) {
+            onMenuClick?.invoke(1)
+        }
+        MusicBottomBarItem(imageVector = Icons.Default.AccountCircle) {
+            onMenuClick?.invoke(2)
+        }
+    }
+}
+
+@Composable
+private fun RowScope.MusicBottomBarItem(
+    imageVector: ImageVector,
+    onClick: () -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight()
+            .clickable {
+                onClick()
+            },
+        verticalArrangement = Arrangement.Center
+    ) {
+        Image(
+            modifier = Modifier
+                .size(24.dp)
+                .align(Alignment.CenterHorizontally),
+            imageVector = imageVector,
+            contentDescription = null
+        )
+    }
+}
diff --git a/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/music/MusicListScreen.kt b/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/music/MusicListScreen.kt
@@ -2,15 +2,13 @@ package io.groovin.expandablebox.sampleapp.music
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -26,18 +24,23 @@ import io.groovin.expandablebox.sampleapp.R
 
 @Composable
 fun MusicListScreen(
+    modifier: Modifier = Modifier,
+    contentPadding: PaddingValues = PaddingValues(),
     onItemClick: ((Int) -> Unit)? = null
 ) {
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .verticalScroll(rememberScrollState())
+    LazyColumn(
+        modifier = modifier,
+        contentPadding = contentPadding
     ) {
-        for (i in 0 .. 100) {
+        items(
+            count = 100,
+            key = { index -> "MusicSongItem$index" },
+            contentType = { _ -> "MusicSongItem" }
+        ) { index ->
             MusicListItem(
-                title = "Music Song $i Item",
+                title = "Music Song $index Item",
                 onClick = {
-                    onItemClick?.invoke(i)
+                    onItemClick?.invoke(index)
                 }
             )
         }
@@ -53,11 +56,11 @@ private fun MusicListItem(
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(8.dp)
-            .clip(RoundedCornerShape(4.dp))
+            .clip(RoundedCornerShape(8.dp))
             .clickable {
                 onClick()
             }
+            .padding(12.dp)
     ) {
         Image(
             modifier = Modifier

diff --git a/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/music/MusicPlayerScreen.kt b/sampleapp/src/main/java/io/groovin/expandablebox/sampleapp/music/MusicPlayerScreen.kt
@@ -37,11 +37,10 @@ fun MusicPlayerScreen(
     progress: Float,
     progressState: ExpandableBoxStateValue,
     minimizedHeight: Dp,
-    isUpside: Boolean,
     foldClick: () -> Unit,
     playClick: () -> Unit
 ) {
-    val constraintSets = remember(progressState) { getConstraintSets(progressState, if (isUpside) -minimizedHeight else minimizedHeight) }
+    val constraintSets = remember(progressState) { getConstraintSets(progressState, minimizedHeight) }
     MotionLayout(
         start = constraintSets.first,
         end = constraintSets.second,
@@ -59,7 +58,7 @@ fun MusicPlayerScreen(
             onClick = { foldClick() }
         ) {
             Icon(
-                imageVector = if (isUpside) Icons.Default.KeyboardArrowUp else Icons.Default.KeyboardArrowDown,
+                imageVector = Icons.Default.KeyboardArrowDown,
                 contentDescription = null
             )
         }
@@ -112,8 +111,8 @@ private fun hideConstraintSet(foldHeight: Dp) = ConstraintSet {
     val foldButton = createRefFor("foldButton")
     val playButton = createRefFor("playButton")
     constrain(poster) {
-        width = Dimension.value(80.dp)
-        height = Dimension.value(80.dp)
+        width = Dimension.value(40.dp)
+        height = Dimension.value(40.dp)
         translationY = foldHeight / 2
         start.linkTo(parent.start)
         top.linkTo(parent.top)
@@ -151,8 +150,8 @@ private fun foldConstraintSet() = ConstraintSet {
     val foldButton = createRefFor("foldButton")
     val playButton = createRefFor("playButton")
     constrain(poster) {
-        width = Dimension.value(80.dp)
-        height = Dimension.value(80.dp)
+        width = Dimension.value(60.dp)
+        height = Dimension.value(60.dp)
         start.linkTo(parent.start)
         top.linkTo(parent.top)
         bottom.linkTo(parent.bottom)
-Original file line number
+Diff line change
@@ Expand Up / @@ -327,7 +327,7 @@ class ExpandableBoxSwipeProgress( @@
         }
         override fun toString(): String {
-            return "ExpandableBoxSwipeProgress(from=$from, to=$to, fraction=$fromToProgress)"
+            return "ExpandableBoxSwipeProgress(from=$from, to=$to, fromToProgress=$fromToProgress)"
         }
     }
@@ Expand Down @@