[PC-185] Bottom Navigation Bar UI 구현

[tgyuuAn]

PC-185

1. ⭐️ 변경된 내용

• Bottom Navigation Bar UI 구현

2. 🖼️ 스크린샷(선택)

2024-12-30.6.03.08.mov

3. 💡 알게된 부분

• Compose Navigation Bar 클릭 시 생기는 Ripple Effect 제거하는 방법

위 그림과 같은 Ripple Effect를 제거하는 방법 입니다.

아래와 같은 RippleInteractionSource를 구현해줍니다.

해당 InteractionSource는 어떠한 것도 구현하지 않아서 RippleEffect를 사용하지 않음을 뜻합니다.

class NoRippleInteractionSource : MutableInteractionSource {
    override suspend fun emit(interaction: Interaction) {}
    override val interactions: Flow<Interaction> = emptyFlow()
    override fun tryEmit(interaction: Interaction): Boolean = true
}

NavigationBarItem(

                // { ... }

                interactionSource = remember { NoRippleInteractionSource() },     // <---- 요기다가 쏙 넣어줌!

                // { ... }

                },
            )

그리고 위와 같이 쏙 넣어주면 완성입니당!

레퍼런스

그리고 이거와 관련해서 공식문서에 설명이 있는데,

공식문서에서 소개하는 코드로는 네비게이션 아이템의 물결 효과를 제거할 수 없습니다.

네비게이션 컴포넌트 내부적으로 Ripple Effect를 다시 CompositionLocal에 넣어주는 것 같더라고요.

• BottomNavigation에 가운데 우뚝한 버튼(?) 이 있는 UI 만들기

결론만 말하자면 바텀 네비게이션 + Scaffold 에서 제공하는 Floating Action Button 을 이용해서 만들었습니다.

다만, Material3 를 사용하게 되면 FAB가 Navigation Bar 상단에 위치하게 되는데,

열심히 스택 오버 플로우를 뒤진 결과 해당 Offset이 Navigation Bar보다 16.dp 상단에 위치함을 알게되었습니다.

레퍼런스

위 정보를 이용해서 저희 중앙 버튼 사이즈가 80px인 점을 이용하여 기존 FAB가 그려지기 시작하는 y좌표가 0이라고 하였을 때,

저희가 최종적으로 시작지점으로 선정해야 하는 y 좌표는 (80+4) 가 되어야 하기 때문에 84를 Offset으로 할당하였습니다.

        floatingActionButton = {
            if (currentDestination?.shouldHideBottomNavigation() == false) {
                FloatingActionButton(
                    onClick = { navigateToTopLevelDestination(MatchingGraph) },
                    containerColor = PieceTheme.colors.white,
                    shape = CircleShape,
                    elevation = bottomAppBarFabElevation(),
                    modifier = Modifier.offset(y = 84.dp),
                ) {
                    Image(
                        painter = painterResource(R.drawable.ic_matching),
                        contentDescription = null,
                        modifier = Modifier.size(80.dp),
                    )
                }
            }
        },
        floatingActionButtonPosition = FabPosition.Center,

[sksowk156]

아주 훌륭합니다! 고생하셨어요 👍

[sksowk156]

캬아... 멋지십니다 👍 👍

[sksowk156]

p4 :
이것도 아래에 변경해주신 것처럼

this?.hierarchy?.any { it.route in HIDDEN_BOTTOM_NAV_ROUTES } == true

으로 변경하면 좋을 것 같아요!

[tgyuuAn]

넵 조아용!

[sksowk156]

이쪽에 두셨군요! 저도 matching ui에서 썼던 CollapsingHeaderNestedScrollConnection 클래스를 어디 둘까 고민하고 있는데 ui에 두면 좋을까요?! 🤔 태규님 의견이 궁금합니다!

[tgyuuAn]

이쪽에 두셨군요! 저도 matching ui에서 썼던 CollapsingHeaderNestedScrollConnection 클래스를 어디 둘까 고민하고 있는데 ui에 두면 좋을까요?! 🤔 태규님 의견이 궁금합니다!

아하, 생각해보니 별 생각 없이 뒀는데 최소 3군데 이상 다른 모듈에서 쓰이면 common-ui 모듈로 올리는 것이 좋을 것 같아요.

NoRippleInteractionSource 도 일단은 app모듈에서만 사용하니까 app모듈로 돌려두겠습니다!

[sksowk156]

아하 죠습니다!!