안드로이드 앱 만들기 : Compose Navigation ... 인터넷 펌.

https://medium.com/@cybercoder.naj/compose-navigation-in-3-minutes-5cff3c57c34e

Compose Navigation in 3 Minutes

나름대로 이제 배움을 정리해 가고 있기는 하나, 아직도 갈 길이 멀어 보이기는 하다.

오늘은 navigation 을 구현해 볼 준비를 해야 겠다. 이글을 읽어 보면서 말이다.

이전 posting 에서 구현해 보려고 했던 것들은 아직 미 완성인지라, 글로 옮겨 오기에는 무리가 있어 보인다.

잘 읽어 보고 오늘도 도전 !!!

2022.05.28 코딩으로 옮겨 보면서...

 

implementation "androidx.navigation:navigation-compose:2.5.0-rc01"

gradle 파일에 추가는 그대로 따라해 본다. 다만, 버전이 달라졌다.

 

먼저 NavigationItem class 는 그대로 따라서 만들어 보았다. 다만, 다른 건 title 을 다국어로 사용하기 위해서

values/string.xml 에 등록된 것을 사용하기 위해서 R.string.이름을 적용했다는 것이다.

sealed class NavigationItem(var route: String, var icon: Int, var title: Int) {
    object Chats : NavigationItem("Chats", R.drawable.ic_baseline_chat_24, R.string.titleChatRoom)
    object Profile : NavigationItem("Profile", R.drawable.ic_baseline_person_24, R.string.profileImage)
    object Menus : NavigationItem("Menus", R.drawable.ic_baseline_menu_24, R.string.title_activity_setting)
}

 

이제 Mainactivity 에서 구성을 해 보겠다. 일단 onCreate 에 navController 을 선언하고 화면 하단에 appbar 을 설정해 보았다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    fontFamily = FontFamily(Font(R.font.poorstory_regular, FontWeight.Normal))

    setContent {
        val navController = rememberNavController()
        MultiChat416Theme {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colors.background
            ) {
                Scaffold(
                    bottomBar = {
                        BottomNavigationBar(navController)
                    }
                ) { innerPadding ->
                    var paddingValues = innerPadding
                    Navigation(navController)
                }
            }
        }
    }
}

 

Navigation 의 구현은 아래와 같이 했는데, NavigationItem 의 route 도 string 으로 구현 되어 있으니, 그것을 이용해 아래와 같이 구현 했다.  navigation 이 찾아갈때, route 을 이용해서 찾아가니, 위치에 따라 잘 구현을 해야 한다.

그리고 아래 부분에는 navigation button 을 클릭 했을 때에 따라서 화면에 표시 하는 부분은 그대로 따라하기를 하였으며

title 의 표시 부분만 일부 수정을 해 보았다.

 

navigation 을 클릭했을 때 동작은 아래 보이는 Navigation 함수에서 처리를 하면 된다.

@Composable
fun Navigation(navController: NavHostController) {
    NavHost(navController = navController, startDestination = NavigationItem.Chats.route) {
        composable(route = NavigationItem.Chats.route) {
            HomeScreen(navController)
        }
        composable(route = NavigationItem.Profile.route) {
            Home2Screen(navController)
        }
        composable(route = NavigationItem.Menus.route) {
            SecondScreen(navController, "Test...")
        }
    }
}

@Composable
fun BottomNavigationBar(navController: NavHostController) {
    val items = listOf(
        NavigationItem.Chats,
        NavigationItem.Profile,
        NavigationItem.Menus
    )
    BottomNavigation(
        backgroundColor = colorResource(id = R.color.softBlue),
        contentColor = Color.White
    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        var context = LocalContext.current
        items.forEach { item ->
            BottomNavigationItem(
                icon = { Icon(painterResource(id = item.icon), contentDescription = context.getString(item.title)) },
                label = { Text(text = context.getString(item.title)) },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White.copy(0.4f),
                alwaysShowLabel = true,
                selected = currentRoute == item.route,
                onClick = {
                    navController.navigate(item.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) {
                                saveState = true
                            }
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

 

bottom navigation 의 구현

 

구현이 끝난 화면의 예시는 위 그림과 같다. 이제 그 부분에 기능을 구현해 보면 될 것 같다.