[Android, Kotlin] Compose UI 정리(6)

이번 포스팅에서는 compose ui로 bottom navigation을 만드는 예제를 정리해 볼 것이다.

 

이전 포스팅

https://rkdrkd-history.tistory.com/46

[Android, Kotlin] Compose UI 기록(5)

 

compose로 bottom navigation을 만드는 방법은 여러 가지가 있지만, 필자는 navigation compose에서 제공되는 BottomNavigation을 사용해 만들어 보겠다.

---

1. 라이브러리 추가

app 단위의 gradle에 다음과 같은 라이브러리를 추가한다.

implementation "androidx.navigation:navigation-compose:2.5.3"

 

 

2. 본격적으로 구현하기

일단 필자는 3개의 탭(검색, 홈, 프로필)으로 구성된 bottom navigation을 만들어 보겠다.

 

1. 화면을 담아놓는 클래스

가장 먼저 해야 할 것은

bottom navigation에 들어갈 screen(화면)을 담아놓는 클래스를 만들어야 한다.

sealed class BottomNavItem(
    val icon: Int, val screenRoute: String
) {
    object Search: BottomNavItem(R.drawable.search_icon, Screen.SearchScreen.route)
    object Home: BottomNavItem(R.drawable.home_icon, Screen.HomeScreen.route)
    object Profile: BottomNavItem(R.drawable.profile_icon, Screen.ProfileScreen.route)
}

sealed class를 쓰는 이유?

• kotlin의 sealed class는 추상 클래스로 상속받는 자식 클래스의 종류를 제한하는 역할을 하기 때문에 컴파일러에서 sealed class의 자식 클래스가 몇이나 되는지 알 수 있기 때문에 나중에 쓸 코드에서 when문을 사용할 때, else를 넣지 않아도 되는 장점이 있다.

자식 클래스의 구성 요소로는 아이콘, route가 있다(title을 추가하고 싶으면 부모 클래스에 title 파라미터를 만들어서 구현하면 된다).

여기서 route는 현재 스크린의 주소라고 생각하면 될 것 같다.

(route는 추후에 구현할 때 자주 쓰이기 때문에 변수로 만들어서 저장해놓는게 좋을 듯하다.)

 

서론이 길었지만 일단 필자는 3개의 screen의 bottom navigation을 만들 것이기 때문에 3개의 자식 클래스(object class)들을 만들어주었다.

 

 

2. Screen 간의 이동을 위한 Navigation구현하기

@Composable
fun NavigationGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = BottomNavItem.Home.screenRoute
    ) {
        composable(BottomNavItem.Search.screenRoute) {
            SearchScreen()
        }
        composable(BottomNavItem.Home.screenRoute) {
            HomeScreen()
        }
        composable(BottomNavItem.Profile.screenRoute) {
            ProfileScreen()
        }
    }
}

navigation은 compose에서 화면을 이동하기 위한 장치라 할 수 있다.

NavHost에서 startDestination은 앱이 시작되었을 때 처음으로 나오는 screen이라고 보면 되겠다.

NavHost에서 현재 route에 따라서 튀어나올(?) screen들을 관리한다.(composable() 안의 screen 함수는 필자가 만든 composable 함수이기에 이 글을 보시는 분들은 직접 만들어보시길 바란다.)

 

 

3. 진짜 본격적으로 구현하기(?)

이제 진짜로 bottom navigation을 구현해 보자.

@Composable
fun BottomNavigationView(navController: NavController) {
    val items = listOf(
        BottomNavItem.Search,
        BottomNavItem.Home,
        BottomNavItem.Profile
    )
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    BottomNavigation(
        backgroundColor = Color.White,
        contentColor = Color.Black
    ) {
        items.forEach { item ->
            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = item.icon),
                        contentDescription = null,
                        modifier = Modifier.size(30.dp)
                    )
                },
                selected = currentRoute == item.screenRoute,
                onClick = {
                    navController.navigate(item.screenRoute) {
                        navController.graph.startDestinationRoute?.let {
                            popUpTo(it) { saveState = true }
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

대충 코드의 역할을 설명하자면

• BottomNavigation 파라미터: backgroundColor(배경색), contentColor(아이템이 클릭되었을 때의 색)
• items: 현재 스크린들을 모아놓은 리스트로, forEach 문에서 사용하기 위해 만든 변수이다.
  (필자의 경우에는 screen마다 구현할 로직이 같기 때문에 list로 만들어 구현했지만, 그렇지 않은 경우에는 BottomNavigationItem을 따로따로 만들어 구현해 보자)
• icon: bottom navigation의 아이콘이 위치하는 곳이다.
• selected: 해당 아이템이 클릭되었을 때, 해당 screen의 route를 currentRoute로 설정한다.
• onClick: 해당 아이템이 클릭되었을 때의 로직을 작성하는 곳이다.
  onclick 안에는 navigate(route)를 사용해 해당 스크린을 맨 위로 올려서(popUpTo()) 앱의 화면에 보이게 만들었다.

 

4. 만든 거 붙이기(?)

이제 만든 bottom navigation을 activity에 붙여보겠다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SetBottomNav()
        }
    }
}

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SetBottomNav() {
    val navController = rememberNavController()

    Scaffold(
        modifier = Modifier.fillMaxSize().systemBarsPadding(),
        bottomBar = {
            BottomNavigationView(navController = navController)
        }
    ) {
        NavigationGraph(navController = navController)
    }
}

Scaffold의 bottomBar 파마리터를 사용해 구현했다.

또한 Scaffold 본문에 아까 정의한 navigation을 달았다(?)

 

 

5. 결과

search screen

 

home screen

 

profile screen

 

---

정리

• xml bottom navigation view에 익숙해져 있던 필자에게는 compose로 구현하는 것은 큰 과제였다(ㅠㅠ).
• xml 때와는 다른 게 navigation을 이용해 bottom navigation을 구현해야 한다는 것이 상당히 힘들었지만, 역시 완성된 결과를 보면서 뿌듯한 감정을 참을 수가(?) 없었다.

 

다음 포스팅에서는 필자가 search screen, home screen에 구현되어 있던 compose로 grid recyclerview 만들기를 올릴 예정(?)이다.