Jetpack Compose에서 하단 탐색을 추가하는 방법은 무엇입니까?

초보자를 위한 Jetpack Compose의 하단 탐색 기능을 추가하는 단계별 가이드

이 기사는 원래 2022년 6월 4일 vtsen.hashnode.dev에 게시되었습니다.

이 문서에서는 이simple navigation in jetpack compose 예제에서 하단 탐색을 추가하기 위해 수행해야 하는 단계를 보여줍니다.

1. 아이콘 벡터 자산 추가

이 예에서는 화면 탐색 탭에 대해 ic_home.xml 및 ic_search.xml 벡터 자산을 추가합니다.

이것은 단계를 강조 표시합니다.

신규 -> ** 벡터 자산**

클립 아트를 클릭하여 아이콘 자산 선택

이름 바꾸기

해당 아이콘을 추가한 후 다음과 같은 컴파일 오류가 발생할 수 있습니다.

AAPT: error: resource attr/colorControlNormal not found.

이는 Jetpack Compose 앱에 필요하지 않은 androidx.appcompat:appcompat 라이브러리에 대한 종속성 때문입니다.

오류를 수정하려면 이 라이브러리를 app\build.gradle 파일에 추가하십시오.

dependencies {
    // required by "?attr/colorControlNormal" ic_home.xml
    implementation 'androidx.appcompat:appcompat:1.4.1'
}

[Updated - Sept 27, 2022]: It looks like this step is unnecessary because we can just reference ImageVector directly from the code using Icons.Default.Home. So this dependency implementation 'androidx.appcompat:appcompat:1.4.1' can be removed as well.

2. BottomNavigation() 컴포저블 추가

androidx.compose.material.BottomNavigation() 하단 표시줄 탐색을 구현하는 데 구성 가능한 함수가 사용됩니다.

@Composable
fun BottomBarNavigation(navController: NavController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    if (currentRoute == null || currentRoute == NavRoute.Login.path) {
        return
    }

    BottomNavigation {
        // implement each navigation tab with BottomNavigationItem() here
    }
}

navController.currentBackStackEntryAsState() is used so that it can retrigger the composable function to run when the navigation route is changed.

3. BottomNavigationItem() 컴포저블 추가

BottomNavigation()에서 각 행 탐색 탭에 대해 RowScope.BottomNavigationItem()를 추가합니다.

BottomNavigation {

    val homeSelected = currentRoute == NavRoute.Home.path
    BottomNavigationItem(
        icon = {
            Icon(
                painter = painterResource(R.drawable.ic_home),
                contentDescription = NavRoute.Home.path
            )
        },
        selected = homeSelected,
        onClick = {
            if(!homeSelected) {
                navController.navigate(NavRoute.Home.path) {
                    popUpTo(NavRoute.Home.path) { inclusive = true }
                }
            }
        },
        label = {Text(NavRoute.Home.path)}
    )
}

icon, selected and onClick are mandatory parameters, the rest are optional.

[업데이트됨 - 2022년 9월 27일]: importing icon asset manually이 더 이상 필요하지 않으므로 교체합니다.

Icon(
    painter = painterResource(R.drawable.ic_home),
    contentDescription = NavRoute.Home.path
)

~와 함께

Icon(
    imageVector = Icons.Default.Home,
    contentDescription = NavRoute.Home.path
)

커밋 변경 사항은 here 입니다.

4. Scaffold bottomBar 구현

BottomBarNavigation() 를 추가하려면 다음과 같이 Scaffold -> bottomBar 매개변수에서 호출합니다.

val navController = rememberNavController()

Scaffold(
    bottomBar = { BottomBarNavigation(navController = navController) }
) {
    NavGraph(navController)
}

[Updated - Sept 28, 2022]: While working on this Simple RSS Feed reader app, I noticed that the content is covered by this bottom bar navigation. To fix that, I used
PaddingValues.calculateBottomPadding() from the Scaffold() to add the bottom padding of the content.

paddingValues.calculateBottomPadding()를 사용하여 필요한 하단 바 패딩을 계산합니다.

val navController = rememberNavController()

Scaffold(
    bottomBar = { BottomBarNav(navController = navController) }
) { paddingValues ->
    NavGraph(
        modifier = Modifier.padding(
            bottom = paddingValues.calculateBottomPadding()),
        navController = navController
    )
}

Modifier 매개변수를 NavGraph() 및 NavHost()에 추가

@Composable
fun NavGraph(
    modifier: Modifier = Modifier, 
    navController: NavHostController) {

    NavHost(
        modifier = modifier,
        navController = navController,
        startDestination = NavRoute.Login.path
    ) {
        /*...*/
    }
}

소스 코드

GitHub 저장소: Demo_SimpleNavigationCompose (bottom_nav branch)

또한보십시오

Compose Destinations - Navigation Library

How to Add Navigation Drawer in Jetpack Compose?

Android Development Tips and Tricks