refactor: Pager -> AnimatedContent

YAPP-Github · Jan 11, 2024 · 24b3a69 · 24b3a69
1 parent 3923c6a
commit 24b3a69
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 38 deletions.
diff --git a/core/ui/src/main/java/com/susu/core/ui/extension/AnimatedContentTransitionScope.kt b/core/ui/src/main/java/com/susu/core/ui/extension/AnimatedContentTransitionScope.kt
@@ -0,0 +1,19 @@
+package com.susu.core.ui.extension
+
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.ContentTransform
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.togetherWith
+
+fun <S> AnimatedContentTransitionScope<S>.susuDefaultAnimatedContentTransitionSpec(leftDirectionCondition: Boolean): ContentTransform {
+    val direction = if (leftDirectionCondition)
+        AnimatedContentTransitionScope.SlideDirection.Left
+    else AnimatedContentTransitionScope.SlideDirection.Right
+    return slideIntoContainer(
+        towards = direction,
+        animationSpec = tween(500),
+    ) togetherWith slideOutOfContainer(
+        towards = direction,
+        animationSpec = tween(500),
+    )
+}
diff --git a/feature/received/src/main/java/com/susu/feature/received/ledgeradd/LedgerAddScreen.kt b/feature/received/src/main/java/com/susu/feature/received/ledgeradd/LedgerAddScreen.kt
@@ -1,17 +1,17 @@
 package com.susu.feature.received.ledgeradd
 
-import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
-import androidx.compose.foundation.pager.HorizontalPager
-import androidx.compose.foundation.pager.PagerState
-import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.res.stringResource
@@ -23,38 +23,42 @@ import com.susu.core.designsystem.component.button.MediumButtonStyle
 import com.susu.core.designsystem.component.button.SusuFilledButton
 import com.susu.core.designsystem.theme.SusuTheme
 import com.susu.core.ui.R
-import kotlinx.coroutines.launch
+import com.susu.core.ui.extension.susuDefaultAnimatedContentTransitionSpec
+import com.susu.feature.received.ledgeradd.content.DateContent
+import com.susu.feature.received.ledgeradd.content.NameContent
+import com.susu.feature.received.ledgeradd.content.CategoryContent
 
-enum class LedgerAddPage {
+enum class LedgerAddStep {
     CATEGORY,
     NAME,
     DATE,
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun LedgerAddRoute(
     popBackStack: () -> Unit,
 ) {
-    val pagerState = rememberPagerState(pageCount = { LedgerAddPage.entries.size })
-    val scope = rememberCoroutineScope()
+    var currentStep by remember {
+        mutableStateOf(LedgerAddStep.CATEGORY)
+    }
 
     LedgerAddScreen(
-        pagerState = pagerState,
+        currentStep = currentStep,
         onClickBack = popBackStack,
         onClickNextButton = {
             // TODO 임시 코드 입니다.
-            scope.launch {
-                pagerState.animateScrollToPage(pagerState.currentPage + 1)
+            currentStep = when (currentStep) {
+                LedgerAddStep.CATEGORY -> LedgerAddStep.NAME
+                LedgerAddStep.NAME -> LedgerAddStep.DATE
+                LedgerAddStep.DATE -> LedgerAddStep.DATE
             }
         },
     )
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun LedgerAddScreen(
-    pagerState: PagerState = rememberPagerState(pageCount = { LedgerAddPage.entries.size }),
+    currentStep: LedgerAddStep = LedgerAddStep.CATEGORY,
     onClickBack: () -> Unit = {},
     onClickNextButton: () -> Unit = {},
 ) {
@@ -68,19 +72,24 @@ fun LedgerAddScreen(
                 leftIcon = {
                     BackIcon(onClickBack)
                 },
-                entireStep = pagerState.pageCount,
-                currentStep = pagerState.currentPage + 1,
+                entireStep = LedgerAddStep.entries.size,
+                currentStep = currentStep.ordinal + 1,
             )
 
-            HorizontalPager(
+            AnimatedContent(
                 modifier = Modifier.weight(1f),
-                state = pagerState,
-                userScrollEnabled = false,
-            ) { page ->
-                when (LedgerAddPage.entries[page]) {
-                    LedgerAddPage.CATEGORY -> SelectCategoryScreen()
-                    LedgerAddPage.NAME -> InputNameScreen()
-                    LedgerAddPage.DATE -> InputDateScreen()
+                targetState = currentStep,
+                label = "LedgerAddScreen",
+                transitionSpec = {
+                    susuDefaultAnimatedContentTransitionSpec(
+                        leftDirectionCondition = targetState.ordinal > initialState.ordinal,
+                    )
+                },
+            ) { targetState ->
+                when (targetState) {
+                    LedgerAddStep.CATEGORY -> CategoryContent()
+                    LedgerAddStep.NAME -> NameContent()
+                    LedgerAddStep.DATE -> DateContent()
                 }
             }
 
@@ -98,7 +107,6 @@ fun LedgerAddScreen(
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @Preview
 @Composable
 fun ReceivedScreenPreview() {

diff --git a/...eceived/ledgeradd/SelectCategoryScreen.kt → ...ived/ledgeradd/content/CategoryContent.kt b/...eceived/ledgeradd/SelectCategoryScreen.kt → ...ived/ledgeradd/content/CategoryContent.kt
@@ -1,4 +1,4 @@
-package com.susu.feature.received.ledgeradd
+package com.susu.feature.received.ledgeradd.content
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -21,7 +21,7 @@ import com.susu.core.designsystem.theme.SusuTheme
 import com.susu.feature.received.R
 
 @Composable
-fun SelectCategoryScreen() {
+fun CategoryContent() {
     val scrollState = rememberScrollState()
 
     Column(
@@ -84,8 +84,8 @@ fun SelectCategoryScreen() {
 
 @Preview(showBackground = true, backgroundColor = 0xFFF6F6F6)
 @Composable
-fun SelectCategoryScreenPreview() {
+fun CategoryContentPreview() {
     SusuTheme {
-        SelectCategoryScreen()
+        CategoryContent()
     }
 }
diff --git a/...ure/received/ledgeradd/InputDateScreen.kt → ...received/ledgeradd/content/DateContent.kt b/...ure/received/ledgeradd/InputDateScreen.kt → ...received/ledgeradd/content/DateContent.kt
@@ -1,4 +1,4 @@
-package com.susu.feature.received.ledgeradd
+package com.susu.feature.received.ledgeradd.content
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -17,7 +17,7 @@ import com.susu.feature.received.R
 
 // TODO 디자인 변경 예정
 @Composable
-fun InputDateScreen() {
+fun DateContent() {
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -59,8 +59,8 @@ fun InputDateScreen() {
 
 @Preview(showBackground = true, backgroundColor = 0xFFF6F6F6)
 @Composable
-fun InputDateScreenPreview() {
+fun DateContentPreview() {
     SusuTheme {
-        InputDateScreen()
+        DateContent()
     }
 }
diff --git a/...ure/received/ledgeradd/InputNameScreen.kt → ...received/ledgeradd/content/NameContent.kt b/...ure/received/ledgeradd/InputNameScreen.kt → ...received/ledgeradd/content/NameContent.kt
@@ -1,4 +1,4 @@
-package com.susu.feature.received.ledgeradd
+package com.susu.feature.received.ledgeradd.content
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -15,7 +15,7 @@ import com.susu.core.designsystem.theme.SusuTheme
 import com.susu.feature.received.R
 
 @Composable
-fun InputNameScreen() {
+fun NameContent() {
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -40,8 +40,8 @@ fun InputNameScreen() {
 
 @Preview(showBackground = true, backgroundColor = 0xFFF6F6F6)
 @Composable
-fun InputNameScreenPreview() {
+fun NameContentPreview() {
     SusuTheme {
-        InputNameScreen()
+        NameContent()
     }
 }