Navigation Drawer 구현방법 # Jetpack Compose

오늘은 Jetpack Compose 를 이용해서 Navigation Drawer 를 구현하는 방법에 대해서 정리해 보도록 하겠습니다.

 

이 글에서는 TopAppBar등 Scaffold를 이용하면 빠르게 구현할 수 있는 요소들이 있어서,

Scaffold 를 사용하고 있는데요.

이에 대한 기본적인 내용은 아래 글을 참조해 주세요.

>> Scaffold SnackBar Floating Action Button구현 # Android Jetpack Compose UI Part3

 

1. Drawer에 표현할 메뉴들 Enum Class로 정의하기

Drawer에 들어올 메뉴들을 미리 정의해 놓았습니다.

sealed class로 정의하면, 다이나믹한 데이터를 추가할 수 있지만,

enum Class로 들어오면, iterate을 하기에 편하기에 enum class로 정의하였습니다.

향후 Navigation에 사용할 route도 미리 같이 넣어주었습니다.

 

 

2. Composable 정의하기

위에서 정한 메뉴들을 클릭했을 때 보여줄 UI를 정의해야하는데요.

심플하게 해당페이지의 메뉴이름만 보여지도록 하였습니다.

 

 

3. AppBar Composable 

위에서 페이지를 정의하였다면, 

그에 따라 변경할 AppBar의 Composable도 만들어 주도록 해야합니다.

페이지안에 추가해도 되지만, 이렇게 공통으로 단순한 형태를 사용할 경우는 아래와 같이 하나의 Composable로 만들어주면 됩니다.

 

이미 TopAppBar라는 Composable이 있으므로 이를 불러와서 사용해주면 됩니다.

인자로 onMenuClick을 받은 이유는 , 

AppBar의 메뉴아이콘을 클릭하면 drawer가 열리게 하도록 하기 위함입니다.

 

 

 

4. Scaffold 에서 topBar 와 drawerContent 설정하기

4-1. drawerContent

먼저 drawerContent를 아래와 같이 설정해 줍니다.

{ } 안은 아래에 보이는 것처럼, ColumScope입니다.

따라서 세로로 원하는 UI를 넣어주면 됩니다.

 

위에서 정의한 NavDrawerHead와 NavDrawerBody를 넣어줍니다.

클릭시에는 menu아이템이 들어오므로, 

enum으로 정의한 값에 해당하면 페이지를 이동하도록 해 줍니다.

Body부분에 추후에 Navigation만 추가해주면 되겠네요.

 

 

 

참고로 drawer는 화면 어디에서도 우측으로 드래깅하면 열리도록 디폴트값이 설정되어 있는데요.

닫힐때는 어디에서나 드래깅해도 닫히더라도,

열릴때는 그러지 않도록 하기 위해서는 scaffold에서 "drawerGestureEnabled"를 false로 해주면 됩니다.

닫혀있을 때는 drawerState.isOpen은 false일 것이므로,

아래와 같이 해주면 원하는데로 할 수 있겠습니다.

 

drawerGesturesEnabled = scaffoldState.drawerState.isOpen,

 

4-2. topBar

topBar도 이미 위에서 정의하였으므로 가져다 사용하기만 하면 됩니다.

인자로 주는 onMenuClick에서 메뉴아이콘을 클릭하면 해야되는 것을 정의해야 하는데요.

바로 drawer를 open해 주어야 합니다.

 

Composable에서 UI를 변화시킬 때 필요한 것은 무엇인가요?

state입니다. Toast나 Navigation처럼 일회성 액션이 아니라면 state로 접근해주어야 하는데요.

미리 정의해둔 scaffoldState에 접근하면, drawerState을 얻을 수 있습니다.

이 state에 open함수를 사용해주면 됩니다.

한가지 주의할 것은 이 open()함수는 Coroutine에서 실행해 주어야 해서,

CoroutineScope를 필요로 하는데요.

이것은 rememberCoroutineScope()함수로 가져올 수 있습니다.

 

 

 

5. Navigation

이제 Drawer에 Navigation을 붙일 차례입니다.

 

Navigation에 대해서는 아래 글을 참조하시면 됩니다.

>> Navigation 과 Bottom Navigation 구현방법 정리 # Jetpack Compose

 

Route는 이미 위에서 Enum클래스를 만들 때 같이 정의해 주었으니 그것을 그대로 사용하겠습니다.

이제 navController와 NavHost만 만들어주면 되겠네요.

 

5-1. NavController

navController를 생성하기 위해서 다음과 같이 해주면 됩니다.

 

 

5-2. NavHost

NavHost에서는 위에서 정의했던, 메뉴를 정하면 보유줄 페이지들을 보여주도록 하겠습니다.

 

 

이렇게 정의한 Navigation()함수를 Scaffold 내부에 넣어줍니다.

 

 

 

5-3. DrawerContent 에서 Navigation 실행

이제 drawerContent에서,

navController를 이용해서 Navigation을 실행해주기만 하면 됩니다.

 

 

6. 실행

실행해보면 아래와 같이 동작하는 것을 볼 수 있습니다.

 

 

이상으로 Jetpack Compose 로 NavigationDrawer 를 구현하는 방법에 대해서 정리해 보았습니다.