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

초보자용 Jetpack Compose에 탐색 창을 추가하는 단계별 가이드

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

이 자습서는 이전에 생성한 이 기존bottom navigation demo app 위에 구축되었습니다.

앱은 로그인 화면으로 시작한 다음 홈 화면으로 이동합니다. 홈 화면에서 프로필 또는 검색 화면으로 이동할 수 있습니다.

홈 화면에서 시작하는 내비게이션 드로어를 추가하겠습니다.

1. 탐색 아이콘 메뉴가 있는 상단 앱 바 추가

상단 앱 바는 홈 화면에서 다음과 같이 보입니다.

구현TopBar() 구성 가능

현재 경로가 로그인 경로인 경우 반환합니다. 홈 화면에서 시작하는 상단 앱 표시줄만 표시하려고 합니다.

@Composable
fun TopBar(
    navController: NavController,
    onNavigationIconClick: () -> Unit,
) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

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

    TopAppBar(
        title = {
            Text(text = stringResource(id = R.string.app_name))
        },
        navigationIcon = {
            IconButton(onClick = onNavigationIconClick) {
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = null,
                )
            }
        },
    )
}

MainScreen()에서 TopBar()를 매개변수로 Scaffold()에 전달합니다.

scaffoldState도 전달해야 합니다. 이 단계를 놓치면 탐색 창이 표시되지 않습니다

.

탐색 아이콘을 클릭하면 코루틴을 시작하여 scaffoldState.drawerState.open()를 호출하여 탐색 창을 엽니다(추후 구현 예정).

val navController = rememberNavController()
val scaffoldState = rememberScaffoldState()
val scope =  rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    topBar = { TopBar(
        navController =navController,
        onNavigationIconClick = {
            scope.launch {
                scaffoldState.drawerState.open()
            }
        }
    ) },
    bottomBar = { BottomBarNav(navController = navController) },
) {
    NavGraph(navController)
}

2. 내비게이션 서랍 및 본문 추가

미리보기는 이렇게 생겼습니다.

서랍 머리글을 추가합니다. 머리글은 단순한 텍스트입니다.

@Composable
fun DrawerHeader(){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 64.dp)
        ,
        horizontalArrangement = Arrangement.Center,
    ) {
        Text(text = "Header", fontSize = 60.sp)
    }
}

아이콘과 텍스트가 연속으로 포함된 서랍 메뉴 항목을 추가합니다.

@Composable
private fun DrawerMenuItem(
    iconDrawableId: Int,
    text: String,
    onItemClick: () -> Unit){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable {onItemClick()}
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
    ){
        Icon(
            painter = painterResource(iconDrawableId),
            contentDescription = null,
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(text = text, )
    }
}

홈 및 검색 서랍 메뉴 항목을 포함하도록 서랍 본체를 추가합니다.

@Composable
fun DrawerBody(navController: NavHostController?, closeNavDrawer: () -> Unit) {
    Column {
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_home,
            text = NavRoute.Home.path,
            onItemClick = {
                navController?.navigate(NavRoute.Home.path)
                closeNavDrawer()
            }
        )
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_search,
            text = NavRoute.Search.path,
            onItemClick = {
                navController?.navigate(NavRoute.Search.withArgs("liang moi"))
                closeNavDrawer()
            }
        )
    }
}

완료

소스 코드

GitHub 저장소: Demo_SimpleNavigationCompose(bottom_nav_drawer branch)

또한보십시오

How to Add Bottom Navigation in Jetpack Compose?

Compose Destinations - Navigation Library

Android Development Tips and Tricks