From 24b3a69b53c6c5f5d0b08af36cc54285ca489e96 Mon Sep 17 00:00:00 2001 From: jinukeu Date: Thu, 11 Jan 2024 23:24:45 +0900 Subject: [PATCH] refactor: Pager -> AnimatedContent --- .../AnimatedContentTransitionScope.kt | 19 ++++++ .../received/ledgeradd/LedgerAddScreen.kt | 60 +++++++++++-------- .../CategoryContent.kt} | 8 +-- .../DateContent.kt} | 8 +-- .../NameContent.kt} | 8 +-- 5 files changed, 65 insertions(+), 38 deletions(-) create mode 100644 core/ui/src/main/java/com/susu/core/ui/extension/AnimatedContentTransitionScope.kt rename feature/received/src/main/java/com/susu/feature/received/ledgeradd/{SelectCategoryScreen.kt => content/CategoryContent.kt} (95%) rename feature/received/src/main/java/com/susu/feature/received/ledgeradd/{InputDateScreen.kt => content/DateContent.kt} (94%) rename feature/received/src/main/java/com/susu/feature/received/ledgeradd/{InputNameScreen.kt => content/NameContent.kt} (91%) 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 new file mode 100644 index 00000000..67cc7f08 --- /dev/null +++ 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 AnimatedContentTransitionScope.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 index 1565b158..4103d173 100644 --- 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/feature/received/src/main/java/com/susu/feature/received/ledgeradd/SelectCategoryScreen.kt b/feature/received/src/main/java/com/susu/feature/received/ledgeradd/content/CategoryContent.kt similarity index 95% rename from feature/received/src/main/java/com/susu/feature/received/ledgeradd/SelectCategoryScreen.kt rename to feature/received/src/main/java/com/susu/feature/received/ledgeradd/content/CategoryContent.kt index 2ec8c6b2..1fc7b0e1 100644 --- a/feature/received/src/main/java/com/susu/feature/received/ledgeradd/SelectCategoryScreen.kt +++ b/feature/received/src/main/java/com/susu/feature/received/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/feature/received/src/main/java/com/susu/feature/received/ledgeradd/InputDateScreen.kt b/feature/received/src/main/java/com/susu/feature/received/ledgeradd/content/DateContent.kt similarity index 94% rename from feature/received/src/main/java/com/susu/feature/received/ledgeradd/InputDateScreen.kt rename to feature/received/src/main/java/com/susu/feature/received/ledgeradd/content/DateContent.kt index 3b524701..b3e23271 100644 --- a/feature/received/src/main/java/com/susu/feature/received/ledgeradd/InputDateScreen.kt +++ b/feature/received/src/main/java/com/susu/feature/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/feature/received/src/main/java/com/susu/feature/received/ledgeradd/InputNameScreen.kt b/feature/received/src/main/java/com/susu/feature/received/ledgeradd/content/NameContent.kt similarity index 91% rename from feature/received/src/main/java/com/susu/feature/received/ledgeradd/InputNameScreen.kt rename to feature/received/src/main/java/com/susu/feature/received/ledgeradd/content/NameContent.kt index 144a348d..9712b652 100644 --- a/feature/received/src/main/java/com/susu/feature/received/ledgeradd/InputNameScreen.kt +++ b/feature/received/src/main/java/com/susu/feature/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() } }