Base/#3

[tgyuuAn]

1. 📄 관련된 이슈 및 소개

closed #3

2. 🔥변경된 점

• BottomNavigation 장착
• BottomNavigation Visibility 로직
• AuthScreen

3. 📸 스크린샷(선택)

4. 💡알게된 혹은 궁금한 사항들

1. 👁️ BottomNavigation VIsibiliy 로직

1-1. BottomBarState를 remember로 저장 해놓는다.

(이번 프로젝트의 경우 AuthScreen이 첫 번째인데, BottomNavigation이 안보이는 것으로 시작하므로 false로 설정)

var bottomBarState by rememberSaveable { mutableStateOf(false) }

1-2. BottomNavigation을 AnimatedVisibility로 감싸준다.

이건 나중에 https://github.com/tgyuuAn/Baekyoung-i/issues/9#issuecomment-1838824814 로 마이그레이션 되었다.

밑 부분 봐도 되고 안 봐도 되고..

여기서 visible = bottomBarState를 넣어줌.

    AnimatedVisibility(
        visible = bottomBarState,
        enter = slideInVertically(initialOffsetY = { it }),
        exit = slideOutVertically(targetOffsetY = { it }),
        content = {
            BottomNavigation(
                backgroundColor = BaekyoungTheme.colors.white,
                modifier = modifier
            ) {
                TopLevelDestination.entries.forEach { destination ->
                    val isSelect = currentRoute == destination.route
                    BottomNavigationItem(
                        selected = isSelect,
                        onClick = { onNavigateToDestination(destination) },
                        icon = {
                            destination.selectedIcon
                        },
                        selectedContentColor = BaekyoungTheme.colors.blueFF,
                        unselectedContentColor = BaekyoungTheme.colors.gray95,
                        label = {
                            Text(
                                text = stringResource(id = destination.titleTextId),
                                style = BaekyoungTheme.typography.labelNormal,
                                color = if (isSelect) BaekyoungTheme.colors.blueFF
                                else BaekyoungTheme.colors.gray95
                            )
                        }
                    )
                }
            }
        }
    )

애니메이션 수정자 에 재밌는 애니메이션이 많더라. 나중에 공부해야겠다.

2. 🌎 다중 Package 혹은 다중 Module에서 Navigation 관리방법.

아래 처럼 각 모듈 혹은 패키지에

navigation이라는 패키지를 만들어서,

MainNavigation (app 모듈 혹은 MainActivity) 에서 해당 네비게이션 그래프에 접근할 수 있도록

NavGraphBuilder.authScreen() 처럼 확장 함수를 만들어준다.

이 때, 해당 모듈 혹은 패키지로 향할 수 있게 하는 navigateToAuth() 도 해당 모듈 혹은 패키지에서 제공한다.

해당 함수에서 바로 AuthScreen()을 띄워줄 수도 있지만,

AuthRoute()라는 래핑 함수를 만들어서, 해당 네비게이션 내부에 띄워줄 화면을 쉽게 갈아 끼울 수 있도록 한다. (이건 선택사항이다.)

const val authNavigationRoute = "auth_route"

fun NavController.navigateToAuth(navOptions: NavOptions?) {
    this.navigate(authNavigationRoute, navOptions)
}

fun NavGraphBuilder.authScreen() {
    composable(route = authNavigationRoute) {
        AuthRoute()
    }
}

@Composable
internal fun AuthRoute() {
    var id by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    val idChanged: (String) -> Unit = { textValue ->
        id = textValue
    }

    val passwordChanged: (String) -> Unit = { textValue ->
        password = textValue
    }

    AuthScreen(
        id = id,
        password = password,
        idChanged = idChanged,
        passwordChanged = passwordChanged,
    )
}

참고 :

1. NowInAndroid Github

2. Best Practices for Compose Navigation in Multi-Module Project