feat: スクロール状態によって BottomBar を表示させるかどうかを変更 (#9)

kokoichi206 · Dec 5, 2022 · 9c48bb5 · 9c48bb5
1 parent 07a52f8
commit 9c48bb5
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 14 deletions.
diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/Navigation.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/Navigation.kt
@@ -1,10 +1,14 @@
 package jp.co.yumemi.android.code_check.presentation
 
+import androidx.compose.animation.*
+import androidx.compose.animation.core.EaseIn
+import androidx.compose.animation.core.EaseOut
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.*
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
@@ -26,6 +30,12 @@ fun Navigation() {
 
     val navController = rememberNavController()
 
+    /**
+     * BottomBar を表示するかのフラグ。
+     * メイン画面のスクロール状態からのコールバックで変更される。
+     */
+    var showBottomBar by remember { mutableStateOf(true) }
+
     Scaffold(
         topBar = {
             TopAppBar(
@@ -41,32 +51,60 @@ fun Navigation() {
             )
         },
         bottomBar = {
-            BottomBarView(navController = navController)
+            AnimatedVisibility(
+                visible = showBottomBar,
+                enter = slideInVertically(
+                    animationSpec = tween(
+                        durationMillis = 500,
+                        easing = EaseIn,
+                    ),
+                    initialOffsetY = { it },
+                ),
+                exit = slideOutVertically(
+                    animationSpec = tween(
+                        durationMillis = 500,
+                        easing = EaseOut,
+                    ),
+                    targetOffsetY = { it },
+                ),
+            ) {
+                BottomBarView(navController = navController)
+            }
         },
         containerColor = MaterialTheme.colorScheme.background,
     ) {
         BottomNavigation(
             navController = navController,
             paddingValues = it,
+            onScroll = { scrolled ->
+                showBottomBar = (scrolled > 0)
+            },
         )
     }
 }
 
 @Composable
 fun BottomNavigation(
     navController: NavHostController,
-    paddingValues: PaddingValues
+    paddingValues: PaddingValues,
+    onScroll: (Int) -> Unit = {},
 ) {
     NavHost(
         modifier = Modifier
-            .padding(paddingValues = paddingValues),
+            // Bottom に関しては BottomBar をスクロールで表示を切り替える関係で padding させない
+            .padding(top = paddingValues.calculateTopPadding()),
         navController = navController,
         startDestination = mainRoute,
     ) {
 
-        mainView {
-            navController.navigateToDetailView(it)
-        }
+        mainView(
+            onRepositoryClick = {
+                navController.navigateToDetailView(it)
+            },
+            onScroll = {
+                onScroll(it)
+            },
+        )
 
         detailView()
 

diff --git a/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt b/app/src/main/kotlin/jp/co/yumemi/android/code_check/presentation/main/MainView.kt
@@ -1,12 +1,12 @@
 package jp.co.yumemi.android.code_check.presentation.main
 
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.TextRange
@@ -24,13 +24,33 @@ import jp.co.yumemi.android.code_check.presentation.util.TestTags
 fun MainView(
     viewModel: MainViewModel = hiltViewModel(),
     onRepositoryClick: (Repository) -> Unit = {},
+    onScroll: (Int) -> Unit = {},
 ) {
     val uiState by viewModel.uiState.collectAsState()
 
     LaunchedEffect(true) {
         viewModel.fetchSearchRecent()
     }
 
+    val scrollState = rememberLazyListState()
+    var lastIndex by remember { mutableStateOf(0) }
+    LaunchedEffect(scrollState) {
+
+        snapshotFlow {
+            scrollState.layoutInfo
+        }.collect {
+            if (it.visibleItemsInfo.isNotEmpty()) {
+                val info = it.visibleItemsInfo[0]
+                if (lastIndex != info.index ) {
+                    // Scroll された Index 分、呼び出し元に返してあげる
+                    val diff = lastIndex - info.index
+                    onScroll(diff)
+                    lastIndex = info.index
+                }
+            }
+        }
+    }
+
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -88,7 +108,8 @@ fun MainView(
 
                 LazyColumn(
                     modifier = Modifier
-                        .testTag(TestTags.SEARCH_RESULT)
+                        .testTag(TestTags.SEARCH_RESULT),
+                    state = scrollState,
                 ) {
                     items(uiState.repositories) { item ->
                         OneRepository(repository = item, onRepositoryClick = onRepositoryClick)

diff --git a/...ain/kotlin/jp/co/yumemi/android/code_check/presentation/main/navigation/MainNavigation.kt b/...ain/kotlin/jp/co/yumemi/android/code_check/presentation/main/navigation/MainNavigation.kt
@@ -9,8 +9,12 @@ const val mainRoute = "main_route"
 
 fun NavGraphBuilder.mainView(
     onRepositoryClick: (Repository) -> Unit,
+    onScroll: (Int) -> Unit = {},
 ) {
     composable(route = mainRoute) {
-        MainView(onRepositoryClick = onRepositoryClick)
+        MainView(onRepositoryClick = onRepositoryClick,
+            onScroll = {
+                onScroll(it)
+            })
     }
 }